E.Share » CSS Tips

How To Make A Bio Dropdown Box With CSS

Leland — Mon, 25 Jul 2011 20:36:41 +0000

After I released the most recent Theme Lab redesign, I had a number of comments on the “bio dropdown” box I have up in my navigation bar. I coded it with just a few lines of CSS along with a background image.

In this CSS tip post, I’ll go over how you can have a similar hover effect on your own sites.

The Example

In this example, I’ll be using a text widget in the Twenty Eleven theme, the new default as of WordPress 3.2.

Basically, once you hover over the div that contains the widget, a “hidden” div will appear which will be our bio dropdown box.

Note in the picture to the left, the gray bio box will not appear unless you hover the div containing the “Bio Hover” heading.

The Selector

It’s not that important to have a unique CSS selector to style the div you want to put your bio dropdown box in. Basically this is because if you don’t have the accompanying markup in that div, nothing would show up anyway in the event of a hover state.

Although in the case of Twenty Eleven, we could get away with just styling the “aside” class, chances are you only want a bio dropdown box on one of your divs anyway, so we’ll get more specific.

Luckily with WordPress, it spits out a ton of unique CSS selectors you can use. In this example, it spits out #test-3 which we’ll use from now on.

Note: This may vary depending on your WordPress installation. Use something like Chrome Developer Tools to easily find the selector.

HTML Markup

In this example, the HTML markup can be placed directly into the WordPress text widget. This is what you’d put in:



Hello. I am Leland Fiegel and I am the creator and founder of Theme Lab. I love to write code, especially HTML, CSS and for WordPress.

Unless you want to steal my identity, you’ll probably want to replace the photo with a picture of yourself. You can also optionally remove it.

Since we’re using a WordPress widget, the outlying markup is already generated for us. This is what it is in total.


Bio Hover

Hello. I am Leland Fiegel and I am the creator and founder of Theme Lab. I love to write code, especially HTML, CSS and for WordPress.

If you’re doing this on a raw HTML site, you’ll need some sort of wrapper (like this one is the aside) for the bio dropdown with something else in it, otherwise there’s nothing to hover over to drop down.

Real-life example: My bio dropdown div is inside an li tag in my navigation menu.

First Two Lines of CSS

The first two lines really set up the rest of it, so I put this in its own section.

#text-3 { position: relative; }
.bio-dropdown { display: none; }

Explanation

First line: We set the wrapper of the bio dropdown to have relative positioning. This makes it easier to absolutely position the bio dropdown box closer to the original wrapper.
Second line: This essentially makes the bio dropdown box invisible by default. It’s only supposed to show up when you hover over something, remember?

Note: If you’re not a fan of display: none; or think it hurts your SEO or something, you can also use something along the lines of position: absolute; left: -100000em; which will basically move it so far off the page, noone would ever see it anyway.

The Rest of the CSS

The following CSS code handles the look and feel of the bio dropdown box.

#text-3:hover .bio-dropdown {
display: block; z-index: 99;
position: absolute; top: 25px;
background: #ccc; padding: 10px 10px 0 10px;
font-size: 11px; line-height: 18px; color: #666;
}

Explanation

This is where we finally use the #text-3 selector along with the :hover pseudoclass to make the bio dropdown box show up only when you hover over the text widget.

First line: The display: block; makes the bio dropdown box visible. The z-index: 99; ensures that the box will be displayed over everything else, unobstructed.
Second line: This positions the box below the aside about 25 pixels.
Third line: These are just some cosmetic styles, setting the background to a light gray with decent padding.
Fourth line: This is all self-explanatory typography.

Note: About the first line, if you’re using the position: absolute; left: -100000em; technique instead of display: none; like I explained above, using display: block here wouldn’t be necessary (since divs are already assumed to be block level elements anyway). Instead you’d have to use left: 0; to move the div back onto the page.

And for the image, just a simple float and right margin.

.bio-dropdown .photo { float: left; margin-right: 10px; }

WordPress Integration

I can’t think of a good way to integrate this into a dynamic WordPress menu (wp_nav_menu) without filtering the crap out of something. The easiest way may be to hard code your navigation and get over it (which I do on all of my sites).

