Support » Themes and Templates » Lesson: Styling the postmetadata section

Viewing 6 replies - 1 through 6 (of 6 total)
  • Lorelle if you use float in conjunction with margins and padding you are going to get into all kinds of difficulties with the IE / FF conundrum and I really cannot advise it at all. Also – I personally avoid class names and such with spaces in them. Spaces are a windows thing but they are erratic and best avoided. IMHO.

    Oh, the space between postmetadata and alt – hee hee – that’s not a “space” as in the name. You can assign more than one class to anything. Even three if you are seriously willing to experiment. For instance, when I want to align an image (graphic/photograph) to the left or right and have the text wrap around it, I add the class “right” or “left” to the image with the CSS that says:

    .right {float:right}
    .left {float:left}

    On occassion I want a border around a photograph to highlight it or separate it from the rest of the content. I have another class called “borderimg” and it looks like:

    .borderimg {padding:5px; border: solid 1px black; }

    When I want to align an image to the right AND add a border the class looks like this:

    <img scr="image.jpg" class="right borderimg">

    It doesn’t mean I’m calling a class with a space in the name, I’m calling two classes. The W3c reference for using mulitple classes will help you understand this maybe better than I can:

    class = cdata-list:
    This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.

    As for the float, using the float doesn’t automatically mean there will be problems with MSIE or Firefox. It means there is a potential if the overall structure isn’t set up well to begin with. A float is a normal function of CSS layout and people shouldn’t avoid it because of the potential for problems. Many WordPress Themes use floats. I use them all the time and only rarely have to fight with some of the problems, like when there is a list next to a float. But once I imply the fix, (usually the Holly Hack does it for me), I stop thinking about it because it is “all fixed up.”

    Experiment – have some fun – pull your hair out with grief and agony – then turn around and face your family and all of the personal problems you deal with every day and you’ll be glad of the distraction that web page design brings….;-)

    Well the problem with that is that in accordance with the W3C rec it is necessary to define the width of the floated element, in your example 25%. If you then add 5px of padding and margin on both sides it will inevitably cause distortion in one or other browsers.It is true that a number of hacks are then possible for those experienced enough to do it. Personally I do not like them because they are ugly.
    Nevertheless the code you set out is virtually guaranteed to bork cross platform.
    I can’t recommend it and I stand by my advice for the benefit of other readers.

    Now that this is off your chest, how about a design or two of your own for this postmetadata section? What would be a pretty but maybe different layout?

    Design I don’t do 🙂
    Incidentally manji has some very pretty post meta styling. IMHO.

    How about this as an idea:

    .postmetadata {position:relative; padding:5px; width: 95%; border-top: solid 10px purple; font-size: 80%; color: navy; background: white; font-variant: small-caps; text-transform: capitalize;}

    This example puts the postmetadata in the top of the sidebar menu highlighted with a very thick top purple border, navy colored text that is capitalized but also in small caps which forces the first letter of every word to be capitalized but the whole thing is capitalized with the first letter being a little larger than the other caps.

    Now, I want to put this into a better sentence so it looks like a paragraph of information.

    <p class="postmetadata alt">We write about a lot of subjects and this article covers topics such as <?php the_category(' and ') ?>. "<?php the_title() ?>" was written on what I think was a <?php the_time('l'); ?>, but I know it was the <?php the_time('jS'); ?> day in the month of <?php the_time('F'); ?> in the year of <?php the_time('Y'); ?>, though I messed around with this on the <?php last_modified('dS'); ?> day of <?php the_time('F'); ?> in <?php the_time('Y'); ?>, a not-so-busy <?php the_time('l'); ?> when I had nothing better to do.</p>

    Which would result in:

    We write about a lot of subjects and this article covers topics such as Learning and Photography Techniques and Composition. “Composing Your Nature Photographs” was written on what I think was a Tuesday, but I know it was the 15th day in the month of February in the year of 2005, though I messed around with this on the 10th day of February in 2005, a not-so-busy Tuesday when I had nothing better to do.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Lesson: Styling the postmetadata section’ is closed to new replies.