Anatomy of a Magazine Style Premium WordPress Theme – Part 3.1 “Navigation – Second Level Menu”
- Share Your Thoughts ↓
- 02.11.2008 - 7:22 pm
Welcome back! Have you subscribed to my RSS feed? If not, please consider doing so. Thanks for again for visiting!
Next, we open our demo theme’s style.css file and look for classes that define the main menu and copy it. In our case it was .wrap and .menu and liked like below:
topbar .wrap {
background: #790000;
height: 51px;
width: 958px
}
and
.menu {
background: #F7F7F6;
height: 34px;
line-height: 34px;
border-left: 1px solid #D6D6D6;
border-right: 1px solid #D6D6D6;
border-bottom: 1px solid #D6D6D6;
padding: 0;
margin: 0;
}
.menu a {
color : #74797E;
background : inherit;
text-decoration : none;
padding: 0 10px 0 10px;
line-height : 23px;
}
.menu a:hover, .menu .current {
color : #000;
background : inherit;
height : 23px;
text-decoration: underline
}
.menu ul {
list-style : none;
padding : 0;
margin : 0;
}
.menu li {
float : left;
margin : 0 0 0 0px;
display: inline;
}
Paste this style information just below the above code within the style.css and replace .wrap with .subwrap and .menu with .submenu.
13 Responses to “Anatomy of a Magazine Style Premium WordPress Theme – Part 3.1 “Navigation – Second Level Menu””
Trackbacks
- Anatomy of a Magazine Style Premium WordPress Theme - Part 3.2 “Conditional Navigation Menus” // Headsetoptions.org
- When To Use Magazine-Style Themes For Blogs? | [w3b]ndesign
- Anatomy of a Magazine Style Premium WordPress Theme - Part 3.2 “Conditional Navigation Menus” » WP Pro - Web Design, Development & Pro WordPress Hosting for Serious Bloggers
Leave a Response
Some Useful Info
Use SimpleCode while including codes.
The links from all comments have the no-follow tag to prevent spammers from gaming their way up into SERP. So please keep the comments clean, try not to use keywords as "Names" or post unnecessary links in the comments. Thank you for cooperating.
About
WP Pro was conceived and developed with one goal in mind, “To bring our experience and expertise gathered over the years to one convenient location on the web to serve the needs of bloggers and webmasters“. -Sunny
To learn more about who we are and what we can do for you, read on...
-
Archives
-
Categories
Popular Tags
Blog Design Cockney Consulting CSS Google Grid Habari Project Hosting HTML Internet JavaScript Magazine Style WordPress Themes PHP Plugin Reboot Search Engine Optimization SEO Site Validation Spam Support Tag Technology Toolbox Troubleshoot Tutorials Web Web 2.0 Web Design Web Development Web Hosting Web Sites Widget WordPress WP XHTMLBookmarks
Awesome! I’ve never really been that technically-oriented, but you’re breaking down how these themes are made makes it so much easier to digest, thanks so much!
@ CleverSage
Thank you. I am glad I could be of some use
Is it easy to customize the header on this theme w/ an image? I love it, but would like to plug in a logo instead of the text. Great work!
Also – I notice that the posts are short and then say “Read More.” Does it only display a certain number of characters and then readers will need to click? Is that an option that can be turned off so that the entire post can be displayed?
I love how you provide some code and explain the variations.
For instance, the navigation in the header and the template ttag and code your provided.
I have seen pirated copies of the revolution theme going around somewhere. It was not you who designed it, was it?
@ seo
That is below the belt, just because I can do something does not mean I will rip someone off. You must be either kidding or stupid, you pick
@ seo
Revolution is by Brian Gardner, I am sure he is aware of the rips, it happens to all designers and I have my share of it on almost a weekly basis when I find someone is using my theme with their credits and worse hard coded adware.
Oh no, you misunderstood me. I was just warning you someone is stealing your templates just in case you were the original designer of that theme. I was not accusing you of doing this
brilliant. So simple and easy, and explained well. So, I expect the conditional explanation involves how to target related pages? Looking forward to more.