WordPress.org

1. shawncbarry
   Member
   Posted 2 years ago #
   

   I've been changing the layout of my site - I revised the CSS style sheet where necessary and all went well. All, but the links. All of my hyperlink text entries are 6 or 8 pixel type (approximately), and a terrible blue and purple colour. Hard to read and don't fit the design revisions. However, I've been going through the style.css now for an accumulated 18 hours over a few days making changes to everything I could find related to hyperlink text, and no matter what I do, nothing changes. Everything else was changed just fine.

   Is there some other file that controls hyperlink text? I'm at the limit of my wits on this. Please help.

   Shawn

2. alchymyth
   The Sweeper & Moderator
   Posted 2 years ago #
   

   try and use a tool such as firebug or firefox web developer add-on to investigate the styles of your site.

   or
   post a link to your site, and point to the links in qhestion.

   someone might be able to make a suggestion what styles to change or to add.

3. shawncbarry
   Member
   Posted 2 years ago #
   

   I'll give Firebug a try, but I'm a graphic designer, not a developer so I'm savvy, but not knowledgable about what I see in code. I would happily post a link to my site, but it would be "content inappropriate", so though frustrating, posting broad questions is my only option.

   Thanks for the suggestion. Any tips on Firebug functionality - what feature should I use to identify the CSS code affecting an element?

4. alchymyth
   The Sweeper & Moderator
   Posted 2 years ago #
   

   it would be "content inappropriate",

   if you mark the post/thread/reply with NSFW ( http://codex.wordpress.org/Forum_Welcome#Warn_About_Adult_Content ) then this should be no problem.

5. shawncbarry
   Member
   Posted 2 years ago #
   

   Thanks - that's very helpful to know. It's an adult website, and here's the site URL:

   NSFW - Adult Content Warning

   http://www.fuck-tastic.com

   The issue is the small blue and purple link text "Enter..." and "Leave...", and the subsequent text links that appear at the bottom of each page. Most of my links are graphic based, but I want to be able to control the hyperlinks as well. I'm baffled about what's controlling the size and color aspects of the type.

6. alchymyth
   The Sweeper & Moderator
   Posted 2 years ago #
   

   the links 'enter...' and 'leave ...' for instance have inline styles.

   however, you might be able to overwrite this all by adding some styles like these at the end of style.css of your theme (forcing the styles by using !important in each style):

   http://pastebin.com/wj9gXYzn

   use your own color codes and text-decorations, and font-sizes

   (the use of !important before the semicolon of each format forces these styles)

   http://www.w3schools.com/css/css_link.asp

7. shawncbarry
   Member
   Posted 2 years ago #
   

   Thanks Alchymyth. That got me most of the way there, but not all the way. Somewhere, there's still some code overwriting even the forced "!important" code. My post thumbnail links (copy above the pictures on the "Memebers" page and the contact links at the bottom of each page are still somehow being forced into small blue and purple copy elements. And, though I could change the colour of the "Enter..." and "Leave..." links on my landing page, the size still didn't change despite the "!important" code describing it as larger.

   Any thoughts?

8. alchymyth
   The Sweeper & Moderator
   Posted 2 years ago #
   

   one small thing:

   there is a backtick character before /*'enter...' links */ which is wrong and needs removed (probably my mistake with copy/paste to the pastebin.)
   that should take care of the 'enter..' link size.

   there is another backtick directly after
   

   .mgm_aff_link a:hover
   { color:#ccc!important; text-decoration: none; }

   which better needs to be removed as well.

   the links above the thumbs:
   

   .archive-header a
   { color:#ffc20e!important; font-size:16px!important; text-decoration: none; }
   
   .archive-header a:visited
   { color:#ffc20e!important; font-size:16px!important; }
   
   .archive-header a:hover
   { color:#ffc20e!important; font-size:16px!important; text-decoration: none; }

   and probably:

   .navigation a { color:#ffc20e!important; font-size:16px!important; text-decoration: none; }

9. shawncbarry
   Member
   Posted 2 years ago #
   

   That did the trick. Can't thank you enough.

   Thanks, man...
   Shawn

Topic Closed

This topic has been closed to new replies.