15 {{ upvoteCount | shortNum }}
15 {{ upvoteCount | shortNum }}

SOLVED! Help with link color in WP theme

by sylviad
13 replies
  • WEB DESIGN
    • |
Hi,

The theme I'm using on my blog turns the links dark gray in the right-hand widgets. The top widget, on the other hand, makes them automatically the typical blue.

I've looked through the templates that make sense, but can't figure out where to change the side widget link color.

The blog is Dog Talk Blog. The theme is 2010 Weaver.

Can you help, please?

Thanks.

Sylvia
#color #link #theme
  • Profile picture of the author Michael71
    style-weaver.css line 114+

    Code:
    #primary a:link, #secondary a:link, #altleft a:link, #altright a:link, #footer-widget-area a:link {color: #474134;}
#primary a:hover, #secondary a:hover, #altleft a:hover, #altright a:hover, #footer-widget-area a:hover {color: #C91640;}
#primary a:visited, #secondary a:visited, #altleft a:visited, #altright a:visited, #footer-widget-area a:visited {color: #706752;}
    Signature

    HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
    ---
    Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

    {{ DiscussionBoard.errors[8110755].message }}
    • Profile picture of the author sylviad
      Originally Posted by Michael71 View Post

      style-weaver.css line 114+

      Code:
      #primary a:link, #secondary a:link, #altleft a:link, #altright a:link, #footer-widget-area a:link {color: #474134;}
