Customized the styling for WP-Syntax

Bruce van der Kooij — Wed, 10 Jun 2009 02:57:39 +0000

I wanted to post a diff earlier today so I started by looking for a WordPress plugin that would integrate a syntax highlighter, I quickly found in the form of WP-Syntax which utilizes GeSHi (a server side syntax highlighter). However, turns out the default Hybrid theme applies an ugly background image to any pre tags.

I didn’t stop to try and figure out what The One True Way (TM) was so I just edited the relevant CSS files directly. The files I changed were wp-content/themes/hybrid/library/css/screen.css (to remove background) and wp-content/plugins/wp-syntax/wp-syntax.css (to change the wrapping to pre-wrap).

For a lot of WP-Syntax examples take a look at the Emacs Blog.

TODO:

Turns out the correct way to modify wp-syntax.css was described in the notes section of the WP-Syntax plugin page:

To customize your styling, copy the default wp-content/plugins/wp-syntax/wp-syntax.css to your theme’s template directory and modify it. If a file named wp-syntax.css exists in your theme’s template directory, this stylesheet is used instead of the default.

Seems the border is a bit buggy.

What’s the deal with custom backgrounds?

Bruce van der Kooij — Wed, 10 Jun 2009 02:34:52 +0000

I’m quite content with using Identi.ca, a microblogging service that runs on top of the open source microblogging engine Laconica, where thankfully custom backgrounds are just not done (no patches please). On that other microblogging site however, you know the anti-freedom one, that’s most definitely not the case. Some folks have even build an entire business model around providing background design advice.

So to stop the madness once and for all I decided to take the law into my own hands and user customize the user customizations using Stylish (userContent.css is too unwieldy as you have to restart Firefox). All you have to do after installing Stylish is add the following user style (note that the !important bit is required to override the original author’s rules with those from the user stylesheet):

UPDATE: turns out users can could customize colors too so I added the necessary declarations to put an end to that to.

@namespace url(http://www.w3.org/1999/xhtml);
 
@-moz-document domain("twitter.com") {
    /* Change the background image and color */
    body {
        color: #333333 !important;
        background: #9AE4E8  url(http://assets2.twitter.com/images/bg.gif)  no-repeat fixed left top !important;
    }
 
    /* Change the default font color */
    body, ul#tabMenu li a, #side .section h1, #side .stat a, #side .stats a span.stats_count, #side div.section-header h1, #side div.user_icon a, #side div.user_icon a:hover, #side div.section-header h3.faq-header, ul.sidebar-menu li.active a, li.verified-profile a, #side .promotion a {
        color: #333333 !important;
    }
 
    /* Change the font color for most links */
    a, #content tr.hentry:hover a, body#profile #content div.hentry:hover a, #side .stats a:hover span.stats_count, #side div.user_icon a:hover, li.verified-profile a:hover, #side .promotion .definition strong {
        color: #0084B4 !important;
    }
 
    /* Change the font color of the line containing the time of the notice and some other bits  */
    ol.statuses span.meta a, .hentry .meta a {
        color: #999999 !important;
    }
 
    /* The rest is for for the menu on the right */
    #side_base {
        background-color: #DDFFCC !important;
        border-left: 1px solid #BDDCAD !important;
    }
 
    #side hr {
        background: #BDDCAD none repeat scroll 0 0 !important;
    }
 
    /* Headers in the side menu */
    ul.sidebar-menu li.active a, ul.sidebar-menu li a:hover, #side div#custom_search.active, #side .promotion, .notify div {
        background-color: #EDFFE5 !important;
    }
}

And you’ll end up with just a pretty cloud and the default theme colors :-)

UPDATE: turns out somebody else had already written another user style to achieve this. No problem though as it was fun to do this myself and I learned quite a bit in the process about using Stylish properly :-)

Bruce van der Kooij » css

Customized the styling for WP-Syntax

What’s the deal with custom backgrounds?