Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] change link opacity

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #150839
    danielc2384
    Participant

    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.

    #150842
    Paulie_D
    Member

    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.

    #150844
    Senff
    Participant

    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.

    #150845
    danielc2384
    Participant

    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.

    #150846
    Paulie_D
    Member

    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?

    #150847
    danielc2384
    Participant

    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.

    #150860
    Senff
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.