Customization:
I have made the customization easy for you by breaking the template code into sectional parts. Find the following pieces of code in the template after installation and make your customization over there.
Header:
.header-wrapper {
background: #272727;
display: block;
float: left;
width: 100%;
padding: 0;
padding-bottom: 25px;
border-bottom: 15px solid #fff;
}
background: #272727;
display: block;
float: left;
width: 100%;
padding: 0;
padding-bottom: 25px;
border-bottom: 15px solid #fff;
}
Header Social Buttons:
.topbar-right {
text-align: right;
padding-right: 15px;
margin-top: 45px;
margin-bottom: 38px;
}
text-align: right;
padding-right: 15px;
margin-top: 45px;
margin-bottom: 38px;
}
Header News Trending:
.top-bar {
background: none repeat scroll 0% 0% #fff;
color: #ACACAC;
padding: 0;
font-size: 12px;
line-height: 40px;
}
background: none repeat scroll 0% 0% #fff;
color: #ACACAC;
padding: 0;
font-size: 12px;
line-height: 40px;
}
Header Menu Bar:
#menu-bar {
float: left;
width: 100%;
background: #fff;
margin-top: -63px;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
ul#menu-main {
padding: 5px;
margin: 0;
}
ol, ul {
padding: 10px 0 20px;
margin: 0 0 0 35px;
text-align: left;
}
ol, ul {
list-style: none;
}
float: left;
width: 100%;
background: #fff;
margin-top: -63px;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
ul#menu-main {
padding: 5px;
margin: 0;
}
ol, ul {
padding: 10px 0 20px;
margin: 0 0 0 35px;
text-align: left;
}
ol, ul {
list-style: none;
}
Featured Posts(slideshow section):
.featured-posts-section {
background: #f9f9f9;
border-bottom: 1px solid #ddd;
padding-top: 20px;
}
background: #f9f9f9;
border-bottom: 1px solid #ddd;
padding-top: 20px;
}
Top 728x90 Ad:
<!-- google_ad_section_show_on_home_and_blog_start -->
<center>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDSQGt6xlQU-rzhRMnyQViRqCraBT_UgA0-oFIJLOUQMX32TvkUQmvsAt3mXrNUVaKKQLI6tD2rYmpL9cIyc4V1ejXqwA_1QEX7L8uD-IkMqHdYl2c48DTQYLpyHBs7Zh7tbWkjiVv_EQ/s1600/ad-darker.jpg">
</center>
<center>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDSQGt6xlQU-rzhRMnyQViRqCraBT_UgA0-oFIJLOUQMX32TvkUQmvsAt3mXrNUVaKKQLI6tD2rYmpL9cIyc4V1ejXqwA_1QEX7L8uD-IkMqHdYl2c48DTQYLpyHBs7Zh7tbWkjiVv_EQ/s1600/ad-darker.jpg">
</center>
Sidebar:
.sidebar {
width: 32.33%;
overflow: hidden;
float: left;
margin-top: 8px;
}
width: 32.33%;
overflow: hidden;
float: left;
margin-top: 8px;
}
Bottom 728x90 Ad:
<!-- google_ad_section_show_on_home_and_blog_end -->
<center>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDSQGt6xlQU-rzhRMnyQViRqCraBT_UgA0-oFIJLOUQMX32TvkUQmvsAt3mXrNUVaKKQLI6tD2rYmpL9cIyc4V1ejXqwA_1QEX7L8uD-IkMqHdYl2c48DTQYLpyHBs7Zh7tbWkjiVv_EQ/s1600/ad-darker.jpg">
</center>
<center>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDSQGt6xlQU-rzhRMnyQViRqCraBT_UgA0-oFIJLOUQMX32TvkUQmvsAt3mXrNUVaKKQLI6tD2rYmpL9cIyc4V1ejXqwA_1QEX7L8uD-IkMqHdYl2c48DTQYLpyHBs7Zh7tbWkjiVv_EQ/s1600/ad-darker.jpg">
</center>
‘Load More Articles’ Button:
#load-more a:hover {
-webkit-box-shadow: inset 50pc 0px 0px #D34444;
-moz-box-shadow: inset 50pc 0px 0px #D34444;
box-shadow: inset 50pc 0px 0px #D34444;
}
#load-more a {
background: #e84c4c;
padding: 15px 0;
color: #fff;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 100%;
overflow: hidden;
font-weight: 700;
display: inline-block;
-webkit-transition: all 200ms;
-moz-transition: all 200ms;
-o-transition: all 200ms;
transition: all 200ms;
}
-webkit-box-shadow: inset 50pc 0px 0px #D34444;
-moz-box-shadow: inset 50pc 0px 0px #D34444;
box-shadow: inset 50pc 0px 0px #D34444;
}
#load-more a {
background: #e84c4c;
padding: 15px 0;
color: #fff;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 100%;
overflow: hidden;
font-weight: 700;
display: inline-block;
-webkit-transition: all 200ms;
-moz-transition: all 200ms;
-o-transition: all 200ms;
transition: all 200ms;
}
Footer:
#footer {
background: #202020;
display: block;
overflow: hidden;
width: 100%;
color: #959595;
}
background: #202020;
display: block;
overflow: hidden;
width: 100%;
color: #959595;
}
Hope I covered the main elements that can be customized. Feel free to ask if you need any guidance in customizing this template.
Post a Comment