Hyperlinks are not obvious and visible

resolved (13 posts) (5 voices)

  1. What's up with the way that inFocus displays hyperlinks? Regular text is grey, and hyperlinks are a slightly lighter shade of grey. They are practically invisible to the user unless the user happens to hover the cursor over a hyperlink, in which case it changes from slightly lighter grey to regular grey.

    This is not acceptable.

    I need to put up pages with lots of hyperlinks that my users can actually find, in an obvious way.

    Please tell me there is a setting or a change I can make in the .css code to make obvious hyperlinks. You know, bright blue and underlined, if that's what I want.

    Posted 1 year ago #
  2. Elliott
    Support

    Hello Atlanta Baroque Orchestra,

    Open up /wp-content/themes/infocus/styles/[your_style].css and around lines 14 - 21 you can find the typography styles which are relative to the skin you are using.

    Just change the color code to a darker shade such as #0066CC and if you want your links to be underlined then you can add this to it as well, text-decoration: underline;

    Let us know if this is what you were looking for.

    Posted 1 year ago #
  3. I've never edited a CSS file before, but looking at lines 14-21 in coffee.css I don't see anything familiar.
    My eyedropper tool on an actual page on my site tells me that regular body text is #666666, links are #888888, and hover links are #392E27. In lines 14-21. I don't see any place to change the body text color or the link color or anything that corresponds to that, although I do see the hover link color.

    What I want is body text #313131, link text #009FDD, and hovered links to be the same blue color #009FDD with and underline.

    Is there some other file that I need to edit?

    Here is the original code from lines 14-21 in coffee.css.

    /* ------- 3. Typography ETC ------- */
    #about_the_author img,#footer h3.widgettitle, #footer div.widget li,#sub_footer,#footer p.thanks,table,th,#footer div.widget_categories li a, #footer div.widget_pages li a
    {border-color:#564a41;}
    #footer a:link, #footer a:visited,#footer .textfield, #footer textarea, #footer, #home_feature .slider_full h2, #home_feature .slider_full
    {color:#ddd;}
    .url,#footer a:hover,.contact_widget_email a,.top_metadata a,#blurb p.tweet a,#commentform a,h3.toggle a,.dropcap2,.pullquote_left,.pullquote_right,blockquote,h1,#home_feature h2,h5,.blog_header a,.colored,#secondary .widget_calendar td a,#secondary h3.widgettitle,h3.portfolio a, h2.portfolio a
    {color:#564a41;}
    a:hover,h3.portfolio a:hover,h2.portfolio a:hover,.blog_header a:hover{color:#382F28;}

    Posted 1 year ago #
  4. Do I need rather to edit themes/infocus/style.css under 01. General Typography, lines 83-89?

    /* ------- 2. General ------- */

    body{color:#666;font-size:12px;}
    h1,h2,h3,h4,h5,h6,th,blockquote,.top_metadata,.date,.cancel-comment-reply a,#blurb,.bottom_metadata,span.current_crumb, p.breadcrumb {letter-spacing:1px;font-family:Tahoma,Geneva,Arial,sans-serif;}
    a:link,a:visited,a:hover,a:active,a:focus{text-decoration:none;outline:none;-moz-outline-style:none;}
    a{color:#888;}
    a:hover{color:#aaa;}

    Posted 1 year ago #
  5. Aha. Yes, I figured it out. Congratulations, you just taught me how to edit a .css file.
    Issue resolved.

    Posted 1 year ago #
  6. Elliott
    Support

    Glad you got it sorted out Atlanta Baroque Orchestra, if you have any other questions then let us know.

    Posted 1 year ago #
  7. So, what was the answer? Editing the /themes/infocus/style.css file, or the themes/infocus/styles/[whatever_style].css file?

    I've tried changing values (color and text size) on lines 83-89 in the /themes/infocus/style.css file, but nothing's happening (cleared browser cache, etc.)

    Posted 1 year ago #
  8. Hi KEXINO,
    on line 88 of the "/themes/infocus/style.css" file you can change the default link color:
    a{color:#888;}

    Around line 21 of the "themes/infocus/styles/[whatever_style].css" you can change the color on hover.
    a:hover,h3.portfolio a:hover,h2.portfolio a:hover,.blog_header a:hover{color:#aaa;}

    If you have any other problems, give us a link to your site, so we can check it out.

    Posted 1 year ago #
  9. I'm still having problems changing link, visited and hover colors.

    I'm trying to edit the deep_blue.css file (my chosen style) and the main "style.css" file. I want to give a more obvious link color, and embolden all link text. However, I don't want these colors for link and hover text in the footer.

    In the main "style.css" file I tried changing line 88 to:
    a{color:#f18206;font-weight:bold}

    In "deep_blue.css" i changed line 20 to:
    a:hover,h3.portfolio a:hover,h2.portfolio a:hover,.blog_header a:hover{color:#62b3ff;font-weight:bold}

    But nothing's happening. I've turned my CDN off, cleared browser cache, etc. but I still have the previous font color and hover settings.

    I'm probably overlooking something really obvious, but I know nothing about CSS.

    Posted 1 year ago #
  10. Hi kexino,
    It looks like your site is not loading style.css or deep_blue.css but instead a minified file that contains both css:
    http://kexino.com/wp-content/w3tc/min/b6a674/default.include.1675443467.css

    Are you using some kind of plugin that minifies the css files?

    Posted 1 year ago #
  11. Yes! I'm using W3 Total Cache. Thanks for your help.

    I've disabled the plugin (and can see my changes) but I'm getting emboldened text in main navigation menus as well as in the footer. How do I restrict it to just the text in pages and posts?

    Posted 1 year ago #
  12. Ruderic
    Support

    Hi,

    You have to add this CSS code:

    #header a, #footer a { font-weight: normal; }

    Try that and let us know the results.

    Posted 1 year ago #
  13. Perfect. That works.

    Thanks again.

    Posted 1 year ago #

Reply

You must log in to post.

Construct WordPress Theme
Construct wordpress theme
Myriad WordPress Theme
Myriad wordpress theme
Method WordPress Theme
Method wordpress theme
Fusion WordPress Theme
Fusion wordpress theme
Elegance WordPress Theme
Elegance wordpress theme
Echelon WordPress Theme
Echelon wordpress theme
Dejavu WordPress Theme
Dejavu wordpress theme
Modular WordPress Theme
Modular wordpress theme