Help - Search - Members - Calendar
Full Version: Different p class for first graf
Movable Type Community Forum > Additional Resources > Tips and Tricks
sharding
Is there any supported way to style the first paragraph of each entry differently from the rest (e.g. give the first paragraph one CSS class and the rest another)?

I'm sure I could do this by changing the code, but I'd really rather avoid that. I don't want to get into a situation where I'm having to port my local changes into every update when I install it.
adamrice
Yes, it's possible, and yes, you do want to avoid it.

In my own blog, I've modified the templates so that entry titles are tagged as <h3>. I wanted the body text to follow without a big break. Here's how.

CODE
    #content h3 {
 color: black;
 font-weight:bold;
 font-size:1em;
       padding:0px;
 margin:0px;
 margin-bottom:2px;
 }


    h3:first-child {
    padding-top:0px;
    margin-top:0px;
    }


Obviously you'll want to make a few changes, but this'll get you started. It's that ":first-child" pseudo-class that does the trick.
kadyellebee
Well, you could put the formatting change into your entries like this:
CODE
this is the first paragraph, entered in the Entry screen...
</p>
<p class="second">
and here is the second paragraph.  by default, the convert breaks will close this P tag for you when you are done with the entry.


Or, you could use the Extended Entry section for anything beyond the first paragraph, and then code in your template like this:
CODE
<$MTEntryBody$>
<MTEntryIfExtended>
<div class="second"><$MTEntryMore$></div>
</MTEntryIfExtended>


Hope that helps get you started smile.gif

Kristine
kadyellebee
Sorry, Adam and I posted at the same time.

I'm curious now --- I thought that first-child wasn't very supported by browsers yet?  I don't think that Internet Explorer supports it at all, and only newer versions of Netscape.  I'd have to look it up to know that for sure, though.

Kristine
phidauex
Yeah, :first-child selectors aren't supported at all in IE for windows, are supported in IE5 for mac, and all Gecko browsers (meaning mozilla, and Netscape 6+). This is a #### shame, because :first-child, :first-line, :first-letter, :before, and :after could be very useful! Oh well, another fine design idea, bitterly murdered by the browser abomination that is IE/Win...

peace,
sam
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.