If you have any techniques on how to insert markup into a WordPress menu item, which is required for this, I’d love to hear about it in the comments. I’m sure it’s possible but it goes beyond the scope of this CSS tip post.

Conclusion

Yes, I realize you probably wouldn’t want to put a bio dropdown in your sidebar, you’d put it in a place with limited space that doesn’t have room for it to be fully displayed (like a cramped navigation bar).

Fortunately, you can use this teqhnique just about anywhere. I just wanted to go over a basic technique on how to display a whole div on hover.

It’s not too complicated and you don’t need any fancy Javascript stuff to do it, although if you wanted some high-tech fading effect, you’d probably have to use some Javascript.

Make A Custom Twitter Widget Without A Plugin

Leland — Tue, 18 May 2010 16:21:29 +0000

I’ve been asked a few times about which WordPress plugin I use to generate the “Twitter Feed” list in the footer of my site. I actually don’t use a plugin at all, it’s a snippet of Javascript from Twitter that displays a list of my recent tweets that I styled with CSS. In this tutorial, I’ll show you:

The necessary HTML and Javascript code to pull the latest tweets
An overview of the HTML markup and associated CSS selectors
Two examples of custom-styled Twitter widgets I’ve used myself

Read on to see the rest of the tutorial…

The HTML and Javascript

Twitter used to provide this code on their site but for some reason they removed it in favor of these much less flexible widgets. You’ll need two pieces of code.

First, place the following code where you want the list to show up:

Twitter feed loading

Note: The

Twitter feed loading

is not a part of the original code Twitter provided, but it’s required to make the HTML validate. It can also provide a useful message while the feed is loading, as it could take a few seconds on a slow day.

Second, you’ll need to place the following lines of Javascript as close to the tag as possible.

I currently have it right above my Google Analytics code. You should keep these lines of Javascript as low as possible on the page because in the event that Twitter doesn’t load, everything below that code will hang (which isn’t a big deal if it’s already at the bottom).

Overview of HTML Markup and CSS Selectors

Now you can’t see the HTML markup the Twitter widget generates without using something like Web Developer Toolbar. Lucky for you, I’ve done it for you. Here’s a sample list with just one tweet as an example.


RT @Screenr: Cool Screenr update: Now your screencasts publish twice as fast. http://screenr.com/aDp 46 minutes ago

#twitter_update_list – Selects the entire list
#twitter_update_list li – Select individual list items
#twitter_update_list li span – Selects the “tweet” part of the list item, not the time ago link
#twitter_update_list li span a – Selects the link within the “tweet” part of the list item
#twitter_update_list a[style="font-size: 85%;"] – Selects the “time ago” link, in a somewhat hacky way (see note below).

Note: Since there is an inline style in the time ago link which sets the font size at 85%, it makes it somewhat difficult to override without a hacky piece of code. I’ve used this before to reset the font size to the same as the rest of the list:

#twitter_update_list a[style="font-size: 85%;"] { font-size: 1em !important; }

That probably doesn’t work in early versions IE because of the “!important” part. You can also use display: block; to move that link to the next line.

Live Example

For a live example, check out the footer of Theme Lab. Or if you’re reading this in your feed reader or an unauthorized scraper site, check out the screenshot below.

Here’s the code I use for the list:

#twitter_update_list {
	font-size: 13px;
	line-height: 21px;
	list-style: none;
	}
#twitter_update_list li {
	background: url('images/twitter-divider.gif') bottom left repeat-x;
	padding-bottom: 7px;
	margin-bottom: 9px;
	}
#twitter_update_list span, #twitter_update_list span a {
	color: #ababab;
	text-decoration: none;
	}
#twitter_update_list a {
	color: #6f7276;
	}

The first line selects the entire list. It sets the font size, line height, and makes sure no bullet points show up.
The second line makes a small 2×1 image repeat below each list item as a sort of divider. The padding sets the space between the tweet and the top edge of the divider. The margin sets the space between the bottom edge of the divider and the next tweet.
The third line sets the color of the tweet, including links, and makes sure no lines show up below links.
The last line sets the color of the “time ago” link.

And that’s it! If I had to change one thing, I’d differentiate the the in-tweet links somehow, and maybe add hover effects on links as well.

