Dude, how can I style Drupal CSS to make quotes look cool?


Apr 01

I wrote a blog earlier to day with lots of source code and comments in it. I wanted the program code that I included to really standout and be very readable and easy to copy/paste. The current CSS layout uses <PRE> which gives me a nice way of marking blocks of code and displaying them. When I put <pre>around something</pre> it already looks reasonably nice:

quotes before

But I really wanted the the code to POP out – so delved into the world of theming Drupal. I soon, discovered that it’s not as complicated as you might think.

So lets replace the <PRE> CSS tag with a new one to make code quotes automagically look like this:

source code quotes

The nice effect of changing the drupal themes CSS is that it takes effect immediately and covers everything on the site.

Lets walk through how I did it:

1 – create a new CSS file in the theme folder

In this case I am using ../sites/a;;/themes/nexus so I created a new file called nicklitten.css

Look in your Drupal Theme directory and you should see something like this:

Edit your *.THEME file

You will need to edit the THEME file to tell it to LOAD your new CSS. Simply edit NEXUS.THEME (or your *.theme) file and add a line that says:

stylesheets[all][] = nicklitten.css

it should look something like this:

Now you can just edit your new CSS file to add anything you like.

In this case – I added:

pre {
 background: #fff url("images/pre-bg.png") repeat; 
 margin: 40px 0px;
 padding: 25px 20px;
 line-height: 25px;
 border: 1px solid #ddd;
 white-space: pre-wrap;
 white-space: -moz-pre-wrap;
 white-space: -pre-wrap;
 white-space: -o-pre-wrap;
 word-wrap: break-word;
 /* added by Nick Litten */
 border: 3px dashed #524DF0;
 font-family:courier new, courier, monospace;

And that is that.

ps: http://csstxt.com/ is a very cool site that lets you tinker with various CSS setting until you find the one you like


About the Author

IBM i Software Developer, Digital Dad, AS400 Anarchist, RPG Modernizer, Alpha Nerd and Passionate Eater of Cheese and Biscuits. Nick Litten Dot Com is a mixture of blog posts that can be sometimes serious, frequently playful and probably down-right pointless all in the space of a day. Enjoy your stay, feel free to comment and in the words of the most interesting man in the world: Stay thirsty my friend.