#primary a:hover, #secondary a:hover, #altleft a:hover, #altright a:hover, #footer-widget-area a:hover {color: #C91640;}
#primary a:visited, #secondary a:visited, #altleft a:visited, #altright a:visited, #footer-widget-area a:visited {color: #706752;}
      Thank you, Michael. Could you give me a wee bit more? I don't see a style-weaver css in the blog's edit theme section, plus it doesn't show line numbers. I'm not a programmer/designer as such. I only know a bit.

      the page I'm looking at shows: Stylesheet (style.css)
      Is it in there? I can't seem to see it.

      Sylvia
      Signature
      :: Got a dog? Visit my blog. Dog Talk Weekly
      :: Writing, Audio Transcription Services? - Award-winning Journalist is taking new projects. Warrior Discounts!
      {{ DiscussionBoard.errors[8110779].message }}
  • Profile picture of the author CalcoMedia
    Hi Sylvia

    If you want to change only the color of links into the top widget, edit the style.css and search the following:

    .widget-area a:link {

    Inside this sentence you have only:
    text-decoration: none;

    Add another sentence under that with:
    color: #XXXXX;

    Change the XXX with the color hex code.

    Hope this solve your problem!
    {{ DiscussionBoard.errors[8110819].message }}
    • Profile picture of the author sylviad
      Thank you CalcoMedia,

      Actually it's the side widgets I want to change. The top one seems to work just fine - automatically giving the links the proper blue color.

      The side widget makes them gray which are basically invisible, you can't tell it's a link.

      then I need to know the color of a blue link - the HEX number???

      In one of the blog posts that shows the blue link, the HTML shows this before the link:

      <span style="color: #ff0000;"> What color would THAT be? it doesn't make sense to me. I think with all the 0000s that's either black or white, is it not? Shouldn't blue have another number in there?


      Sylvia
      Signature
      :: Got a dog? Visit my blog. Dog Talk Weekly
      :: Writing, Audio Transcription Services? - Award-winning Journalist is taking new projects. Warrior Discounts!
      {{ DiscussionBoard.errors[8110854].message }}
    • Profile picture of the author sylviad
      Originally Posted by CalcoMedia View Post

      Hi Sylvia

      If you want to change only the color of links into the top widget, edit the style.css and search the following:

      .widget-area a:link {

      Inside this sentence you have only:
      text-decoration: none;

      Add another sentence under that with:
      color: #XXXXX;

      Change the XXX with the color hex code.

      Hope this solve your problem!
      Ok. Here's what I did...

      }
      .widget-area a:link, {
      color: #ff0000;
      }

      (That's the color number that shows in HTML for a post with the blue link)

      The side widget link text still only shows as gray.

      Is there some other setting that over-rides this widget-area a:link setting?

      Sylvia
      Signature
      :: Got a dog? Visit my blog. Dog Talk Weekly
      :: Writing, Audio Transcription Services? - Award-winning Journalist is taking new projects. Warrior Discounts!
      {{ DiscussionBoard.errors[8110875].message }}
  • Profile picture of the author CalcoMedia
    Ok, sorry...

    So you want the links into the side widget in blue like in the top one?

    You have to search the style-weaver.css but you said you only view the style.css, we can solve the issue using a trick, it´s not the best way but it should work.

    Go to style.css and search the same sentence as before,

    .widget-area a:link {

    Add under text-decoration:none; a new sentence like this:

    color: rgb (13, 5, 252) !important;

    With this (copy the entire sentence), all links in widgets will be blue.

    Hope this solve your issue!


    rgb (13, 5 ,252) is the same as #0d05fc, first is write in RGB color mode, the second into HEX mode.
    {{ DiscussionBoard.errors[8110878].message }}
    • Profile picture of the author sylviad
      Hi,

      I don't have a style-weaver.css. Here are all the templates listed:

      Templates

      2 Col Content (split w/ <!--more-->) Page Template
      (page-multicolcontent.php)
      2010functions.php
      (2010functions.php)
      404 Template
      (404.php)
      Alternative sidebar, left Page Template
      (page-altleft.php)
      Alternative sidebar, right Page Template
      (page-altright.php)
      Archives
      (archive.php)
      Attachment Template
      (attachment.php)
      Author Template
      (author.php)
      Blank - (see Adv Opts admin) Page Template
      (page-wrapperonly.php)
      Category Template
      (category.php)
      Comments
      (comments.php)
      Custom Header (see Adv Opts admin) Page Template
      (page-customheader.php)
      Footer
      (footer.php)
      Header
      (header.php)
      Main Index Template
      (index.php)
      One column, iframe full width Page Template
      (page-onecolumniframe.php)
      One column, no sidebar Page Template
      (onecolumn-page.php)
      Page Template
      (page.php)
      Search Results
      (search.php)
      Sidebar
      (sidebar.php)
      Single Post
      (single.php)
      Tag Template
      (tag.php)
      Theme Functions
      (functions.php)
      footer-blank.php
      (footer-blank.php)
      header-blank.php
      (header-blank.php)
      header-custom.php
      (header-custom.php)
      loop.php
      (loop.php)
      sidebar-altleft.php
      (sidebar-altleft.php)
      sidebar-altright.php
      (sidebar-altright.php)
      sidebar-footer.php
      (sidebar-footer.php)
      ttw-admin.php
      (ttw-admin.php)
      ttw-advancedopts.php
      (ttw-advancedopts.php)
      ttw-generatecss.php
      (ttw-generatecss.php)
      ttw-globals.php
      (ttw-globals.php)
      ttw-help.php
      (ttw-help.php)
      ttw-settings.php
      (ttw-settings.php)
      ttw-subthemes.php
      (ttw-subthemes.php)
      ttw-utils.php
      (ttw-utils.php)
      ttw-widgets.php
      (ttw-widgets.php)
      ttw-wphead.php
      (ttw-wphead.php)

      Styles

      RTL Stylesheet
      (rtl.css)
      Stylesheet
      (style.css)
      Visual Editor Stylesheet
      (editor-style.css)
      editor-style-rtl.css
      (editor-style-rtl.css)
      style-twentyten-header.css
      (style-twentyten-header.css)
      ttw-admin-style.css
      (ttw-admin-style.css)

      I've already gone through the style.css and made two changes where I see active: or a: link but it made no difference.

      Also checked ttw-widgets, sidebar.php and sidebar-altright, Alternate sidebar right Page Template, and changed link color wherever I could.

      Do you see a page that qualifies for the change?

      Thanks.

      Sylvia
      Signature
      :: Got a dog? Visit my blog. Dog Talk Weekly
      :: Writing, Audio Transcription Services? - Award-winning Journalist is taking new projects. Warrior Discounts!
      {{ DiscussionBoard.errors[8110995].message }}
  • Profile picture of the author Michael71
    No need to use rgb... just use hex code.
    Signature

    HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
    ---
    Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

    {{ DiscussionBoard.errors[8110991].message }}
    • Profile picture of the author CalcoMedia
      Why not?, you can use whatever you want...

      And, if you use the element inspector in Firefox the colors are shown with RGB mode, so, why not?

      Originally Posted by Michael71 View Post

      No need to use rgb... just use hex code.
      Sylvia, do you put !important after the color?

      If you use the !important it will overwrite all other styles..

      Remember:

      color: #0d05fc !important;

      Inside .widget-area a:link
      {{ DiscussionBoard.errors[8111002].message }}
  • Profile picture of the author David V
    The stylesheet it's coming from is located here:
    dogtalkweekly.com/dogblog/wp-content/uploads/weaver-subthemes/style-weaver.css
    However, this is being dynamically generated.... as indicated by this:

    /* WARNING: Do not edit this file. It is dynamically generated. Any edits you make will be overwritten. */
    /* This file generated using 2010 Weaver V1.5.4 subtheme: My Saved Theme */
    /* General Options */

    ....which means
    the ability to change those link colors is in your theme options panel most likely.

    Weaver Admin Panel
    {{ DiscussionBoard.errors[8111022].message }}
    • Profile picture of the author sylviad
      Originally Posted by David V View Post

      The stylesheet it's coming from is located here:
      dogtalkweekly.com/dogblog/wp-content/uploads/weaver-subthemes/style-weaver.css
      However, this is being dynamically generated.... as indicated by this:

      /* WARNING: Do not edit this file. It is dynamically generated. Any edits you make will be overwritten. */
      /* This file generated using 2010 Weaver V1.5.4 subtheme: My Saved Theme */
      /* General Options */

      ....which means
      the ability to change those link colors is in your theme options panel most likely.

      Weaver Admin Panel
      GAWD... Do I feel stoopid!

      In the Appearance drop-down, there's another option for Weaver 2010. In there. I can simply go through all the different color schemes and change as I like.

      It's done... and it's exactly what i wanted.

      Thank you all, and especially you, David. I think I just fell in love. You pointed me in the right direction. I was about to give up. I'd spent probably 3 hours trying to figure this out and it was staring me in the face all the time. Duh! :rolleyes:

      thank you.

      Sylvia
      Signature
      :: Got a dog? Visit my blog. Dog Talk Weekly
      :: Writing, Audio Transcription Services? - Award-winning Journalist is taking new projects. Warrior Discounts!
      {{ DiscussionBoard.errors[8111051].message }}
  • Profile picture of the author David V
    We all have dah! moments
    {{ DiscussionBoard.errors[8111061].message }}

Trending Topics