This Can Be Used On Any Site

Unlike all the other how to do XYZ without a plugin posts out there, there is no actual WordPress code used in this tutorial.

Since this uses no WordPress code, it’s not filed under the WordPress Tutorials collection. It can be used on pretty much any kind of site, assuming you can edit HTML source and CSS.

If you want to use it within WordPress, I would suggest manually editing your theme files to insert the two lines of Javascript in the footer of your site, or even hooking it into your wp_footer() hook.

As for the widget itself, you can either paste the code inside a text widget or manually code it into your sidebar (or wherever).

Conclusion

Hope you all liked the tutorial, I’d love to hear your thoughts in the comments. If you have any requests for quick WordPress or CSS tips, feel free to let me know. It may be featured in a future Tutorial Tuesday post at Theme Lab!

Guide to Styling the WP-PageNavi WordPress Plugin

Leland — Tue, 04 May 2010 12:07:42 +0000

If you’re not familiar with the WP-PageNavi WordPress plugin, it allows you to replace normal previous/next navigation with a more advanced, numbered paging navigation. This is a feature I’ve included on a number themes I’ve developed, including RS16, Blogwave, RS17, and Bright Spot.

In this tutorial, I’m going to go over how to:

Install WP-PageNavi and properly integrate it in your theme.
Two methods to disable and/or override default plugin styles.
An overview of the HTML markup output by WP-PageNavi
Finally, how to alter the look of your page navigation through CSS

Install the Plugin

You have two options when it comes to installing the WP-PageNavi plugin.

Download it from WordPress.org, upload it to your /wp-content/plugins/ directory, and activate (aka, the old fashioned way).
Depending on your host, you can also automatically install plugins by searching them in “Add New” page under Plugins in your WordPress admin panel. Just search for “pagenavi” and you should find it.

Okay, that should’ve been pretty easy. Now it’s time to get your hands a little dirty in code for the integration part.

Theme Integration

In our theme integration, we never want any errors to be displayed if the WP-PageNavi isn’t active. Instead, we’ll make sure it falls back on the old previous/next-style navigation. To do this, we’ll use a function_exists conditional check.

Let’s say this is your normal previous/next WordPress navigation code:

We will change it to the following:

This basically checks to see if WP-PageNavi is active and if it is, it displays the new page navigation code. If not, it gracefully falls back to the normal previous/next navigation.

Please Note: Depending on how your CSS is coded, you may want to put the wp_pagenavi(); part inside the “navigation” (or equivalent) div. Keep in mind WP-PageNavi spits out a new class called “wp-pagenavi” though which we can use to style separately.

Override Plugin Styles

By default, WP-PageNavi automatically inserts a CSS file called pagenavi-css.css from its plugin directory into the header of your site. We don’t want these default styles to interfere with our own cool custom-made styles, so we’ll completely get rid of them, and there are two simple ways to do just that.

Add a CSS file to your theme directory – This is probably the easiest way to override the default WP-PageNavi styles. If you have a file called pagenavi-css.css in your theme directory, WP-PageNavi will use this instead of the default one in the plugin directory.
Add a snippet to your functions.php file – The following code snippet I picked up from WP Recipes will completely disable the above behavior and not include any stylesheet from the plugin (either the default one or an override in your theme directory).

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );

function my_deregister_styles() {
	wp_deregister_style( 'wp-pagenavi' );
}

Just plop that code in your theme’s functions.php file and add the CSS styles to your regular theme’s stylesheet (usually style.css).

Note: Make sure the code is surrounded by brackets like if your functions file is currently empty.

WP-PageNavi HTML Markup and CSS Selectors

Here’s what the WP-PageNavi markup looks like. In the following example, there are four pages, currently on page two.


	Previous1
	2
	3
	Next
	...
	Last »

We can use the following CSS selectors to target the above HTML markup:

