Introducing Cool Stuff - HTML Theme

  • Cool Stuff - HTML Theme
  • Created: 2-April-2013
  • By: RedSky
  • Email: wp@red-sky.pl

Licensing Terms: Please be advised, in order to use the theme in a legal manner, you need to purchase a separate license for each domain you are going to use the theme on.

A single license is limited to a single domain/application.

Thank you for purchasing our product! We are very glad that you have decided on our HTML theme.

The theme is very easy to use and we are here to guide and help you, so please read and follow the instructions and if you have further questions write us a email wp@red-sky.pl. This documentation is more of a reference work if you do not know what to do and need a better understanding on how the template is built write us a email.

Modification

To the Top

Cool Stuff has 15 HTML Files:

  • index.html - Home Page
  • home2.html - Alternative home Page (Timeline style)
  • home3.html - Alternative home Page (Masonry style)
  • services.html - Services page
  • left_sidebar.html - Page with left sidebar
  • right_sidebar.html - Page with right sidebar
  • error.html - 404 error page
  • members.html - Show the team
  • events.html - Show the events
  • single_event.html - Show description of events
  • categories.html - Page with filter post by tag names
  • blog.html - Blog Page
  • post.html - Single Post Page
  • features.html - page contain typography
  • contact.html - Contact Page

A screen of the Home Page:

theme

The themes includes 3 javascripts:

  • jQuery Library 1.9.2
  • project.js
  • sharethos.js
  • mediaelement-and-player.min.js
  • jquery.swipebox.min.js
  • jquery.slides.min.js
  • parsley.js

CSS Files and Structure

To the Top

This theme has been implemented as a responsive layout. The full width of the template is 960px for screen mode, 768px for tablet size screen, and for mobile 400px and the smallest one is 300px.

The CSS file is located in the css folder. The css file is registered and included in the "head"..."/head".

CSS file is very good structured and arranged so you can search very easy:

