Home Forums Weaver Xtreme Theme Footer Link Colors

Topic Resolution: Answered

This topic contains 12 replies, has 2 voices, and was last updated by  GR8FL 2 months ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #59591
    Answered

    GR8FL
    Participant

    I have the footer link set in Footer area, but it’s not showing up as the color I set. Only the hover color is showing up when I hover.

    http://demo.littledropup.com/

    #59601

    scrambler
    Moderator

    I don’t see any link in the footer area other than the phone number which you had found a way to style a while back, and the menu, which getsĀ  its style from the extra menu styling

    #59655

    GR8FL
    Participant

    I put some actual links in the footer.

    Say I wanted what’s on the right to show a link color, but not on the left (want to to remain the same as the text color). Is this possible to do?

    #59659

    scrambler
    Moderator

    Right now all footer links are set to

    Hover #faf0af (beige)

    Focus #0370ff (blue)

    If you want different colors for link hover and focus left and right, add a class to your divs and use that class in your rule.

    For example, add class=”myleft” to the left div and class=”myright” to the right div, then use rule like below

    #colophon .myleft a:hover {color:yellow;}

    #colophon .myleft a:focus {color:red;}

     

     

    #59685

    GR8FL
    Participant

    I want to do the footer links in a different way using footer widgets.

    Looking at the same site: http://demo.littledropup.com/, how would I have link colors different for footer widget 1 from footer widget 2?

    Also, how do I have the 2nd footer align in the middle, and the 3rd one align right? I thought I defined it correctly in the footer widget area. 3 columns and using 30,40,30; as my custom widget widths. I tried to follow here > https://guide.weavertheme.com/widget-area-layouts/, but did not understand.

    Thank you.

    #59689

    scrambler
    Moderator

    Selector for these widgets would be

    #footer-widget-area .widget-1
    #footer-widget-area .widget-2
    #footer-widget-area .widget-3

    To align the content of the widget use the same selectors and the rule {text-align:center;} or {text-align:right}

    #59691

    GR8FL
    Participant

    how would I set the color?

    #footer-widget-area.widget-3 a:focus {color:#C6E2FF;} doesn’t seem to work.

    #59693

    scrambler
    Moderator

    You need a space between the two selectors….

    And where did you put the rule?

    #59694

    GR8FL
    Participant

    I put this #footer-widget-area .widget-3 a:focus {color:#C6E2FF;} in the main CSS area.

    #59696

    scrambler
    Moderator

    The focus rule is working and showing the right color.

    You have not changed the hover though

    #59705

    GR8FL
    Participant

    I changed the hover which works fine. But I want link to show as that color when looking at the footer. I don’t want it to be white. I even took out the color for the links and hover in the footer area — but that just took out colors, so I put it back.

    #59707
    Best Answer

    scrambler
    Moderator

    This reply has been accepted as the best answer.

    You have not set the base color…

    #footer-widget-area .widget-3 a {color:#C6E2FF;}

    There are up to 5 styling for a link

    https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_links

    I believe the one named a:link is the same asĀ  just a

    And if they all use the same color, you can just use one rule with all the selectors

    #footer-widget-area .widget-3 a,
    #footer-widget-area .widget-3 a:hover,
    #footer-widget-area .widget-3 a:focus {color:#C6E2FF;}

    #59712

    GR8FL
    Participant

    the base color!

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

You must be logged in to reply to this topic.