Frankly, I don’t have much opinion regarding this matters as Its kind of trivial making point with a programmer.

Trying to sort thing out I tested few methods on linking and embedding stylesheet. Below is few possible way to links a stylesheet in XHTML document.

1. Internal styles

   <style type="text/css">
   ...
   </style>

2. Internal styles using @import

   <style type="text/css">
    @import url('style.css')
   </style>

3. External Link

   <link rel="stylesheet" type="text/css" href="style.css">

4. External Link and @import

   This will work if the import statements is in first row or before any tag selector inside the external stylesheet.

   @import url('reset.css')
   @import url('typography.css')

5. xml-stylesheet

   Will work on browser that fully support “xhtml+xml”.

   <?xml-stylesheet href="style.css" type="text/css" ?>

6. Check out this page → Robot Exclusion Profile.

What you should know

• Doctype XHTML 1.0 strict.
• Content type “application/xhtml+xml” (will also work with text/html).
• Valid XHTML 1.0 Strict

If you view the document sources there is no internal/embed styles, inline styles or external link styles but the page do have a main stylesheet & its also conformed with w3c XHTML 1.0 specs.

Cross Browser Test

• Mozilla Firefox 2.x & 3 - render successfully parsed xhtml+xml
• Google Chrome 0.2.149.27 - not supported but parse xhtml+xml
• Opera 9.5 & 9.6 - render successfully and parsed xhtml+xml.
• Safari 3.11 (Win) - not supported but parse xhtml+xml
• MS Internet Explorer 6, 7 & 8b - quirks mode, failed

There is two major browser support this implementation Firefox & Opera.

This gorgeous stalkerlicious theme will not work on certain userpage so its best if you test first before using it. The following code is a simple javascript hack for switching your userpage styles ↓.

 document.getElementById('thisstyle').remove();
 Apc.append(css_filename);

JIT stylesheet switcher

The Apc.append() function will append a stylesheet relative to animepaper user static server. For this function to work it need a single “css_filename”. You can get the user-stylesheet filename by viewing the userpage HTML sources (Right click view sources or CTRL + U for Firefox).

The below code is what you will normally found in animepaper userpage source.

<style id="thisstyle" media="screen" type="text/css">
	@import url("http://static3.animepaper.net/upload/css/890.css");
	@import url("http://static3.animepaper.net/css/constant.css");
	@import url("http://static1.animepaper.net/css/ui.css");
	@import url("http://static1.animepaper.net/css/userpage.css");
</style>

The upload user style is at the second line; → “http://static3.animepaper.net/upload/css/*.css”, we only need the CSS filename so just grab 890.css.

You can also run the following javascript inline code inside your browser address bar to get the user-stylesheet URL. (bookmark)

javascript:alert(document.styleSheets[0].cssRules[0].href);

Firebug console

console.log('CSS: %s', document.styleSheets[0].cssRules[0].href);

Do it yourself

Switching ^hatesyou default v5 theme to iStalker CSS.

AP-iStalker 1.6.2 CSS file is 890.css

1. First, go to ^hatesyou animepaper userpage, wait till it finished loading.

   

2. Paste the below code in your browser addressbar and run it. (Bookmark)

   javascript:document.getElementById('thisstyle').remove();Apc.append('890.css');void(0);

   

Update

1.6.2.3

• Fixes the three column “recent gallery” thumb, thanks to kuryuki for noticing this issues.
• Replaced the color pattern banner with Animepaper random wallpapers.

I’m about to upgrade a site from Wordpress 2.3 to the latest version. I’ve previously been employing the page id in order to have page specific CSS, e.g., pages with either 0, 1 or 2 sidebars.

For example, if the url is http://site.com/page1, the page is styled with a combination of a template and CSS to specify the width of primary:

#page1 #primary {margin-left: 0;width: 890px; }

I’ve read in some other posts here that Wordpress 2.5 no longer uses this, and now the post ID is used instead [...] ~ hauntedtapedeck

Workaround

Basically, what we need is a unique CSS Selector for specific post & custom page inside the template.

1. First we create a function for our CSS selector and save it inside WP theme functions.php

   functions.php: get_post_selector_classname()

   function get_post_selector_classname()
   { global $wp_query;
   
    if (!is_object($wp_query) ) return;
   
    if ($wp_query->is_single || $wp_query->is_page) {	 
   
   	 $pid = $wp_query->post->ID;
   	 $post_type = $wp_query->post->post_type; 
   
   	 return 'wp-'.$post_type.' '.$post_type.'-'.$pid;
    }
   }
   