.wp-pagenavi – Applies to the entire div, useful for CSS clears, padding/margin, font sizes and styles (bold, italic, etc.)
.wp-pagenavi a – Targets all links inside the page navigation, including page numbers and previous/next.
.wp-pagenavi a.page – Targets page numbers specifically
.wp-pagenavi a.first – Targets the “first” link specifically (not listed above)
.wp-pagenavi a.last – Targets the “last” link specifically
.wp-pagenavi span – Targets the current page number along with the extend part (the thing with three dots)
.wp-pagenavi span.current – Specifically targets the current page number
.wp-pagenavi span.extend – Specifically targets the extend (three dots thing)
.wp-pagenavi span.pages – Specifically targets page number display (i.e. Page 1 of 4)

Note: The previous and next links by default, have no CSS class on them. If you want them to completely differentiated from the page numbers and first/last links, those will need to reset any styles added to the .wp-pagenavi a selector. If that made no sense, take a look at the following (really simplified) example.

For example: Let’s say you wanted the the previous and next links to be bold, but every other link to have a normal weight. You would need to do the following:

.wp-pagenavi a { font-weight: bold; } /* Previous and Next links only */
.wp-pagenavi a.page,
.wp-pagenavi a.first,
.wp-pagenavi a.last { font-weight: normal; } /* Other links */

I combined page number links, the first link, and the last link into one rule for example purposes. Of course, you can separate them and add more specific styles to each one.

This would be much easier if there was a class added to previous/next links by default, but there’s not. It’s not a huge deal as you can just reset them anyway.

Important Update: Thanks to an update from scribu in the comments, it turns out the newest version of WP-PageNavi does have previous/next classes on them (thanks in part to Yoast).

You can use .wp-pagenavi a.previouspostslink and .wp-pagenavi a.nextpostslink to select previous and next links, respectively.

So pretty much everything above up until the unordered list of selectors isn’t relevant anymore, but I’ll keep it just because it could be a useful lesson in overriding CSS in some other situations. The below CSS example will still apply as I didn’t use those selectors anyway.

A CSS Example

Here’s an example of a PageNavi styling which I built off of the Blogwave theme.

Here’s the code I used to get this look, multi-single-line CSS is optional:

.wp-pagenavi a, .wp-pagenavi span {
	padding: 5px; margin-right: 10px;
	font-size: 15px; color: #03719c; text-decoration: none;
	border: 3px solid #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
	}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
	background: #03719c;
	color: #fff;
	border: 3px solid #AFAFAF;
	}
.wp-pagenavi span.current { font-weight: bold; }

And here’s what it all means:

First Rule
The .wp-pagenavi a, .wp-pagenavi span selects all anchor and span elements (pretty much everything) inside the .wp-pagenavi div.

The first line of the rule sets a padding of 5px so it won’t be crammed up against the light gray border (defined below). It also sets a consistent margin of 10px to the right of each element so there is equal spacing between each.
The second line sets a font size of 15px, makes the text color blue, and makes sure links have no underline.
The third line sets a solid 3px gray border on everything. The border-radius code makes the corners rounded.

Second Rule
The .wp-pagenavi a:hover, .wp-pagenavi span.current selects the link hover effect as well as the current page number, respectively.

The first line sets a dark blue background color.
The second line makes the text white.
The third line gives a slightly darker border.

Third Rule
This selects the current page number (again) without affecting the link hover effect as well (like the second rule). This just makes the current page number a bold font weight.

The reason I didn’t include it with the link hover effect is because it has an uneven effect going from normal to bold font weight.

Note: Depending on how your CSS is coded, you may have to use more specific selectors. For example, if there are styles for #content a and your WP-PageNavi is inside the content div, you may have to rewrite your PageNavi CSS as #content .wp-pagenavi a and override any other less-specific styles.

Conclusion

I know this was a relatively simple example, you could have a lot more advanced CSS rules to differentiate the various links and other elements even more. Hopefully you picked up a few CSS tips along the way too.

Optional WP-PageNavi integration is a pretty cool feature theme developers could integrate in their themes. With the integration method I outlined above, users could easily choose whether or not to use it, and it could be a nice option for a lot of blogs.

Hope you all liked the tutorial, and if you have any requests for future WordPress tutorials or CSS tips, let me know in the comments.

Seamless Image Rollovers Using CSS

Leland — Mon, 19 Apr 2010 20:12:36 +0000

Have you ever noticed how sometimes when you hover over an image, it goes blank for a second, and then it loads the hover image? When you roll back over though, everything is seamless.

