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 content... [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]
