Tag Archives: css

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;
}
Advertisements

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;
}

Hierarchical Menu

Problems

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!