Here’s an example of what I mean using my Underground ladder image (broken into two pieces).

This is because there are two separate images that need to be loaded, and the second one (on hover) takes extra time to load when the hover effect is triggered.

In this post, I’m going to show you how to eliminate that delay using a CSS technique that loads the entire image at once, and displaying a portion of it.

Combine the Image

The first step to getting this to work is combining both halves of the image into one. You can use your image editor of choice to do this, just copy both of the images, double the height, and paste the inactive one above the active one.

The image in the middle should be what you’re going for. Now we move onto the CSS.

The Code

The first step in the CSS is to limit the height of the image to half (basically so only the top ladder shows up).

For purposes of this tutorial, we’ll use a class called .rollover-tut. Since the original ladder image is 153×149, we’ll use this CSS code:

.rollover-tut {
height: 149px;
width: 153px;
display: block;
}

Since we’re making a link, we’ll use the following HTML code:

At this point, your link should look like the original ladder image, with no hover effect (yet).

To get the hover effect working, we’ll use a CSS property called background-position on the :hover pseudoclass.

.rollover-tut:hover {
background-position: 0 -149px;
}

With the above CSS code, you’re pretty much moving the background image up 149 pixels (remember, the height of one ladder image, or half of both combined).

An easier way to remember is to use the following hover code instead, which will have the same effect as the above, and you don’t have to remember any numbers (hat tip: Art Webb via the comments):

.rollover-tut:hover {
background-position: bottom left;
}

And here’s what you get:

Notice there’s no delay between the hover effect now, since the entire image is loaded at once.

Conclusion

This same technique can be used for pretty much any background image rollover effect. I’m not sure if any of you have checked out my personal blog design lately, but I make extensive use of it on pretty much every link using a background image (and the submit button on my comment form).

Hope you all enjoyed this CSS tip. If you have any ideas for future CSS tip posts, let me know in the comments.

How to Hide the WordPress Stats Smiley the Right Way

Highlight Author Comments in WordPress, The Easier Right Way

Leland — Tue, 02 Mar 2010 14:08:13 +0000

I just came across a post published today which goes over “the right way” to highlight author comments in WordPress. Basically, instead of the usual code that inserts the “admincomment” class for just the first user (user ID 1). In the post, that code is adapted for any post author, no matter what the user ID is, which can be especially useful to multi-author blogs.

Ever since WordPress 2.7 was released over a year ago, a new function was introduced to display comments called wp_list_comments which is known for supporting threaded comments as well. In addition to threaded commments, it also outputs a class automatically which can be used to style author comments in WordPress 2.7.

Screencast

In this screencast, I go over the various classes added to a comment made by a post author. I also go over how to style the .bypostauthor class.

Code Examples in Video:

.bypostauthor { background: #000; } /* Sets a black background on post author comments. */
.bypostauthor { background: #000 !important; } /* Overrides any other background colors. */
.commentlist .bypostauthor { background: #000; } /* Another way to override other background colors (depends on how your theme is coded) */

In case you’re wondering, I was using the Firebug Firefox extension to inspect the element as well as test out the CSS code. Definitely a must-have addon for coders.

Custom Callback?

If you’re using a custom callback in conjunction with wp_list_comments, all you need to do is make sure the comment_class function is present in your callback, which will generate the same classes on each comment.

For an example of this, check out ThemeShaper’s tutorial on creating a comments template, check out where is added, and copy it in the same place of your own custom callback (assuming it’s not already there).

Conclusion

If you’re using an outdated theme that does not use wp_list_comments, the code from the first link should be just fine. If you’re using wp_list_comments, this is a much better and easier solution to implement, as you probably won’t have to modify any PHP in your theme (unless of course you have a custom callback).

Anyway, hope you liked the CSS tip. Let me know what you think in the comments. Also, do you prefer screencasts plus text, or just text?

How to Hide the WordPress Stats Smiley the Right Way

Leland — Sat, 27 Feb 2010 14:35:36 +0000

For anyone who uses the WordPress.com stats plugin, you’ll notice it inserts a small smiley image in your footer. This image needs to be loaded to track the stats.

Some people might think this little smiley face is “cute”. The rest of you will find the smiley image unsightly (and possibly evil looking) and will look for ways to remove it. This post will go over:

First of all, what not to do when hiding the smiley
How to properly hide it, with some extra absolute position goodness for certain layouts
If you’d rather not hide it, how to easily center the smiley image

What Not to Do

Don’t ever use display:none to hide the WP Stats Smiley.

First of all, I want to go over the one thing you shouldn’t do when attempting to hide the WP Stats Smiley, and that’s use: display:none. Yeah, I said that twice, but I was just making sure you didn’t miss it.

Yeah, that’s the same code you can use to get a CSS Killswitch effect, but it’s definitely not something you want to be using to not display an image, which needs to be loaded to accurately display stats.

What to do instead

According to this post, the developer recommends to use the following code to your stylesheet (i.e. style.css) if you wish to hide the smiley:

img#wpstats{width:0px;height:0px;overflow:hidden}

Something similar to the above code would be the following:

img#wpstats{visibility:hidden}

The difference between visibility:hidden and display:none is visibility:hidden will still take up space in the design, while display:none will not (and remember, you can’t use display:none unless you want your stat tracking to be borked).

On certain layouts, there is a small problem with this code taking up space below the footer, so I’ve thought of a more creative solution.

Here’s an example of what I’m talking about, notice the smiley in the lower left corner which is causing the footer layout to break.

With the two above examples, the image, while not visible, would still take up space in the layout causing that light gray bar (which is the background color) to appear in the footer.

Absolute Positioning

A combination of absolute positioning plus the code above is a good way to eliminate this issue. You could try something like this:

img#wpstats{position:absolute;top:0;width:0px;height:0px;overflow:hidden}

Centering the Image

Depending on your layout, instead of hiding it, it may look somewhat better if the smiley image was centered. You can easily do this with the following snippet of code.

img#wpstats{display:block;margin: 0 auto}

Explanation:

Sets the image to display as block (instead of inline, by default).
Sets the left and right margins to automatic to effectively center the now block image.

You can use this CSS to properly center pretty much any “img” tag without using additional markup.

Conclusion

By the way, if you use the WP Stats Smiley Remover plugin, don’t. Because all it does it add the “display:none” CSS to your header. The exact thing you’re not supposed to do.

Hope you liked the WordPress/CSS tip. Like the last one, I know this was relatively simple. I can do more advanced ones, so if you have any requests for quick CSS tips like this, let me know in the comments.

WordPress Smiley Spam Technique

Get a CSS Killswitch Effect With Only One Line of Code

Leland — Sun, 14 Feb 2010 13:54:05 +0000

I recently came across a site on Twitter called CSS Killswitch. What is it exactly? According to their site: “CSS Killswitch lets you non-destructively black out a difficult client’s website with the click of a button.”

The Code

If you try out their “two second demo” you’ll see all it basically does it make your page go completely blank. You can accomplish pretty much the same thing by placing the following bit of CSS code in your stylesheet.

* { display: none; }

If you notice anything still visible, you probably have some !important things you need to take care of as well.

Explanation

The asterisk selector (*) acts as a wildcard, and selects all elements within the page.
The “display: none” means nothing will be displayed on that selector.
Combined with the asterisk selector, effectively everything on the page is not displayed.

Downside

If your client knows anything about CSS, they’ll probably be able to easily identify this line of code and remove it. You can try to be creative with it and put it somewhere a client will not be likely to look.

According to the CSS Killswitch website, removing their method of hiding the page is as easy as identifying the offending CSS link and removing it.

Thoughts

I guess this is all done under the assumption that your clients are not aware of basic CSS techniques and therefore will be dumbfounded enough into finally paying you (the designer) for your work.

This might be useful if a client refuses to pay for work, but I’d only recommend using something like this as an absolute last resort.

Conclusion

Yeah, I know you CSS experts reading are probably already well aware of the asterisk selector and display: none. For everyone else, would you be interested in more if these quick CSS tip posts?

I’d be interested to hear your thoughts on more CSS tip posts, and the premise behind these methods of “disabling” pages for non-paying clients. What about the legality and ethics of doing such a thing?

Sound off in the comments.