/*=============== Sidebar style ===============*/
.sidebar-element {
  background-color: #232323;
  margin-bottom: 1.5em;
}
.sidebar-element > h3 {
  margin: 0;
  background-color: #515151;
  text-align: center;
  color: #ffffff;
  padding: 0.6666666666666667em 0;
}
/*=============== Category ===============*/
.category-list > li {
  padding: 18px 18px 18px 72px;
  -webkit-box-shadow: 0 1px 0 #2e2e2e;
  box-shadow: 0 1px 0 #2e2e2e;
  position: relative;
  counter-increment: i;
}
.category-list > li:before {
  content: counter(i);
  position: absolute;
  top: 18px;
  left: 12px;
  width: 48px;
  height: 48px;
  display: block;
  text-align: center;
  line-height: 48px;
  font-size: 18px;
  color: #ffffff;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
.category-list > li:after {
  content: '\0203A';
  position: absolute;
  font-size: 3em;
  line-height: 1.75em;
  top: 0;
  right: 12px;
  color: #5d5d5d;
}
.category-list > li:last-child {
  -webkit-box-shadow: 0 0 0 transparent;
  box-shadow: 0 0 0 transparent;
}
.category-list > li > h3 {
  margin: 0;
}
.category-list > li > h3 > a {
  color: #ffffff;
  text-transform: none;
  font-weight: 300;
}
.category-list > li > p {
  color: #5d5d5d;
  margin: 0;
  font-size: 0.8125em;
  line-height: 1.846153846153846em;
}
/*COlors-bage*/
.blue-bage a:hover {
  color: #5a9aa8;
}
.blue-bage:before {
  background-color: #5a9aa8;
}
.green-bage a:hover {
  color: #2c7259;
}
.green-bage:before {
  background-color: #2c7259;
}
.red-bage a:hover {
  color: #e56c69;
}
.red-bage:before {
  background-color: #e56c69;
}
.magenta-bage a:hover {
  color: #8c5d79;
}
.magenta-bage:before {
  background-color: #8c5d79;
}
/*=============== Calendar ===============*/
#wp-calendar {
  width: 100%;
  position: relative;
}
#wp-calendar caption {
  line-height: 3.5625em;
  position: relative;
}
#wp-calendar caption a {
  width: 1.875em;
  display: inline-block;
  color: #ffffff;
  font-size: 2em;
  position: absolute;
}
#wp-calendar caption a:hover {
  background: #e56c69;
}
#wp-calendar caption span {
  color: #fff;
  font-size: 1.125em;
  position: relative;
  top: 6px;
}
#wp-calendar thead {
  background-color: #2c7259;
}
#wp-calendar thead tr th {
  color: #ffffff;
  font-size: 0.6875em;
  line-height: 3.272727272727273em;
}
#wp-calendar tbody tr td {
  -webkit-box-shadow: inset 1px 1px 0 #2e2e2e;
  box-shadow: inset 1px 1px 0 #2e2e2e;
  color: #ffffff;
  line-height: 2.4375em;
  text-align: center;
}
#wp-calendar tbody tr td a {
  background-color: #2c7259;
  display: block;
  color: #ffffff;
}
#wp-calendar tbody tr td a:hover {
  background-color: #515151;
}
#prev {
  top: 0;
  left: 0;
  border-right: 1px solid #2e2e2e;
}
#next {
  top: 0;
  right: 0;
  border-left: 1px solid #2e2e2e;
}
/*=============== Dropdown menu ===============*/
.dropdown-box {
  padding: 9px;
  height: 54px;
  position: relative;
}
.dropdown-box > label {
  background: #fff;
  display: block;
  padding: 15px;
  font-size: 1.125em;
  position: relative;
  -webkit-box-shadow: inset -53px 0 0 #ffffff, inset -54px 0 0 #e9e9e9;
  box-shadow: inset -53px 0 0 #ffffff, inset -54px 0 0 #e9e9e9;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.dropdown-box > label > b {
  position: absolute;
  width: 0;
  height: 0;
  right: 0;
  top: 0;
  margin: 25px 19px;
  display: block;
  border-top: 8px solid #6d6d6d;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}
.dropdown-box > input[type=checkbox] {
  opacity: 0;
  filter: alpha(opacity=0);
}
.dropdown-box > input[type=checkbox]:checked + label {
  -webkit-box-shadow: inset -53px 0 0 #e56c69, inset -54px 0 0 #e9e9e9;
  box-shadow: inset -53px 0 0 #e56c69, inset -54px 0 0 #e9e9e9;
}
.dropdown-box > input[type=checkbox]:checked + label > b {
  border-left: 12px solid #ffffff;
  border-right: 12px solid #ffffff;
  border-top: 3px solid #ffffff;
  box-shadow: 0 8px 0 #ffffff, 0 -8px 0 #ffffff;
  margin: 26px 15px;
}
.dropdown-box > input[type=checkbox]:checked ~ ul {
  display: table;
}
.dropdown-box > input[type=checkbox] ~ ul {
  position: absolute;
  background-color: #e56c69;
  display: table;
  width: 100%;
  display: none;
}
.dropdown-box > input[type=checkbox] ~ ul > li {
  -webkit-box-shadow: 0 1px 0 #e87c79;
  box-shadow: 0 1px 0 #e87c79;
}
.dropdown-box > input[type=checkbox] ~ ul > li > a {
  padding: 0 24px;
  display: block;
  color: #ffffff;
  font-size: 1.125em;
  line-height: 2.6666666666666665em;
  position: relative;
}
.dropdown-box > input[type=checkbox] ~ ul > li > a:hover {
  background-color: #e77976;
}
.dropdown-box > input[type=checkbox] ~ ul > li > a:after {
  content: '\0203A';
  position: absolute;
  font-size: 1em;
  line-height: 2.7em;
  top: 0;
  left: 9px;
  color: #ffffff;
  font-family: Tahoma, Geneva, sans-serif;
}
/*=============== Recent posts ===============*/
                    

All JavaScript are registered and included in the "head"..."/head".

Credits and Sources

To the Top

I've used the following images, icons, fonts or other files as listed.

Fonts used:

Thank you so much for choosing "Cool Stuff" we hope you will enjoy using it!