Embed CSS in your wordpress posts with a custom field

December 29, 2008

Sometimes, a specific post needs to be styled with some custom css styles. You can directly embed CSS in your post, but that not very clean. In this recipe, we will show you how to embed css in a clean way, by using a custom field. First, open your header.php file and insert the following code between the <head> and </head> html tags:   <?php if (is_single()) { $css = get_post_meta($post->ID, 'css', true); if (!empty($css)) { ?> <style type="text/css"> <?php echo... [Read the full story]

Top of CSS file to reset everything

October 3, 2008

Every browser has different margin and padding values that are set as default. Thats why we prefer to reset all values before building up a site. Most of people add, * {margin:0; padding:0; border:0} to the top of their CSS file to reset everything. But do you really thing that it is enough to reset everything? Use following code block on the top of your CSS file and see what else you’ve missed to reset. a:link, a, a.visited { text-decoration:none; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form, fieldset,input,textarea,blockquote,th,td,p... [Read the full story]

Using CSS Sliding Doors with WordPress Navigation

July 1, 2008

This sliding doors CSS hack allows you to create sophisticated tabs for your navigation bar. Sadly, WordPress core functions wp_list_pages() and wp_list_categories() don’t allow you to add the required span tag to use this technique. We are going to see how to proceed in order to use sliding doors in our WordPress theme. Sliding doors, why? There’s many articles available on the web about the sliding doors technique, so I’m not going to talk a lot about it. For people who don’t already know this famous hack, here’s... [Read the full story]

Web online generators and tools

June 25, 2008

Below is the complete list of online generators and tools with brief description that particularly for web designers and developers, if you want more details information, just check out the related posts. Rounded Corner Generators 1. Roundedcornr – rounded corners online generator. 2. Spiffy Corners – simple way to generate the CSS and HTML you need to create anti-aliased corners without using images or Javascript. 3. Sitepoint Spanky – an experimental technique for using only CSS to produce ’round-cornered... [Read the full story]

Highlighted Menu in CSS

June 17, 2008

Here is a quick and easy way to make menus with highlighted sub-links. Minimal code for maximum effect. CSS Code #css-target-menu { background: #000; padding: 5px; width: 300px; } #css-target-menu ul { font: 11px “Trebuchet MS”, Verdana, Arial; list-style: none;margin: 0; padding: 0; width: 300px; } #css-target-menu li { background: #000; padding: 2px; } #css-target-menu li:hover { background: #333; } #css-target-menu li ul { width: 224px; } #css-target-menu li ul li a { color: #999; } #css-target-menu li a { color:... [Read the full story]