Tag Archives: CSS

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

Adding a Google AJAX SlideShow to Your WordPress Site

Inserting a customizable  slide show on your WordPress site  can be done without a plugin using the following tools:

Step One:

Step Two:

  • Create a Picasa web album with some sample photos. (Note – feeds from Flickr or Photobucket may be used, but I have not personally tested them. Consult the documentation for guidance on Flickr or Photobucket. )
  • When your album is posted, click on the “RSS” icon to get the feed url for your slideshow (see screenshot)


Web Album with RSS button Circled in Red

Web Album with RSS button Circled in Red









Step Three:

  • Cut and paste the code below into a text editor such as TextEdit or Notepad
  • Insert your feed url between the quotes in line that begins:  var samples =
  • Save your text file

Step Four:

  • Add a text widget to your blog sidebar
  • Insert your Slideshow code
  • Leave the “Automatically add paragraphs” box unchecked
  • Save and review your slide show
  • Customize the inline CSS for display size and background color.

Web albums and the resulting slides shows can be updated directly by clients, which saves time for both the client and designer/developer.

Here is the code for the Google AJAX Feed API displaying my web album in a sidebar text widget:

<script src="http://www.google.com/jsapi" type="text/javascript"><!--mce:0--></script>
<script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js" type="text/javascript"><!--mce:1--></script>
 
<!--  Inline CSS style for slide show window -->
 
<code>    .gss a img {border : none;}
    .gss {
	  width: 300px;
	  height: 225px;
          color: #dddddd;
          background-color: #8aa0cb;
	  padding: 5px;
    }</code>
 
<!--Script for displaying the slide show and scaling web album images -->
 
<script type="text/javascript"><!--mce:2--></script>
 
<!--container for slide show -->
<div id="slideshow" class="gss">Loading...</div>
Share

Use CSS for Robust Headers in Thesis

NOTE: The CSS for  this tutorial has been updated in the April 7, 2010 post Update – Use CSS for Robust Headers in Thesis.

While I was crafting my header for this site, I noticed my fixed width header looked perfect in Safari, but truncated in IE 8  and Firefox.

“Alright” I mused, “Let’s see what happens if I repeat the image on the x-axis”.  Luckily my background image could be easily repeated with a few minor tweaks and rendered correctly in IE 8 and Firefox.

I love simple designs, but thought the header was looking stark, so I hit the Thesis support forums for inspiration. I found some great examples and added a second image to my header leaving the site title in place. The result is displayed in header of this page.  :)

An additional benefit of repeating the image on the x-axis was that no changes were necessary when I change my layout from two to three columns.

Here are the screenshots of the browser “issues” and the CSS code I used to create a robust header with two images. Please comment if you have any questions, I look forward to hearing how this works for other people.

Update: December 6, 2009

BEFORE you implement the CSS code below be sure you have the “Show site name in header” and “Show site tagline in header” options checked under Thesis Options > Display Options > Header.

Screenshot Thesis Theme Options for Headers

CSS

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

<p><br class="spacer_" /></p>

<p><br class="spacer_" /></p>

<p>/*header repeating image*/</p>


.custom #header #tagline {<br />
display: block;<br />
height: 100px;<br />
background: url('images/logo_web_wp.png')<br />
repeat-x;<br />
outline: none;<br />
background-color: #cccccc;<br />
}

Screenshots

Fixed Width Header Image in Safari.


Safari Fixed Width Background Image

Safari Fixed Width Background Image









Fixed Width Header Image Truncated in FireFox and IE 8:


Fixed width image Firefox

Fixed width image Firefox










Fixed Width Logo IE

Fixed Width Logo IE









Repeating Header Image in FireFox and IE 8:


FireFox Repeating Banner Image

FireFox Repeating Banner Image











IE 8 Repeating Banner Image

IE 8 Repeating Banner Image






Share