Grow your CSS skills. Land your dream job.

[Solved] First WordPress Skin help…

  • # August 9, 2009 at 10:57 pm

    So this is my first foray into the WP skinning game. And I’m figuring it out. But I’m still running into some little issues here and there. Right now, for some reason, the links in my sidebar are not functioning correctly. That is to say, they’re not functioning as a hyperlink. Most times there is no hover at all. Even the Past Articles popup menu isn’t popping up. But the search field seems to be working fine. Anyway, sure could use some help. Thanks in advance.

    Here’s the link. http://www.i9creative.com/blog

    Mickey

    # August 10, 2009 at 2:26 am

    your links in the sidebar don’t have the correct CSS.

    e.g.
    sidebar a
    should be
    sidebar ul li a

    you need to really target the actual link

    think of it like the russian dolls, how can you see & hold what is at the centre if you don’t open each containing doll to get to the correct one???

    # August 10, 2009 at 9:07 am

    Thanks for the reply. I’m pretty sure I understand what you’re saying, and I tried it, but it doesn’t seem to be working. I’ve been using CSS for awhile now, but I still think of myself as an amateur a lot of the time. If you don’t mind, I’d like to show here what I did and see what you think might be the problem.

    Code:
    #sidebar-inside ul li a:link {
    color:#7F4300;
    text-decoration:underline;
    }

    #sidebar-inside ul li a:visited {
    color:#7F4300;
    text-decoration:underline;
    }

    #sidebar-inside ul li a:hover {
    color:#F47B20;
    text-decoration:none;
    }

    #sidebar-inside ul li a:visited:hover {
    color:#F47B20;
    text-decoration:none;
    }

    Also, the thing I don’t understand is that the link should have worked right anyway because the "inside" div was within the "sidebar" div, so it should have inherited the CSS from that, right? Your Russian doll analogy is a good one, but is that how it works for the heirarchy? If I have 3 divs nested inside each other and the first div sets the CSS rules for links, then shouldn’t the nested divs follow suit?

    And this is how it used to look.

    Code:
    #sidebar a:link {
    color:#7F4300;
    text-decoration:underline;
    }

    #sidebar a:visited {
    color:#7F4300;
    text-decoration:underline;
    }

    #sidebar a:hover {
    color:#F47B20;
    text-decoration:none;
    }

    #sidebar a:visited:hover {
    color:#F47B20;
    text-decoration:none;
    }

    Again, thanks for the help. I do appreciate it.

    # August 10, 2009 at 11:20 am

    the heirarchy depends how much you want to just focus in……

    your links should be set up like:

    Code:
    a.nav, a.nav:link, a.nav:visited a.nav:hover a.nav:active

    in that order
    e.g. .nav is a class I used, I just copied the order.

    you can use what is in the heirarchy, but if you want to actuall make the links work, focus in on them

    # August 10, 2009 at 12:31 pm

    I’m not sure why this works, but if you remove

    Code:
    div {
    position:relative;
    }

    from line 13 of layout.css your links will work. If you do need other divs in the layout to still be position:relative; (and you don’t need it in the sidebar) then just apply the position on a per div basis.

    # August 10, 2009 at 1:14 pm

    apostrophe!

    That’s it! We have a winner! :)

    That’s just weird. Yeah, I don’t know why it works, but you nailed it. Thanks!

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".