2. Next we call the get_post_selector_classname function inside the template. You can call this function anywhere inside your template but the best placement for the class selector is inside body tag (more weight for inheritance).

   header.php

   <body class="<?php echo get_post_selector_classname();?>">
   

Available CSS selector

The following CSS selector is available inside WP post single and page only.

• body.wp-page
• body.page-ID
• body.wp-post
• body.post-ID

CSS Example

styling “single page” post.

body.wp-single{background-color:#f6f6f6;}

styling a single page with post ID 69.

body.single-69{background-color:#f6f6f6;}

styling custom page with post ID 42.

body.page-42{background-color:#f6f6f6;}

styling all custom page.

body.wp-page{background-color:#f6f6f6;}

Wordpress 2.6.2

I’m not sure why its not working thought. For WP 2.6.2, try the below code

// add inside functions.php
function post_selector_classname()
{ global $wp_query;

	$output = 'wp-';

 if ($wp_query->is_single || $wp_query->is_page) {	 

	 $pid = $wp_query->post->ID;
	 $post_type = $wp_query->post->post_type; 

	 $output .= $post_type.' '.$post_type.'-'.$pid;
 } elseif($wp_query->is_home) {
 		$output .= 'home';
 }

 echo $output;
}

call inside template (header.php)

<body class="<?php post_selector_classname();?>">

Refer query.php inside wp-includes folder for more WP hierarchical sections.

So I happily replaced the base64 stalker birdy with Tonī Tonī Choppā トニートニー・チョッパー (from One Piece series).

Chopper is my new plot device cum place holder for padding. You can see him in action somewhere between the main journal and “about me” block.

Chooper Data-URI

data:image/gif,GIF89a(%00%96%00%B3%00%00%FF%FF%FF%FF%FF%00%FF%DE%B5%DE%DE%DE%DE%B5%84%B5%B5%B5%84%B5%FF%FF%84%84%B5%84J%00%84%FF%DEJJ%84J%00%00%00%FFJ%
00%00%00%00%00%FF%FF%FF!%FF%0BNETSCAPE2.0%03%01%00%00%00!%F9%04%09%2C%01%0F%00%2C%00%00%5C%00%22%00%3A%00%00%04%FF%F0%C9Iku%CE%EA%AD%F3s%8B%C7%8D%
16%98%99d%3Aa%A1%83%84jj%22%D8%2B%C6%DB%EC%C28u%7F!%9A%AD%B7%E2IjBc%CF%25B%EE~%B8'%12AU%12%3F%D4%EC%ABu-a%98%98%EE%17%8A%12%2B%CE%8A%DB%B3%FB8%
1F%CE%CD!%DB%FDN%D7%ACD%FA%DBQ0A%7Bp%0Eu_x%80%0E%00%82pU%7FQ%7D%07%83r_W%7C%88%7Bc%18h%8C%1Cv_h%8F%9F%7BD%98%A0%A4%07%0Epy%0A%8Fh%AC%98iW%AD%97%A7%99%B0vB4%B3vb.TS%92l%BC4%00%88Y%9A*%BD%87%C9%02%04%BDl%0F%08%04%04%87%C3%18%CB4%CE%C8_%02%DB%CC%97D4%06%0C%04%DC%
0E%D1Z%C88%D0%09%E2%E6%18%D1%E3%D6%E8)%0BT%D2%DA%EF%D1%DC%CC%CD%24%20-%F8%F5%DE%E9%2B%26%A3%DC%3E%5C%06%05%C6%E3%97%03Z%B6%80%F8%E0%1D%BC%B6%A1X%B0%88%F8%062%B4%80K%CB%02%8C%F9%96%24%1Edt%02%89%B9h%1F%F3m%5B6%92%C3%18%88%11Wj%0C%D3%E1%E5%0B%90%12Ybh%40%D2%03%88%2C%04RB%7B7%A6%81Q%9E%1DV%9C%B3%F8%E5%A8S%A4%FDd9h%40%2F%CB%82%AB%0B%8E%1A%5B%E1%14%EBU%8FO%A1%8E%98z%D4%EB%D7-Y%9Dn%FDP%D6%AC%C7%ABjet%D5%FA%E5EX%B1%1D%E6%FE%3A%E2%2F-Ocd%B5%BA%24%BBw%F0%98%A8%1B%1BR%EC%F7%A1%5B%BFhk%7D8n(M%14d%97%B8%26%5D%BE%00%262g%7Bj%C2%D0%8C%225%02%00!%F9%04%09%05%00%0F%00%2C%00%00%5C%00%22%00%3A%00%00%04%FF%F0%C9I%EBs%D2-l%BB%AF%1A%16~d%E7%84%0E%B2%95l%B6!%A7%CA%B5d%08%CB%B45%BBi%BA%E6%93Q0u%FB%01%2F%B0!%A2%B8%03%FAN%C4%25%EEH%89J%17%9B%26%F5%02%85%9D%B6P%AD%90%EAP%98%15%BB%E7%F6a%3E%98g%EAu%DB%8D%8E%19%B7s%B7%A3%80ZK%DE%0EtPwTh%00%81oK%84G%7B%81%82SP%265%05%87za'gM_%19%16uPg%07%A1%A2hU%01%1C%9BUe%A2%AB%A2e%A4%19%A6%B0Zsg%B5%98%AF%17%01%B1%0E%B1%9D%99%97%AEo%B0%BA'%C4%1D%80%08%0D%C9%B7u%19%C5%BA%C6%26%0E%CAP%0D%D4%A8%A5%D0Z%19%D4%00%DE)%D4%1F%BC%C4%97%13%DD%DE%DF%04%E1%D8%C3%D0%BD%12%CB%DF%DF%0E%04I%9C%20%E4M%D7%E8'%02%F5a%5C%B2%BD%9B%00%C3%00%830%02%FCIYr*%15%AF%26K%180%20%90%90%00%01z%16%17%B2%1BRa%89E%8C%5E%D5%2CRT%C8p%9B%85%05%1E%2F%F6%13i%B1b%3D%86%17j%609%C12eK%7F%2F%93%98t%96%B1%24F%91%155%C64%81%E0e%97%A2%22%01%DC%CC%A9%B3%83%94%186E.P%EA%F2%E9%D0%8EP%15%B1%94%EA%AF*LIG3Z%5C%004!N%AB%1E%C2Dei%D6%EBFgG%C9n%5D%8A%F3D%03%93%9B4H!%20%17%E9%C7j%D6%EEJ%CA%B0Pc%98%C0%88%05%97%00f%17%E5%15%2C%0B%02%EF%AC%82%182%96%85%91%13O%E6%16%D8%F2e%15X4%B3%98f%CD%B3cE%A1%25%8F%AE%2C%B9Kf%D1%E2XG%1A%02%B9u%0D%D8%D2%AC%CD%AEQ%8E%F7%D7%1A%BFk%5C%F8%B7%B8%E8f%10%C4%D3%06o%81qg%8F%E3%3A%3E%EAx%0E%1D%04%BD%DD%5CDT%1F%02%2C%02%00!%F9%04%09%3C%00%0F%00%2C%00%00%5C%00%22%00%3A%00%00%04%FF%F0%C9I%EBs%D2-l%BB%AF%1A%16~d%E7%84%0E%B2%95l%B6!%A7%CA%B5d%08%CB%B45%BBi%BA%E6%93Q0u%FB%01%2F%B0!%A2%B8%03%FAN%C4%25%EEH%89J%17%9B%26%F5%02%85%9D%B6P%AD%90%EAP%98%15%BB%E7%F6a%3E%98g%EAu%DB%8D%8E%19%B7s%B7%A3%80ZK%DE%0EtPwTh%00%81oK%84G%7B%81%82SPd%05%87za'gZ%25uPg%07%9E%9Fh%8Ce%9F%A4%9Fe%A1%40sg%AB%97%A8%A9%98%96%A7o%85u%08%0D%B6%ADu%60%0E%B7P%0D%BD_k%BC0%00%C5)%BD~%0F%BD%C5%CC%0E%04%C8k%B8%C6%C6%CEIk%C0%CD%0E%02%04%5E%C1%400%06%0Ca%02%DBRK%99%24K%0C%0C%04%E4%04%04%CE%EF%E6%DE%2CK%EF%F1%5E%EF%ED%E5%E7%E8%15%0B%F6%E0%9D%D8%A6o%9F%BCs%2C4d)%18%F0%9D%3Bn%08K%9C8%D8%AD%A0%C1y5%10%40%EC%A2Q%1F%00%87%FC%A6%22v%90%12%A3%A1%BE%05%1F%1F%92%FC%E0%C5%DC%02%8B%EF%16lS)%12%04%17%22%F2b%EA%23G%D3%9A%09%8E0A%F2%3CH%AFJ%18EA%0D%12%3C%D1%00%5D0%0DR%08%BC%E4V0%CC%AF_%99%E0%98%9Bg%F5%AAW%7FCb5%00x%05%CB%82%AB%60%83x5%8B%C5%A5W%AC%09%D7%B2%25k%F6m%DA%0BW%E7%92U%84%E5k%DC%BCh%BB%9C%7D%DB%B4%C6%DA%A6%F4N%D4%C5%0A%96%97_%0FL%11%DF%8D%25%91%C8%E4%9A%1FDpK%9B%02%9E%93%CD%995%DE%05q%2Ft%D1%16%F1%C4%F48%9D%D0Y%A4%B0%5CD%C5%8A%00%00!%F9%04%09%03%00%0F%00%2C%00%00%5C%00%18%00%3A%00%00%04%FF%F0%C9I%9D%A38%CF%FB%DC%E2Z%E8%5Dc(%8E%0E%F2%99%D9%88X*%C8Jn%BA%CE%D5%F7%C6x%95%EE%B7%1E%0C(c%0D%11%C8%20%0E%99%FC%14g0%CBS%A8%ECmxV%0C6K%A9r%3B%D3%AC%97%3B%CEr%A4_%B0C%C1%0E%9B%0Ep%B8%C2%1D%8A%AF%E7%DF%F9%9D.b%B7%D3~%16ij%83%12%2F%85%86%87%85%04%8A%83%8CR%82%5C%8CLH%91%3D%04%98%02%02%93%2F%7C%12%98%99%9B%9C%9E%08%A0%04%9A%98L%7C%0E%A6%A7%9B%94t%AD%A1%9C%8D%19%B2%AE%A9%95%26%B2%9B%A8%A3!%98%0B%A0%9A%BE%AA%C0%A6%C4%C5%9D%C7%C8%BD%98%16%0Da%C2%8C%A6%90%0D%D7%D1%1A%AA%D6%D8%DDSR%0D%0B%94%0B%E4%0B%D8S%E1%E5%E2L%E6%DD%D9%18%E9%EAM%ED%E7%19%EA%E4%E3%E4%DE%19%E1%E7R*%EE%AE%151%87f%83%07%7D%02%8B%BC%D3%00-%9A%25%83P~xb%D8%E1%11%22V%B5%B8%B0%220Q%C4%B3B%16%078%3E%14%02IJ%04%00!%F9%04%09%08%00%0F%00%2C%00%00q%00%18%00%18%00%00%04h%F0%C9I_%B9%B7%EA%7D%81%C7%C5%A6a%5EY%0C%03%26Z%E7P%BEi%1Ar%EEk%D7)W%D8%BC%97s%3D%DEo%14%B4e*%9D%E2kF9)KC%D6%EE%E9c%5EP%D4*S%0A%9A%0A%8F%2BoqK%A4%92%9B%DE%1A%EF%DCD%A5%82%EC%B6%D8%F7%89O%92_%FB%BD'%5B%B5o*~wj%7D%82H-%60%86h%89%12%11%00!%F9%04%09%08%00%0F%00%2C%00%00q%00%18%00%18%00%00%04a%F0%C9I%DF%B8%B7j%8D%81%C7%C3%C6%5D%5E%09f%22%08%9C%2B%98%0Ek%05%AF_%C8%BDe%2B%EEd%BD%A74%DD%8F%93%B3Q%0A%BF%9E%F0Qh6y%B3%18%B3%80An%3A%98%A3%D3%3Aj%A1%86%B2%13%18%F7%1DSfF%F3%04%9D~%7D%D9Cj%0D%5B%06%CEM%EDk%B4%98%C7%F1%FB~Yj%12.%15%11%00!%F9%04%09%08%00%0F%00%2C%00%00p%00%18%00%1A%00%00%04F%F0%C9I%E7%B8%B7%EA%8A%3B%DE%DAGu%A05%94b%A9J%D9%BA%B6.%08%C7%E1Io%F3m%E9%F5T%F0%0F%5B%E1%07%A4%10%8B%C8%24G%19%B4!s%3Ch%E5(s%CAT%D2%91u%F9%DA%9Ab9%12%D8%93%1A%8B%25%11%00!%F9%04%05%96%00%0F%00%2C%00%00%00%00%01%00%01%00%00%04%02%F0E%00!%F9%04%09%0A%00%0F%00%2C%00%00k%00%12%00%0C%00%00%04%3C%F0%3D%E7%A4%BDx.%9A%BB%5B%C8We%14%E7%84%CBv%95%C8%B6%9D%E2%DA%C23%ACZ%F4%16j%F3%0A%9F%B7Sm%C2J%8D%26%88%96%91%92%7C%E1j%A9%E4%F0b%94%94J%9Ec'%13%01%00!%F9%04%09%0A%00%0F%00%2C%00%00j%00%1C%00%13%00%00%04%85%D0%B9G%AB%BD%F8%1E%25%F3%EB%9E%B6q%93%E5%2C%60H%1D%ECX~%0Br%BE%A649%AD%A2%97%8E%BC%A0%B5%1E%0A%05%C0%8D8%94%DE%CC%84%40%C9%9A%B6%23%F2%E3%A3)%A1%B2%07K%B7%AB%9C%A05%99p%22%9D%26%11%D0%9B%AD%09%FCpIL6J%82%9EW%0E%12R%C16%3E%C5%EA)%14%0A%1B%12D~m%7C%81%5E%3A%84%0E%7B6*%18s%5C%8A%91%16%3Fy%5D%96%19%88%94%9B%18V%9A%9F%5E%17%95%9F4%A3%1E%11%00!%F9%04%09%C8%00%0F%00%2C%00%00h%00%22%00%1D%00%00%04%D0%D0%C9G%AB%BD8W%A5%8EtZ(%3E%DCaz%E0%A8R%E5y(S%16%AB%9C%E3%BEpZ9%CB%2C%C2%00%DB%AD%B6%5B%20x%3A%CB%07%04%0CJN%1C%18%C5q%5C%F4%94%12D%AF%97%03x%83%A6h%8A%8ATj%C9gG%C1%BB%C4%11%1F%E4%EB%EEx%3E%C2%25%EC%B0%B8x%C6%1E%A9W%25%1FnoS%08iwYV)-(Q9fZ%8BY%88S%0EQ%26%129%05KiV%87%95%15i%97%1D9%3DAVrK%3E%A2%7F%1F%25%9BK%2B%A2%0E%5E%9C%3D%A4%90%B3%17GA%A8%B8%7B%BBX%B6ep%C1%C2%0F%0C%AErS%85%C2T%04%04%8B%17%AC%BB%87%D1%C5%C8%1A%0E%D1%B8%DA%22%B2%DF%22v%E2%23d%E5%E0%DCI%E8~%EB%EC%96%E4%EFX%EE%F2%11%00!%F9%04%09%0A%00%0F%00%2C%00%00j%00%1C%00%13%00%00%04%85%D0%B9G%AB%BD%F8%1E%25%F3%EB%9E%B6q%93%E5%2C%60H%1D%ECX~%0Br%BE%A649%AD%A2%97%8E%BC%A0%B5%1E%0A%05%C0%8D8%94%DE%CC%84%40%C9%9A%B6%23%F2%E3%A3)%A1%B2%07K%B7%AB%9C%A05%99p%22%9D%26%11%D0%9B%AD%09%FCpIL6J%82%9EW%0E%12R%C16%3E%C5%EA)%14%0A%1B%12D~m%7C%81%5E%3A%84%0E%7B6*%18s%5C%8A%91%16%3Fy%5D%96%19%88%94%9B%18V%9A%9F%5E%17%95%9F4%A3%1E%11%00!%F9%04%09%0A%00%0F%00%2C%00%00k%00%12%00%0C%00%00%04%3C%F0%3D%E7%A4%BDx.%9A%BB%5B%C8We%14%E7%84%CBv%95%C8%B6%9D%E2%DA%C23%ACZ%F4%16j%F3%0A%9F%B7Sm%C2J%8D%26%88%96%91%92%7C%E1j%A9%E4%F0b%94%94J%9Ec'%13%01%00!%F9%04%05d%00%0F%00%2C%00%00%00%00%01%00%01%00%00%04%02%F0E%00!%F9%04%09%0A%00%0F%00%2C%00%00%86%00%08%00%10%00%00%04!%D0%BDI%9F%AC%F3%E2%A6)%C7%CF%B7%89%9E%D3Y%E7%83%A4%C4%8A9m%07%13%E7%2C%C3%A6%94%EFN%04%00!%F9%04%09%0A%00%0F%00%2C%00%00%5C%00%10%00%3A%00%00%04%89%F0%3D%E7%A4%BD%D7%AD%8A%FB%DC%1E%E6%20%60h%8D%A5%F9%90%9C%BA%A6*%EBJ%B0%DA%CEx%AE%EF%7C%EF%FF%C0%A0pH%2C%1A%8F%A1%9B%0BA%C1!%9EJ%0F%E1%C9tM%A9%D1%8B%E0%0A5m%B9Y%89%E0%8B%0D%8D%09%603%99%19%26%7C)%8D0%05%DE%A8g%EBx%7C%96%B4%E8%EB%3DO%0Byv%1D%7C%82yQ%81~%7F%22%24%83%84%22%1A%8Bqr%0EvM6%23U6%13Sa%22%9E3%0Eh%9F%19%A4%A2%A3s%26s%AC%0E%11%00!%F9%04%09%0A%00%0F%00%2C%00%00%5C%00%18%00%3A%00%00%04%FF%F0%C9I%9D%A38%CF%FB%DC%E2Z%E8%5Dc(%8E%0E%F2%99%D9%88X*%C8Jn%BA%CE%D5%F7%C6x%95%EE%B7%1E%0C(c%0D%11%C8%20%0E%99%FC%14g0%CBS%A8%ECmxV%0C6K%A9r%3B%D3%AC%97%3B%CEr%A4_%B0C%C1%0E%9B%0Ep%B8%C2%1D%8A%AF%E7%DF%F9%9D.b%B7%D3~%16ij%83%12%2F%85%86%87%85%04%8A%83%8CR%82%5C%8CLH%91%3D%04%98%02%02%93%2F%7C%12%98%99%9B%9C%9E%08%A0%04%9A%98L%7C%0E%A6%A7%9B%94t%AD%A1%9C%8D%19%B2%AE%A9%95%26%B2%9B%A8%A3!%98%0B%A0%9A%BE%AA%C0%A6%C4%C5%9D%C7%C8%BD%98%16%0Da%C2%8C%A6%90%0D%D7%D1%1A%AA%D6%D8%DDSR%0D%0B%94%0B%E4%0B%D8S%E1%E5%E2L%E6%DD%D9%18%E9%EAM%ED%E7%19%EA%E4%E3%E4%DE%19%E1%E7R*%EE%AE%151%87f%83%07%7D%02%8B%BC%D3%00-%9A%25%83P~xb%D8%E1%11%22V%B5%B8%B0%220Q%C4%B3B%16%078%3E%14%02IJ%04%00!%F9%04%09%0A%00%0F%00%2C%00%00%5C%00%1E%00%3A%00%00%04%FF%F0%C9I%EBs%CE%EA%3D%F3%5D%1E'J%0E%F8%85%E3%86%81%0Eb%A6*%88%60.%0ASe%DB%BE%B7%9D%CF%B5%DB%09%D7%02%F2R%BANqg%1B1i%88hPH%92J%17%2C*%91%86i%22-9%EDD%81b%8A%25%E4%CE%F4%AC%20%D3%8E%E2%03%B9%90%F3%0A%E5%EE%F0Y%82%2F%C2%B5%7DS%5Dqy%5D%0EmiT%18%88%07%8D%8E%89w%8E%92%07%87%907%88%98%8B%96%3D%86%9Amv%22%403%95ng%A3R%83%7B%0E%00%00E3%7B%12%AD%AD%02%04Q%A0)%AC%AD%0E%B4%AF%AA%18%02%C0%B5%9DZ%04%C1%0E%04%B5V%A3B%C8%C2%C7%C8%C1%A8%B7J%BF%CD%D0%B4%C9%BD%22%CF%C8Q%D6%C1%D9%D3%E1%18%D6%C5%BC%A8%A1%5D%DE%E5%E6%D9%DA%60R%EC%CD%E0%E8%1BW%F2%C5%ED%E1*%EB%08%C8%0B%F3%80a%AB%07%CF%9F%3C%81%F4%96i%F0%83%2F%186%0C%0D%EC%94%88%07%B0%965C%0D2F%5C%A8LZ%17%8D%20a7.%EC%04q%81%15%2CX4%82r%00%12%25%96%93!E%82i%E9%D2%A4%8B%94%20%25j%ACi3%0A%CA%9C*Z%AAT%B7%20%A6%CC%0EBS%91(%813b%13%96%40U%40UZ%81%A4%93%25%FC%DEq%C8pL%2B%09d%D3%AA%0A%AB%EA%2F%ACX%02%3E%14*%02%AB%86*'%B4%18.p5%BB%A5S%04%00%3B

Download

• Download link: Note: There is a file embedded within this post, please visit this post to download the file.
• Mirror: istalker.googlecode.com

Remove oversize image

I’d seen a trend for posting oversize image at the comment post, journal & about me sections on user profile page. If you like to keep things clean, Its best to hide it. below is the code for hiding oversize image (or very long one-line text) from overflowing the client view-port. I hate those horizontal scroll-bar.

.aboutme,.journalbody,postbody{overflow:hidden}

copy paste the above code at the bottom most of your CSS.

Non Waller

For those who doesn’t have a featured wall or scan (yet) you must add the below code inside your CSS so it will look more presentable.

.msie .myjournal{clear:both}
.myjournal:before{
clear:both;content:".";display:block;height:0;
line-height:0;visibility:hidden}

Showcase

derivative work from AP iStalker 1.6 CSS.

Chiaki May 22, 2008

Cross Browser Autoload

Before you stalked me, WPI WordPress theme has a build in function for auto-loading cross browser stylesheet and script files. This function is available since our first release.

How to load Browser specific CSS & Scripts?

We asume you are using the crappy broken MSIE 6 browser running on Windows XP.
When WPI theme load it will look for specific stylesheet & script files like below list.

• stylesheet → /themes/wp-istalker/css/ ↓
  1. ie.css
  2. ie-6.css
  3. winxp.css
• javascript → /themes/wp-istalker/scripts/ ↓
  1. ie.js
  2. ie-6.js
  3. winxp.js

If any of the files exists, It will queue the specific files and append it to the master file then proceed with minified → crunch → combine → gzip or deflate (if the ua allowed it) and send it to the browser as a single file. Walla

Depend on the user UA the complete files will be cached inside the the following cache directory.

• /themes/wp-istalker/cache/css/*.css.compression-type
• /themes/wp-istalker/cache/scripts/*.js.compression-type

the combine files can be found at

• /themes/wp-istalker/css/combine-md5hash.css
• /themes/wp-istalker/scripts/combine-md5hash.js

how to check for browser versions number?

Its a bit tricky to know the correct name and version numbers, here’s how I do it.

Go to your blog frontpage and look inside the source code body-tag. On the “class” attribute you can find something similar like the below example. ↓

<body id="wpi-blog-kaizeku-com" class="wp-home firefox firefox-20 winxp -foaf-Document">

If you have firebug → console.log($(’body’).attr(’class’) );

code break:

1. wp-home → Section , Refer WordPress Template Hierarchy
2. firefox → Browser name
3. firefox-2 → Browser name & Major Version numbers.
4. winxp → OS platform

for variant of gecko base engine (i.e., prism, flock, seamonkey,mozilla suite) it will just show it as “mozilla mozilla-19 winxp” or something similar.

just to see how clever this go, you can used this wonderful root body browser-class-name CSS selector to create different CSS styling/tweak for cross browser like so ↓

body.safari div.hentry{
 position:relative; top: -10px; min-height:400px
}
body.ie-6 div.hentry{
 height:auto;height:450px
}
body.opera div.hentry{
 min-height: 500px
}

The CSS files Ordering

Inheritance is very important factor in CSS. Below is list of files sort by number starting from top to bottom.

@import url('/wp-content/themes/wp-istalker/icecream.css,auth.css,single.css,lang.css,firefox.css,winxp.css');

1. icecream.css → global css (style.css) load at all page include in this file is our blueprint.css (blueprint framework css), image.css.

   I prefer delicious filename more than generic :) .

2. auth.css → this file will be loaded if you are registered user.
3. single.css → section files

   sections: home.css, single.css, attachment.css, page.css, search.css, archive.css, category.css, tag.css, year.css, month.css, day.css, 404.css etc..

4. plugins & widgets → supported plugins and widgets file will be append here (i.e., wp-pagenavi, openid, global translator, wpseo, wpstats)
5. firefox → browser name specific stylesheets
6. firefox-2 → it get more specific.
7. platform → os/platform base stylesheets. good for declaring supporting fonts class
8. extra_css - filter hook wpi_css_import_array

Custom Hook

Hook for each of the import files → wpi_css_import_$int
$int → 1 to 7

notes
if you want to append a file just after the section css you will used ‘wpi_css_import_2′ as hook. I wont cover the how part in this guide. check out Wordpress Codex if neeed too.

If you are on MSIE6, this page will render in XML ;p. Not my fault really, This site has valid xhtml, CSS 2.1 , xhtml/xml, WCAG A1 & Section 508. Your browser just pwned too much propriety language to survive

Support the standards so it will continue to look good in the future.

Download

• Note: There is a file embedded within this post, please visit this post to download the file.

Whats new

• base64-image (save my bandwith)
• Anti IE6 *evil grin*
• Less cloacking
• CSS BBCODE - float control
• Smooth Colors - Brush & Milk

Known Bugs

• Minor - Firefox 3b+, flickring while hovering over bottom sidebar lists. firefox 3b doesnt render hiragana-iroha very well.

Workaround for MSIE

Animepaper has a browser classname features, used it wisely. Refer CSS Task Force » Browser Specific Code

External Links

• View iStalker CSS 1.08 FR
• View iStalker CSS v1.08

Tracker

• Renton-Thurston

functions.php

Login to WordPress Admin Open ↓

Presentation » Theme Editor » functions.php

On line 745 replace inloop_get_cat_links function with the following code:-

View Code

function inloop_get_cat_links($echo= 1, $index = false, $separator = '¸')
{
	$cats = get_the_category();
	$options = array( 'class' => 'cat-link dc-subject',
				'href'	 => '#content',
				'rel'	 => 'category foaf.topic',
				'title' => 'category',
				'rev'	 => 'site:archive');

		if (is_bool($index)):
			$links = "\n";
			$ismore = false;
			$cnt = count($cats);

			if ($cnt >= 0):
				$ismore = true;
				$endcnt = ($cnt - 1);
			endif;

			$i = 1;

			foreach($cats as $cat):
				$options['href'] = wpi_relative(get_category_link($cat->cat_ID));
				$options['title'] = $cat->cat_name.' ('.$cat->count.' articles in this category)';
				$links .= _t('a',$cat->name, $options);	

						 if ( $ismore && $i == $endcnt):
						 	$links .= ' '._t('span','&',array('class'=>'sep')).' ';

						 elseif ( $i !== $cnt):
						 	$links .= _t('span',$separator,array('class'=>'sep')).' ';

						 endif;
			$i++;
			endforeach;

		elseif(is_integer($index)):	

			$cats = $cats[$index];
			$options['href'] = wpi_relative(get_category_link($cats->cat_ID));
			$options['title'] = $cats->cat_name.' ('.$cats->count.' articles in this category)';

			$links .= _t('a', $cats->name, $options);	

		endif;

		unset($cats);

		if ($echo == 1): echo $links; else: return $links; endif;
}

On line 341 replace wpi_get_grid_width function with the below code

View Code

 function wpi_get_grid_width( $column = 10 )
 { global $kaizeku;
 if (!$kaizeku->engine->enabled_grid){
 $kaizeku->object_cache->set(WPI_REF_TOKEN,'admin',array('theme_styles'=>'fluid'));
 return false;

 } else {

 settype( $column, "integer" );

 $setwidth = ( $kaizeku->css['colwidth'] + $kaizeku->css['margin'] ) ;
 return ( ($column * $setwidth) - $kaizeku->css['margin'] ) ;

 }
 }

CSS

• is_home.css
• is_single.css
• safari.css
• mozilla.css

External Links

• theme.istalker.net

[viewcode] src=3224.csx scroll=yes showsyntax=”no” scrollheight=400px link=”no” geshi=css[/viewcode]

The blueprint generator