Lesson: Rollover Links (9 posts)

  1. Lorelle
    Posted 11 years ago #

    A lot of people like designing their links to "react" when the mouse moves over the link. Many Themes are designed to have some kind of such reaction. This is called "hover".

    In your style.css file, you will find many link designs. Let's just change the look of the ones in the sidebar menu.

    Look for the link designs in your sidebar menu, commonly set as something like this:

    #menu a

    You should see that one plus one that says:

    #menu a:hover

    That's the one we want to work on.

    For our example, let's say that the link underlines itself when hovered over. It would look like this:

    #menu a:hover {text-decoration:underline;}

    What if you want it to change color (say it is black right now) to red and have a blue border on the top and bottom. Change it to:

    #menu a:hover {text-decoration:none; color: red; border-top: solid 1px blue; border-bottom: solid 1px blue;}

    Is that cool? You can use your imagination and do whatever you want from there. Suggestions on some fun link hovers?

    Here are a bunch of resources for creating different kinds of links:
    Jakob Nielsen's Alertbox: Change the Color of Visited Links
    Jakob Nielsen's Alertbox: Guide for Visualizing Links
    Accessify's List-o-Matic - Link List Wizard
    Links: No Underline
    The impact of links and link text on search engine placement
    Colly Logic's Question Time: Visited Links
    Should visited links get distinctive styling?
    Same Link - Different Colors
    Desilva's CSS Links
    CSS and the Amazing Technicolor Anchors
    Cascading Style Sheets Interactive Tutorial for Beginners - Links
    HTMLSource: Basic Links
    W3 Schools: HTML Links
    Simon Willison's Weblog: Fun With Links
    WebDevRes: Link Colors by Section
    Westciv's Complete CSS Guide: Link Pseudo Class Selectors
    Jessett.com's Link Styles
    Spoono's Link Designs
    Kali's Web Shoppe Text and Link Rollovers
    About.com's Web Design: Styling Links with CSS
    eei.press's It's All In The Links: Readying Publications for the Web
    Links Want to Be Links
    The Search for the Missing Link
    Websitetips' CSS and Links

  2. Lorelle
    Posted 11 years ago #

    One of the challenges that I would love to see, and I know it is asking a lot but I'm sure it can be done, is to have the categories highlighted when you are in that category.

    How would that be done in WordPress? Anyone?

  3. Jinsan
    Posted 11 years ago #

    How do you mean Lorelle, can you describe what you're trying to achieve?

  4. Root
    Posted 11 years ago #

    In CSS 2 any element can be hovered. Doesnt work in Ie of course. Could be cool but from the accessibility / expectation standpoint it would be very different and suprising to the user. Still all you need do is identify the cat selector and off you go.

  5. Jinsan
    Posted 11 years ago #

    And how do you do you add the category selector to the content? I think lorelle sor tof explains it, but you have the styling for your category, but how do you apply to each individual category and where do you apply it?

  6. Root
    Posted 11 years ago #

    Well the cat selector is in the content already with a dynamically produced id. To my knowledge it is not in the CSS but is easy to add. Apply in style.css in the usual way. Is this link cats you are interested in or post cats ?. Both can be fixed up .Just clarify what you need and I will post the code.

  7. Lorelle
    Posted 11 years ago #

    Okay, this is the clarification. With CSS, you can set the styles in a menu, categories in this example. So we have a list that says (without the php for now):

    <div class="nav">
    <ul><li><a href="fred.php">Fred</a></li>
    <li class="active"><a href="alice.php">Alice</a></li>
    <li><a href="sally.php">Sally</a></li>

    When you are styling CSS in static html, you can manually add class="active" to any specific LI item. The style "active" highlights that list item different than the other items in the list. This way we would automatically know that we are reading a post in the Alice category.

    What is being requested (by others, not just me) is a way to set the class="active" based upon the category because we aren't creating static pages now but dynamic pages. So there needs to be some kind of a php code that says:

    IF category=1, then $active = "active", IF category=2, then $active = "active"....ELSE no nothing.

    And then the list would look something like this (I don't know PHP very well so I'm faking it for clarification):

    <div class="nav">
    <li class="<?php $active ?>"><a href="fred.php">Fred</a></li>
    <li class="<?php $active ?>"><a href="alice.php">Alice</a></li>
    <li class="<?php $active ?>"><a href="sally.php">Sally</a></li>

    If the code worked, $active would become active if the category was being visited at that time.

    Does this make sense?

  8. janit
    Posted 11 years ago #

    I'm also missing the ' class="selected" ' -functionality for list_pages()... Any news on this one?

  9. Lorelle
    Posted 11 years ago #

    There currently is no such feature on this.

    Maybe soon.

Topic Closed

This topic has been closed to new replies.

About this Topic