Home » Blogs » moonz's blog

Setting subtheme CSS

Submitted by moonz on Fri, 2010-05-21 06:26

Font size too big for a title with a link.

It’s because there are 30% increase by both .title and .title a. So, font size of a title and that of a link in a title differs. In order not to increase another 30% at a link in a title, add the following code to CSS.

.title a {
  font-size: 1.0em;
}

Changing the header style, only for a full content

It’s not exactly a problem, but it’s a matter of taste. Difficult part is (at least for the bluemarine theme) that a full content and a preview content are indistinguishable from CSS’s point of view. When I adjust styles of header for a full content, a preview content becomes ugly.

Some research reveals that it’s the template of theme that defines the class attribute of HTML tags of concern. Copy node.tpl.php from the bluemarine theme directory to the newly created subtheme directory, and find the following line.

<div class="node<?php if ($sticky) { print " sticky"; } ?><?php if (!$status) { print " node-unpublished"; } ?>">

Modify as below.

<div class="node<?php if ($sticky) { print " sticky"; } ?><?php if (!$status) { print " node-unpublished"; } ?><?php if (!$teaser) { print " node-full"; } else { print " node-preview"; } ?>">

To apply, you should run “Clear cache data” in “Administer > Site configuration > Performance”.

It’s time for CSS. For now, I added the following code after several experiments.

#main > .title {
  font-size: 2em;
  margin-bottom: 0.7em;
}

.node-full .content h1 {
  font-size: 1.6em;
  color: #3C4C6C;
  padding-bottom: 0.4em;
  margin-top: 1em;
  margin-bottom: 0.8em;
  border-bottom: 1px solid;
}

div.node-preview {
  padding-top: 1em;
  margin-bottom: 1.5em;
}

div.node-preview + div.node-preview {
  border-top: 2px dotted #AAAAAA;
}

Font size of code differs between IE and chrome.

This is not caused by CSS, but by the chrome’s bug(?) that the default size of the monospace font is small. It’s a delicate problem because,

  • Setting absolute font size is not desirable. (See “Font Size” section of here.)
  • Could change the font, but I prefer monospace.
  • Applying CSS browser selector allows per-browser CSS settings. But, when the chrome fixes the bug, than more work will be needed to distinguish versions.

Some more research led to a better solution! Basically, it’s similar to changing font, but still can use monospace.

But, it was just the beginning.

  • Introspecting CSS shows that the monospace font styles are not factored to a common class, but each language has a different class called geshifilter-. At first, CSS selectors seemed to be good here because all the classes start with the same prefix. But, CSS attribute selectors can select a exact match of a space-separated list or a prefix match of a value, but can’t select a prefix match of a space-separated list.
  • I didn’t want to modify CSS every time I add a GeSHi language, so again, I read the source of the GeSHi filter module. Code which sets monospace is hard-coded deep inside GeSHi filter code (to be exact, _geshifilter_override_geshi_defaults).
  • CSS of GeSHi filter can be generated in separate file, so rewriting (or something) would not help.

Sadly, this leave no option but modifying GeSHi filter. I tried so hard to avoid this, but can’t live with this problem either. After long, long suffering, two methods remained as the final candidates.

  1. The biggest mistake of GeSHi filter module was setting different “overall classes” of GeSHi for each language. Fix the module to use common overall class.
  2. GeSHi could have written the overall class first when writing class attribute for each tags, and (because that makes class attribute start with the same prefix) CSS attribute selector could be useful. Fix class="lang overall" to class="overall lang".

Both method, as long as the external GeSHi CSS is used, could allow other CSS’s to override easily. I tried both, and both worked.

Method 1 - Use common overall class

Find the following line in geshifilter.page.inc of the GeSHi filter module.

$geshi->set_overall_class(‘geshifilter-‘. $langcode);

Comment out that line, and add the following line.

$geshi->set_overall_class(‘geshifilter-code’);

Next, add the following lines to the subtheme CSS.

tt, code, pre, div.geshifilter-code {
  font-family: WorkAroundWebKitAndMozilla, monospace ! important;
}

“! important” is needed to adjust weight because CSS generated by GeSHi filter is more specific and results in a higher priority. (See the CSS spec)

(Re-)generate CSS from GeSHi filter module.

  • Administer > Site configuration > GeSHi Filter
    • If you’re not using external CSS yet, set “CSS mode for syntax highlighting” of “Styling, layout and CSS” section to “Use CSS classes and an automatically managed external CSS style sheet”.
    • If you’re using external CSS already, run “Flush GeSHi language definition cache” at “GeSHi library version x.y.z detected” section to update the external CSS.

Remove the cached contents.

  • Administer > Site configuration > Performance
    • Run “Clear cached data”.

Method 2 - Rearrange the order of overall class in class attributes

Locate GeSHi code (not GeSHi filter module code) geshi.php, and find the following lines.

$attributes = ’ class="’ . $this->_genCSSName($this->language);
if ($this->overall_class != ”) {
    $attributes .= " ".$this->_genCSSName($this->overall_class);
}
$attributes .= ‘"’;

Modify as below.

$attributes = ’ class="’;
if ($this->overall_class != ”) {
    $attributes .= $this->_genCSSName($this->overall_class)." ";
}
$attributes .= $this->_genCSSName($this->language).‘"’;

Add the following lines to the subtheme CSS.

tt, code, pre, div[class|="geshifilter"] {
  font-family: WorkAroundWebKitAndMozilla, monospace ! important;
}

Remove the cached contents.

  • Administer > Site configuration > Performance
    • “Clear cached data” 실행

Comparison

Honestly, I still feel that the first method is the right one. But, the GeSHi filter module might need more frequent upgrades than the GeSHi, and I felt more comfortable with modifying non-drupal sources. So I applied the second method.

»