.st0{fill:#FFFFFF;}

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

 April 1, 2016

By  NickLitten

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"}
__CONFIG_colors_palette__{"active_palette":0,"config":{"colors":{"cff50":{"name":"Main Accent","parent":-1},"a344d":{"name":"Accent Transparent","parent":"cff50"}},"gradients":[]},"palettes":[{"name":"Default","value":{"colors":{"cff50":{"val":"var(--tcb-skin-color-0)"},"a344d":{"val":"rgba(46, 138, 229, 0.85)","hsl_parent_dependency":{"h":210,"l":0.54,"s":0.78}}},"gradients":[]},"original":{"colors":{"cff50":{"val":"rgb(0, 178, 255)","hsl":{"h":198,"s":1,"l":0.5}},"a344d":{"val":"rgba(0, 178, 255, 0.85)","hsl_parent_dependency":{"h":198,"s":1,"l":0.5}}},"gradients":[]}}]}__CONFIG_colors_palette__

Get In Touch

I’m always looking for awesome input, feedback and critique!

>