BuyNowShop » CSS

Desk Mess Mirrored 1.9

Edward Caissie — Sat, 16 Jul 2011 16:41:52 +0000

This version of Desk Mess Mirrored should correct the issues found in previous versions with the use of Custom Menus. All of the changes and modifications that were introduced in version 1.8.7 are also included. If you use the Child-Theme Multi, please update to its current version 1.9 as well. The changes made in Desk Mess Mirrored version 1.9 have a direct impact on Multi’s functionality.

Edit: Please insure you are using the current version of Multi (2452), version 1.9. EAC

Add Custom CSS to Atahualpa

Edward Caissie — Wed, 14 Oct 2009 19:37:27 +0000

This has come up quite often on the WordPress.org Support forums lately and instead of searching through old posts there I am writing this post to make it a bit easier to find here.

For the WordPress Atahualpa theme (version 3.4.4 as of this writing), follow these steps to add your custom CSS if there is no option to use in its place.

Go to the theme options page

Near the bottom click on “Add HTML/CSS inserts”

Go to the bottom of that option page for “CSS Inserts”

Add: css-element { property: value; }

Click on the HUGE Save Changes button

Just replace css-element { property: value; } with the styling you want to add.

Hide a Category

Edward Caissie — Sat, 12 Sep 2009 15:02:14 +0000

From the WordPress.org Support forums:

I need to prevent my default category from appearing in the list of category links. Is there a way to hide the default category title, but still display all posts when the user clicks the “blog” (show all) tab?
biodrama

You can use a little CSS added to the end of your style.css file to stop a category title from appearing in the list, in your example, the “Uncategorized” default category can be made to not show up with:

.cat-item-1 {display:none;}

If you want to use a different default category, finds its ID and replace the ’1′ above accordingly.

Hide a Menu Page

Edward Caissie — Fri, 17 Jul 2009 23:59:46 +0000

How do you hide a menu page from the top of your blog?

There are a few different methods that you can use to hide a menu page. I will show you three different methods in this post, two using simple CSS and the third using a parameter in the wp_list_pages(); or the wp_page_menu(); functions. This example will work best if you are viewing this blog using the Custom child theme of the Desk Mess Mirrored theme as its CSS has been modified specifically for this post. (Switch to the Custom child theme of Desk Mess Mirrored).

You may have noticed there is a gaping space between the “Design” (or “Contact Us”) page and the “Themes” page … why? you ask. Well, because I wanted that space there. The gaping space is actually the home of the “Hide Me” page, good reading as well, especially if you cannot see it.

OK, let’s get to this. You can easily “hide” a page by using the exclude parameter in the wp_list_pages(); or the wp_page_menu(); functions. The code would look very similar to this:

I’m using the number 220 as it is the actual page ID of the “Hide Me” page. If you are using this method, (after reading the Hide Me page for reminders) use the ID of the page you want to hide. The wp_page_menu() function is described well in the comments here at Digging into WordPress (if you want to read more comparing it to wp_list_pages). I consider this to be only one method as wp_page_menu(); calls wp_list_pages(); to generate its output.

The other two methods are strictly CSS. I noted above the post ID for my “Hide Me” page is 220. Both wp_list_pages(); and wp_page_menu(); generate default class tags for each item in the menu. The class to style in this case is the page-item-, and specifically in this case I am styling the class page-item-220.

The first of the CSS methods behaves very similar to the exclude parameter used above. The CSS to add to your style.css sheet would be something along this line, and the page will behave as though it does not exist, or as in the functions, excluded from the menu:

.page-item-220 { display: none; }

The second method is the one I am using in the Custom child theme on this blog (the “Hide Me” page will show when using the other themes):

.page-item-220 { visibility: hidden; }

This simply makes the item invisible, but it still “holds” a place in the layout and gives me the effect I wanted … and maybe the effect you are looking for.
(NB: I specify the page “order” for each page; you may need to as well to create similar effects.)

CSS Tip: FireFox Z-Index Value

Edward Caissie — Sun, 24 May 2009 01:35:00 +0000

A quick CSS tip, the value for z-index elements in CSS must be positive for FireFox (and apparently Chrome and Apple’s Safari) to be correctly rendered.

Here is a link to a well regarded standards page for the element z-index, http://www.w3schools.com/css/pr_pos_z-index.asp, unfortunately it appears the developers of FireFox (version 3 as of this writing) are not exactly following the indicated example value.

How do I know this? You really have to wonder when Microsoft’s Internet Explorer works and the other three browsers do not. Something has got to be wrong, and so my searches brought me to the conclusion of setting my z-index values to positive values where needed. Internet Explorer can accept and resolve correctly with negative values. It’s not often a Microsoft negative is a positive result.

Have you stumbled on, across, over or just simply ran into one of these CSS walls? What was it, and how did you fix it?

Add Custom CSS to Atahualpa