CSS Laundry List

7 March 2006, 09:01

The time has come to dive deeply into CSS, XHTML, standards, doctypes, validation…again! I’ve produced a laundry list of embellishments I’d like to make to this website. Most stem from a suggestion or request from readers.

You’ve read here many times that I have a mental block when it comes to spanning the connections between a tag in a template, XHTML in an article and the CSS that styles both. A simple example is in order. Styling Links

What you’re looking at when you click on the thumbnail is a section of my home page. You’re seeing the tags from the Web Developer Toolbar (for Firefox) produced by Chris Pederick. The challenge for me is understanding how to observe that image and go into the stylesheet for the page and make appropriate changes to alter the way links appear within articles.

Please understand—I don’t want to alter the way a link appears in the navbar, in the titles of articles, in the sidebar or anywhere else on the page. I do however want to style the links within an article differently from their existing (obscure) styling.

I know people who see this, visualize the change, find the appropriate selector and change it in less than 30 seconds. For me, this will amount to a half day of trial-and-error digging, research, reading and tedium. That’s the frustrating part about not being a designer with deep skills in web development.

Filed under:

  1. Even the attempt to use Textpattern’s image handling features to post a thumbnail that pops up a larger image is a challenge. I wanted a pop-up—not a link that navigates you away from the site. So much to learn.


    — steve    7 March 2006, 09:06    #

  2. Try this:

    div#main-content div.entry p a {

    /* Enter some new link formatting for articles after this. Example: */ color: red
    }
    — Mike    7 March 2006, 10:41    #

  3. Assuming that works just fine, you can do some fancy “hover” styling:

    div#main-content div.entry p a:hover {
    /* Enter some fancy “hover” styling for links in articles articles after this comment. Example: */

    background: red; color: white;
    }
    — Mike    7 March 2006, 10:45    #

  4. Stuart is proving to be of great help in the Textpattern forum. As it turns out, there is no div or id for what I want to style independent of other links.

    Now we’re dealing with Textpattern’s tags, pages, forms and stylesheet to solve the problem. Stay tuned for more!

    Oh, and Mike, thanks for the suggestions. If I had the right div or id already specified, your ideas would work.


    — steve    7 March 2006, 14:19    #

  5. All squared away with a simple and subtle change to the way links appear in the articles (posts) of this web site. I owe Stuart an enormous thank you for the help he provided today in the Textpattern Support Forum.


    — steve    7 March 2006, 18:22    #

  6. You’re welcome, any time.

    The TxP Forums are very helpful.
    By the way, the TxP FAQs are excellent, and are updated often.

    Let me know if I can help sometime in the future.


    — Mike    8 March 2006, 10:45    #

 ||