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

  • Home
  • /
  • Blog
  • /
  • Dude, how can I style Drupal CSS to make quotes look cool?

April 1, 2016

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:

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

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:

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

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;
 letter-spacing:1pt;
 word-spacing:1pt;
 text-align:left;
 font-weight:normal;
 font-size:14px;
 color:#C4301A;
 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

NickLitten


IBM i Software Developer, Digital Dad, AS400 Anarchist, RPG Modernizer, Shameless Trekkie, Belligerent Nerd, Englishman Abroad 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 remember: If at first you don't succeed then skydiving probably isn't a hobby you should look into.

Nick Litten

related posts:

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

Start your
7-day free trial

Take This Course with ALL ACCESS

Unlock your Learning Potential with instant access to every course and all new courses as they are released.
 [ For Serious Software Developers only ]

IBM i Training For Technology Experts

New!

Successfully Work Remote 

 $ 129.00  $59.00

By adding new skills in information technology, employers will be confident that you have the necessary skills and tools needed to successfully work remotely

>

Snug CBD

 20% Discount

I have partnered with SNUG CBD givING you Organic CBD
20% discount code "NL20"