Category Archives: Tutorial

Thesis 1.8 and WordPress Menus – Awesome Together

UPDATE April 21, 2011 – This post has corrected code samples I promised for last night’s attendees of Bay Area Foothills WordPress Meetup. It turned out to be very simple to move the WordPress menu into either Sidebar 1 or Sidebar 2 in the custom_functions.php in the Thesis Theme – examples are posted below. Let me know if you see any issues and thanks for coming out last night! :)

 

Thesis 1.8 and word press menus awesome together
View more presentations from annzerega

And the code examples from the presentation:

To move your menu below the header image place this code in your custom_functions.php file:

remove_action('thesis_hook_before_header', 'thesis_nav_menu');add_action('thesis_hook_after_header', 'thesis_nav_menu');

To move your menu to sidebar 1 place this code in your custom_functions.php file:

remove_action('thesis_hook_before_header','thesis_nav_menu'); add_action('thesis_hook_before_sidebar_1','thesis_nav_menu'); 


AND – update your custom.css with this statement:
.custom .menu li { float: none; }

To move your menu to sidebar 2 place this code in your custom_functions.php file:

remove_action('thesis_hook_before_header','thesis_nav_menu'); add_action('thesis_hook_before_sidebar_2','thesis_nav_menu'); 


AND – update your custom.css with this statement:
.custom .menu li { float: none; }
Share

CSS Padding Shorthand (T-R-o-u-B-L-e)

My background in biology  and using mnemonic devices comes in handy for many reasons, but I never thought it would come in handy for remembering CSS padding shorthand.

Usually if I forget a CSS property, it is a simple matter to look it up. However if you're on deadline - it's better to have it in your head. So as I was reciting aloud "Top" "Right" "Bottom" "Left"  to engrain the shorthand in my brain, I realized that "TRouBLe" was a great mnemonic device for CSS padding shorthand.

The downside (or upside?) is that you may find yourself humming Travis Tritt's cover of "T-R-O-U-B-LE" while working on your CSS.

Here's an example of the CSS code I used below to style the search box in the top nav of my site.

The line that reads: padding: 8px 8px 10px 8px; Shows the padding values for the Search box (Top, Right, Bottom, Left). In the case below, I needed to add an IE conditional statement to manage the search box appearance in IE8.

 /*style search box in nav bar */
 li#search {
 padding: 8px 8px 10px 8px;/*safari firefox padding*/
 [if IE 8] padding: 8px 8px 8px 8px;/*IE padding*/
 float:left;
 width:110px;
 /*background image sprite*/
 background: url('images/search_container.png')
 repeat-x;
 }
Share

Update – Use CSS for Robust Headers in Thesis

Screenshot of Page without a gradient fill background

Screenshot of Page without a gradient fill background

This is an update to my original tutorial Use CSS for Robust Headers in Thesis originally published in July 2009.

In that tutorial, I made the case for using a repeating background image to “flex” with changes in page width.  This will also help avoid strange header image “overhangs” when a reader increases font size in a Safari browser using Thesis and WordPress.

Using this original custom header CSS code on my blog caused a distinct grey band to appear over my repeating mountain image (see image above). This was much more apparent on laptop and lower resolution screens than my usual monitor, so it was time to address this issue.

“Old” CSS

/* custom header with rounded corners*/
 .custom #header{
 background-color: #c1c1c1;
 height: 150px;
 padding: 40px 0px 0px 0px;
 /*IE hack to fill in gap in box*/
 border-bottom: 1px #cccccc solid;
 /*rounded corners for Firefox and Safari Browsers*/
 -moz-border-radius-topright: 20px;
 -moz-border-radius-topleft: 20px;
 -webkit-border-top-right-radius: 20px;
 -webkit-border-top-left-radius: 20px;
 }
 
/*  header logo*/
 
.custom #logo  {
 display: block;
 padding: 0px 50px 0px 0px;
 text-indent:150px;
 position:absolute;
 height: 100px;
 background: url('images/logo2_web_wp.png')
 center left no-repeat;
 }
 
/*header repeating image*/
 
.custom #header #tagline	{
 display: block;
 height: 100px;
 background: url('images/logo_web_wp.png')
 repeat-x;
 outline: none;
 background-color: #cccccc;
 }

Continue reading →

Share

Creating Beautiful WordPress Sites Using the Thesis Theme and Custom CSS

I was thrilled to be invited to speak at the East Bay WordPress Meetup at Tech Liminal in Oakland, CA on March 28, 2010. Anca Mosoiu and Sallie Goetsch (rhymes with 'sketch') organized a flawless meeting that included Meetup members showing off their favorite themes.

Here's a slidecast of the meeting - enjoy!

Creating Beautiful WordPress Sites



View more presentations from East Bay WordPress Meetup.
Share