styling paged sections

todd / 21.Mar.2007

a paged article is different than a regular article. with micro, i wanted to use paged articles for anything, be it an edge to edge photo or a contact form. for that reason, these section pages are free of style, and look like this:

that is, until you do something about it.

the above screenshot is from Pascal’s demo of the micro theme. if you prefer to style a paged section exactly like a regular article, just wrap your text in some stylesheet friendly html:

<div class="entry">
    your content here
</div>

essentially, we’re fooling the page into thinking it’s a regular blog entry. the about page of this site is styled this way, and after applying the above style class to Pascal’s copy, we can turn the unstyled, into styled:

that big C is part of the built in dropcap class.

add to del.icio.us, digg it

9 Comments

I absolutely love the theme, and feel shameful ripping off your weeks of work on it. I have a question, though: how did you implement the size_tag filter? The tag cloud seems to want to use it. (I imagine it’s pretty simple…)

fortyseventeen fortyseventeen / 29.Mar.2007 at 10:49pm

Oh, and before I forget, Firefox renders the comment speech bubble a bit strangely: the tail of the bubble appears behind the gravatar instead of to the right of it. I’ll try to find a fix for this one…

fortyseventeen fortyseventeen / 29.Mar.2007 at 11:02pm
Found the bug. Starting at line 370 in layout.css: 
.commentmetadata{
  background-image:url(/images/comment_quote-small.gif);    
  background-repeat:no-repeat;
  background-position:top 50px;
  padding-top:10px;
  padding-left:10px;
  color:#555;
  text-transform:lowercase;
}
Quirksmode says some browsers don’t recognize background-position when it’s given parameters that mix keywords and pixel values. That makes for an easy fix: 
  background-position:0px 50px;
fortyseventeen fortyseventeen / 03.Apr.2007 at 05:53pm

Oops, I have those two params backward. You get the idea.

fortyseventeen fortyseventeen / 03.Apr.2007 at 05:59pm
One more bug in archive.liquid, line 4: 
   <h1 class="header">{{ article.published_at | date: "%B %Y" }}</h1>
fortyseventeen fortyseventeen / 04.Apr.2007 at 01:16am

thanks, bug. i’ll add these to svn soon. it looks like i can finally add the comments block to the footer. your site looks great, btw.

todd todd / 09.Apr.2007 at 04:56am

Thanks, well, I owe it to you.

bug bug / 09.Apr.2007 at 05:31pm

two more things…micro renders pretty crappily in IE without these two changes:

in green.css, remove line 12 and add this, starting at 11: 

#custom-doc {
  background-color:#566056;       /* medium grey-green */
}
in single.liquid, move line 1 to the end: 

{% unless mode == 'page' %}
  {% include 'entry' %}
  {% include 'comments' %}
{% else %}
  {% include 'page' %}
{% endunless %}

{% include 'entry_rdf' %}
bug bug / 12.Apr.2007 at 05:45pm

thanks again, bug. i’m finally getting these changes into svn.

todd todd / 27.Jun.2007 at 02:25am

Sorry, comments are closed for this article.

back to top

micro theme by seaofclouds, and powered with Mephisto