WordPress News Theme 7

Wordpress News Theme 7In 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;

}

One Response to “WordPress News Theme 7”

  1. mark funk says:

    How do i make a plugin that allows the user to add a logo to any theme the want

Leave a Reply

Your email address will not be published.

Google+