WordPress News Theme 7
In this tutorial, I’m going to pull everything together. After this we will be very close to being finished.
I’ll create the menu bar for the theme. Then I finish styling the front blog page. I show you how to make sure your images always align properly. To finish everything else I style the final pages I’ll make in the next tutorial.
We are almost done. If you missed part 1 of this tutorial it is here WordPress News Theme.
All of the code follows the video. Use it however you’d like under the GNU license.
Code From the Video
STYLE.CSS
/*
Theme Name: New Think Tank News Theme 1
Theme URI: http://www.newthinktank.com
Description: A really nice news theme with featured content slider
Author: Derek Banas
Author URI: http://www.newthinktank.com
Version: 1
*/
@import url(http://fonts.googleapis.com/css?family=Lobster&v1);
html {
background: #EEE1C2;
background-image:url(‘./images/Lines-8.jpg’);
background-repeat:repeat;
}
body {
background-color: #EEE1C2;
background-image:url(‘./images/Lines-8.jpg’);
background-repeat:repeat;
font: 14px/1.4 Georgia, serif;
}
#header, #footer, #firstSidebar, #secondSidebar {
display: block;
}
#pageWrapper {
width:1000px;
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
}
/* All Header CSS Styling */
#header {
position: relative;
background-color: #676767;
background-image:url(‘./images/Lines-8.jpg’);
background-repeat:repeat;
height: 55px;
padding: 20px;
}
#blogTitle a{
position: absolute;
left: 26px;
top: 15px;
color: #FFF;
font: bold 40px/1.4 ‘Lobster’, tahoma, sans-serif;
text-shadow: #676767 2px 2px 4px;
text-decoration: none;
}
#blogTitle a:hover{
color: #E6E8FA;
text-shadow: #000 2px 2px 4px;
}
#blogSlogan {
position: absolute;
left: 124px;
top: 50px;
color: #FFF;
font: bold 15px/1.0 Arial, sans-serif;
text-shadow: #676767 1px 1px 2px;
}
#searchBox {
position: absolute;
left: 700px;
top: 65px;
color: #FFFFFF;
font: bold 15px/1.0 Arial, sans-serif;
text-shadow: #000000 2px 2px 1px;
text-transform:uppercase;
}
/* All Sidebar CSS Styling */
#firstSidebar {
font: 13px/1.4 Georgia, serif;
color: #666;
padding 5px;
padding-bottom: 15px;
padding-left: 10px;
background-color: #FFFFFF;
width: 250px;
text-align: left;
float: right;
margin-left: 5px;
margin-right: 5px;
margin-top: 0px;
border-left: 1px solid #DCDCDC;
}
.sidebarTitle h4 {
font: bold 14px/17px Helvetica, sans-serif;
text-transform: uppercase;
color: #000f2e;
}
.sidebarExcerpt li ul li a{
list-style-type: none;
text-decoration: none;
}
.pagenav {
list-style-type: none;
text-decoration: none;
}
.pagenav ul li a{
text-decoration: none;
font: bold 14px/17px Helvetica, sans-serif;
text-transform: uppercase;
color: #666;
}
#firstSidebar li{
font: bold 14px/17px Helvetica, sans-serif;
text-transform: uppercase;
list-style-type: none;
border-bottom: 1px dashed #DCDCDC;
padding-bottom: 3px;
padding-top: 3px;
margin-left: 0px;
text-decoration: none;
}
#firstSidebar li a{
text-decoration: none;
font: bold 14px/17px Helvetica, sans-serif;
text-transform: uppercase;
color: #666;
}
.sidebarExcerpt a {
text-decoration: none;
}
.pagenav .sidebarTitle h4 {
text-decoration: none;
}
.sidebarExcerpt .categories li{
text-decoration: none;
list-style-type: none;
}
#firstSidebar ul li{
font: bold 14px/17px Helvetica, sans-serif;
border-bottom: 1px dashed #DCDCDC;
padding-bottom: 3px;
padding-top: 3px;
margin-left: -30px;
text-decoration: none;
}
#footer {
background-color: #000f2e;
text-align: center;
color: #FFF;
padding: 20px;
height: 220px;
}
.footerContent {
text-align:left;
width: 320px;
padding-left: 10px;
padding-right: 10px;
padding-bottom:15px;
float: left;
}
.footerContent .pagenav ul li a {
color: #FFF;
}
.footerContent .sidebarTitle h4 {
color: #FFF;
}
.footerContent li {
font: bold 14px/17px Helvetica, sans-serif;
list-style: none;
margin-left: -30px;
color: #FFF;
}
.footerContent li a {
text-decoration: none;
text-transform: uppercase;
color: #FFF;
}
.footerTitle h4 {
font: bold 14px/17px Helvetica, sans-serif;
text-transform: uppercase;
color: #FFF;
margin-left: -40px;
}
/* The Container for the Drop Down Menu*/
#navigation {
float:left;
width:100%;
background: #000f2e;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#0b386f’, endColorstr=’#000f2e’); /* for IE */
background-image: -webkit-gradient(linear, left top, left bottom, from(#0b386f), to(#000f2e)); /* for webkit browsers */
background-image: -moz-linear-gradient(top, #0b386f, #000f2e); /* for firefox 3.6+ */
font: bold 14px/.5 Arial, sans-serif;
border: 0px;
}
/* Menu Bar List */
ul.dropdown {
list-style:none;
float:left;
width:100%;
padding: 0px;
}
ul.dropdown li{
float:left;
position:relative;
z-index:100;
}
ul.dropdown a {
padding:12px;
color:#FFFFFF;
text-decoration:none;
text-shadow:1px 1px 0 #000000;
z-index:100;
}
/* Link Hovering Style */
ul.dropdown li:hover a {
background: #9E1412;
color: #0bd4ff;
background: #000f2e;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#0b386f’, endColorstr=’#000f2e’); /* for IE */
background-image: -webkit-gradient(linear, left top, left bottom, from(#0b386f), to(#000f2e)); /* for webkit browsers */
background-image: -moz-linear-gradient(top, #0b386f, #000f2e); /* for firefox 3.6+ */
border-right:1px solid #0b386f;
border-left: 1px solid #000f2e;
text-shadow:1px 1px 0 #000000;
}
/* Displays Links as Blocks */
ul.dropdown li ul a {
display:block;
}
/* The Sub Menus */
ul.dropdown ul {
list-style: none;
margin:0;
padding:0;
width:200px; /* Width of the Drop Down Box */
position:absolute;
}
ul.dropdown li ul {
top:24px; /* Drop the Drop Down Box 24px */
}
ul.dropdown ul ul {
top:0;
left:100%;
}
ul.dropdown ul li {
float:none;
}
ul.dropdown ul,
ul.dropdown li:hover ul ul,
ul.dropdown ul li:hover ul ul
{ display: none; }
ul.dropdown li:hover ul,
ul.dropdown ul li:hover ul ,
ul.dropdown ul li ul li:hover ul
{ display: block;}
ul.dropdown li * a:hover {
color: #FFF;
background: #000f2e;
border-bottom: 1px solid #0b386f;
border-top: 1px solid #000f2e;
text-shadow:1px 1px 0 #000000;
}
/* Make all the images position properly in articles */
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
.aligncenter{
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}
img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}
.alignright {
float: right;
}
.alignleft {
float: left;
}
HOME.CSS
#mainContent {
padding: 0px 5px 0px 15px;
background-color: #FFFFFF;
margin-right: 255px;
margin-top: 5px;
height: auto;
min-height:1200px;
}
.postLists {
position: relative;
list-style: none;
margin-right: 330px;
}
.postLists li{
position: relative;
margin-left : 0px;
border-bottom: 1px solid #DCDCDC;
}
div.postLists {
width: 420px;
}
.postTitle a{
background-color: #FFF;
color: #000f2e;
padding: 5px;
margin-left: 90px;
text-transform: uppercase;
font: bold 14px/17px Helvetica, sans-serif;
text-decoration:none;
}
.articleTitle a {
color: #000f2e;
padding: 5px;
margin-left: 0px;
text-transform: uppercase;
font: bold 24px/18px Georgia, serif;
text-decoration: none;
}
.articleContent {
font: 18px/1.4 Georgia, serif;
color: ##0F0F0F;
position: relative;
list-style: none;
}
.postImage {
position: absolute;
top: 7px;
left: 0px;
}
.postExcerpt {
position: relative;
padding: 0px 0px 0px 95px;
color: #666;
line-height: 1.5;
margin-top: -20px;
}
.postContent {
position: relative;
padding: 0px 0px 0px 80px;
color: #666;
line-height: 1.5;
}
.featuredPosts {
font: 13px/1.4 Georgia, serif;
color: #666;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 15px;
padding-left: 10px;
background-color: #FFFFFF;
width: 250px;
text-align: left;
float: right;
margin-left: 5px;
margin-right: 5px;
margin-top: -10px;
border-left: 1px solid #DCDCDC;
}
.featuredLists {
position: relative;
list-style: none;
}
.featuredLists li{
position: relative;
margin-left : 0px;
margin-right: 0px;
}
.featuredTitle a{
background-color: #FFF;
color: #000f2e;
padding: 5px;
padding-left: 0px;
padding-top: 0px;
margin-left: 0px;
text-transform: uppercase;
font: bold 14px/17px Helvetica, sans-serif;
text-decoration:none;
}
.featuredImage {
position: absolute;
top: 20px;
left: 0px;
}
.featuredExcerpt {
position: relative;
padding: 0px 0px 0px 65px;
color: #666;
line-height: 1.5;
margin-top: -20px;
}
.morePosts {
padding-top: 20px;
}
.recentPosts {
font: 13px/1.4 Georgia, serif;
color: #666;
padding-top: 10px;
padding-right: 3px;
padding-bottom: 10px;
padding-left: 3px;
background-color: #FFFFFF;
width: 160px;
float: left;
text-align: left;
margin-left: 5px;
margin-right: 5px;
margin-top: -10px;
}
.recentTitle a{
background-color: #FFF;
color: #000f2e;
padding: 0px;
padding-left: 0px;
padding-top: 0px;
margin-left: 0px;
text-transform: uppercase;
font: bold 12px/17px Helvetica, sans-serif;
text-decoration:none;
}
How do i make a plugin that allows the user to add a logo to any theme the want