Grow your CSS skills. Land your dream job.

[Solved] change link opacity

  • # September 21, 2013 at 6:11 am

    something very simple that I can’t seem to work out.

    On http://www.creativemms.com.au/verve/ I have changed the sidebar links to have an opacity of 0.7.

    I want to try and make it so when a link is clicked, the opacity changes to 0.9 only on that selected link. The rest of the links need to stay at 0.7.

    Thanks in advance.

    # September 21, 2013 at 6:17 am

    Click functions require Javascript…are you comfortable with that?

    Plus…what do you mean by stay that color?

    Do you mean that the :visited state should reflect that the link has already been used OR that the link should have the changed opacity ON THE PAGE BEING REFERENCED.

    # September 21, 2013 at 6:24 am

    Do you want the link to stay at 0.9 after it’s clicked? Or only at the moment when you click it?

    As for the opacity: you’ve set it on the whole #sf-menu ul, but you should set it to #sf-menu ul li a.

    # September 21, 2013 at 6:25 am

    So on this site for example.

    http://yokedesign.com.au/about/

    If you click about. The about link color is is full opacity and the rest of the links in the navbar are at a lower opacity.

    # September 21, 2013 at 6:29 am

    the link should have the changed opacity ON THE PAGE BEING REFERENCED.

    Basically this then….

    OK. I think there is a WP setting for the current page link isn’t there?

    # September 21, 2013 at 6:35 am

    It’s a little complicated the way I have done it. I have made it so each page the links are different colors.

    So going by each page I’ve got:

    .page-id-48 #sf-menu ul li a { font-size: 30px !important; color: #4ede49; }

    So the menu font color is different for each page.

    So basically I have made it so all the links opacity is 0.7 but when a link is selected and you are on that current links page, the link needs to be 0.9 while the rest stay at 0.7.

    Sorry hope that made sense.

    # September 21, 2013 at 9:14 am

    So going by each page I’ve got:

    .page-id-48 #sf-menu ul li a { font-size: 30px !important; color: #4ede49; }

    So the menu font color is different for each page.

    You dont need to do that for each page, cause you can target the current page menu items (on any page) easily with this:

    #sf-menu ul li.current-menu-item a {
        /* ...(your styles here)... */
    }
    
Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

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