Category Archives: CSS

Stylesheet changes

Single Digit Numbering in List

When creating an ordered list recently with more than 10 items, the numbers looked like they reset at 0 and only had one digit. I knew that the list was being generated correctly with 2 digits because the visual view in the post editor showed the proper numbers. It just wasn’t showing up in the actual post itself.

Using Chrome’s Developer tools, it looked like the margins for the ol element weren’t wide enough. This was set by the CSS in the parent theme. I added an entry to the child theme’s style.css to override the margin and increase the left margin to 2 em. Refreshed the page and the numbers came up correctly!

ol {
        margin: 0 0 18px 2em;

Menu Behind Youtube Video

After embedding a Youtube video on the front page, I noticed that the drop down menus were appearing behind the video, making some pages inaccessible from the menus. Not good.

Some poking around Google led to

I found that only step 3 (setting wmode=”transparent” in the embed tag) is necessary. To get that version of the embed code, it is necessary to select the “Use old embed code” checkbox in Youtube’s embed settings. However, this means that only Flash playback is supported.

Prior to this, I also tried wrapping the embed code in a <div> and using the z-index CSS setting. That didn’t work at all. Perhaps there’s another solution that will work with the iframe embed method so HTML5 video can also be supported.

Adding Announcements

As the new year came round, a requirement to post announcements on the home page of the site came up. I figured that the easiest way to do this is to edit the page content directly. Using the built in HTML editor, I put the text in an ‘announcements’ div.

<div id='announcements'>
Announcement text here</div>

A simple addition to the theme’s stylesheet ensured that the text would look different and stand out.

#announcements {
	background-color: #21759B;
	color: #FFFFFF;
	clear: both;
	padding: 6px 12px 6px 12px;
	-moz-border-radius: 12px;
	-khtml-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
	margin-bottom: 20px;

Of course, this only looks nice if the announcements area isn’t too long. Future work may include adding ‘Announcements’ as a custom post type so other people can make the changes easily. With more announcements, it may also be necessary to use a ticker style, showing only one at a time and allowing the user to scroll through the list.

Quarterly Programme Page

The weekly programme for the site I’m working on is released every quarter as a Microsoft Word file with a table. The challenge is how to keep it updated with a minimum of fuss. I considered various approaches like manually typing it out into a table, or even creating a gigantic admin page of metaboxes for each of the weeks in a quarter.

The problem with the metaboxes approach is that the number of weeks in each quarter is not constant. Some months will have five weeks, or there may be special services which require more entries.

Being lazy, I decided to try just selecting the data and copying it into the editor window of a page to see what happens. It didn’t quite work out when using Google Docs as all the formatting was lost, but saving the document first then using the paste from Word feature in the Visual Editor worked fine.

There were some extra newlines and paragraphs, probably due to extra whitespace in the original document, but it was not too tedious to remove these manually.

With the content in the right place, it was time to make it look nice. The default padding for table data in the Twenty Ten theme was way too much, making some of the cells too fat, and the borders were faint gray lines which can’t be seen.This was easily fixed by adding the following CSS code to the theme stylesheet.

#content tr td {
    padding: 6px 12px;
    border: 1px solid #000000;

Hiding the Editor

The usual post editor can be hidden after all! Without removing support for it when registering the post type.

Add the following code to the constructor for the meta box class described in previous posts on creating custom meta boxes.

//hide editor if adding a new post of sermon type
		if( isset( $_GET['post_type'] ) && 'sermon' == $_GET['post_type'] ) {
			add_action( 'admin_head', array( &$this, 'hide_editor' ) );

Add this as a function in the class.

	function hide_editor() {
				#editor-toolbar { display: none; }
				#editorcontainer {display: none; }
				#quicktags {display:none;}
				#post-status-info {display:none;}

The code for hiding the editor was taken from

Hierarchical Menu


After using the menu editor in the admin interface to modify the menu structure, an ugly problem showed up. I had created a subpage, but the drop down menu wasn’t showing. Instead, a scroll bar appeared in the header when I moved my mouse over the menu item, and unless I put focus on the header first so I could scroll down with the arrow keys later, I couldn’t see the menu item at all. Also, the colour was all wrong. The sub-item showed up with a dark gray background colour and black text, not exactly the most readable combination.

Fix the Scrollbars

Scrollbars appear when the overflow property in CSS is set to auto. I found the offending line in #header and removed it. However, the header’s colour no longer filled the header section. It didn’t have enough height. The wrapper <div> container was not expanding to include the heights of the elements.

To solve this, I simply added height: 144px to #branding. The value of 144px came from adding the height values of the contained <div> blocks. The header colour now expands to fill the header section, just like it had before.

Fix the Colours

Examining the elements in Google Chrome revealed that the colours for nested menus are controlled by a few CSS selectors. Note that these are for the twenty ten theme, different themes might use different CSS selectors.

For the current item the mouse is over, the selector is #menu-main .menu-item a:hover

For the unselected parent, the selector is #access li:hover > a, #access ul ul :hover > a

For the child item, the selector is #access ul ul a

Modify the background-color property in these selectors and that’s it!

Call to Action Button

I wanted to add a prominent call to action button on the home page sidebar. I also didn’t want to use a graphical button because those won’t change size if the user changes the text size in the browser. Having noticed that the WordPress site does this, I decided to just do what they did.

The button is actually a thin png graphic file with a gradient. It’s a slice just 5 pixels wide. The key is to set it as the background image and let it repeat. The rounded corners were done by setting border radius CSS settings.

The button was added by appending the HTML to the home sidebar page.

<div id="location-container">
    <a class="location-button" href="site/location">Worship with us!</a>

The next thing to do was to add the CSS code necessary to style the button and get it to behave properly on hover. This code was basically taken from the WordPress site.

#location-container {	margin-top: 20px;
margin-bottom: 10px;	
text-align: center;}

a.location-button {font-size: 14px;	
font-weight: bold;	
background: #21759B url('images/button-grad.png') repeat-x scroll left top;	
color: white;	
padding: 6px 12px 6px 12px;	
-moz-border-radius: 12px;	
-khtml-border-radius: 12px;	
-webkit-border-radius: 12px;	
border-radius: 12px;	
text-shadow: rgba(0,0,0,0.3) 0 -1px 0;}

a.location-button:hover {border-color: #13455B;	
color: #EAF2FA;	
text-decoration: none;}

Ubuntu font

I find the new Ubuntu font very readable and will be using it for the main text of the site. The font is located at the Google Font Directory with instructions on how to include it on websites.

I added the following function to functions.php and hooked it to wp_head.

function ubuntu_font() {?>    <link href=',italic,bold' rel='stylesheet' type='text/css'>
add_action('wp_head', 'ubuntu_font');

To use the font, just specify ‘Ubuntu’ as the font-family in CSS.

font-family: 'Ubuntu', serif;

Make Search Pretty

To move the search box to the right, use the float property in CSS to get it there.

#search { display: block; float: right; }

The search button was taking up too much space on the header. To get rid of it, use CSS to target input elements with type=submit in the cse-search-box div.

#cse-search-box input[type="submit"] {display: none;}

The search results were also overflowing the content area and going into the sidebar. This was fixed by specifying a width for the search results.

#cse-search-results iframe { width: 640px; }

All this CSS puts the search box on the right side of the header with no search button, and the results now fit into the main content area.