formatting font-weight of links in my sidebar

  • Unknown's avatar
    thesacredpath · Member ·

    First off, #666666 color is going to be a medium dark grey.

    The menu (page nav) color would be here:

    #pagenav a {
color: #EEEEEE;
}

    For the site title:

    h1.site-title a {
color: #EEEEEE !important;
}

    The follow links are bold for me, just like the other links in the sidebar. Did you get that figured out?

  • Unknown's avatar
    cuplet · Member ·

    Ok, that makes sense. I already had #pagevnav a set to #EEEEEE but it wasn’t working. I’ve added !important, and now its fixed! And your site title code worked too. Thanks!

    Thanks for the feedback on my follow me links. I think I remember now that the links don’t appear bold on my work pc – I must have an older version of chrome on this PC than I have on my laptop at home – as all the links were working fine last night. They also appear with an underline on my work PC, rather than no text decoration until you hover over them. That might be for the same reason. I’ll be able to check on that when I get home in 8 hours or so :)

    Have noticed that the bullets for the RSS, Archive and Recent Posts links are still #666666 until you hover over them, when they turn purple. Any way I can make these purple all the time? Sorry, I must be coming across as really picky, but I’m quite OCD and I’d like to sort out all my little snags before I go live! You super awesome guys will be sick of me by the middle of the week! All your help over the last couple of weeks have been so appreciated though!

  • Unknown's avatar
    thesacredpath · Member ·

    The bullets are actually images, so you can replace the relative URL for the grey (non-hover) with the absolute URL for the purple (hover) as below and include the ” !important ” to make sure it overrides the purple stylesheet.

    .widget ul li a:link, .widget ul li a:visited {
background: url("http://s0.wp.com/wp-content/themes/pub/bueno/styles/purple/bullet_hover.png?m=1391150862i") no-repeat scroll 10px 12px transparent !important;
}

    Most likely the issue with the differences in browser has to do with the order that the CSS is loaded not being picked up by some browsers. I would recommend on anything that is not getting picked up that you add the !important attribute.

  • Unknown's avatar
    cuplet · Member ·

    I think i’m getting somewhere with this now :) Thanks for all your help! I’m asking advice in how to display my .txt, file in my post “Code Runner”. I have the three options in there right now, which do you prefer? The sourcecode shortcode option, the Scribd insert option, or the link to the Scribd to open in a new window? I’m taking a poll… :)

  • Unknown's avatar
    cuplet · Member ·

    ok now i’m home i can see how the changes above have worked. two small problems to try to solve as a result:

    1. I have some small purple marks beneath the third character of each link in the live twitter feed on my sidebar. these weren’t here before the text styling we did yesterday.

    2. As a result of the text styling, the links at the top of my website in the admin bar are now purple (#3B0….) which is making them difficult to read. I want to change these both back to #EEEEEE, and I think this them from the Bueno source sheet:

    <li id=”wp-admin-bar-blog” class=”menupop”>
    A Slice of Cuplet

    <li id=”wp-admin-bar-my-account” class=”menupop with-avatar”>
    Paula<img alt=”

    I’ve tried some things myself with these to see if I can alter the color of the text, but I’ve had no luck as yet. Any suggestions on how to get these to convert to #EEEEEE?

  • Unknown's avatar
    thesacredpath · Member ·

    1. Gaaahhhh! Those are bullets. One of our “important” attributes is causing it, so remove the “!important in the below background declaration and let’s see what that does:

    .widget ul li a:link, .widget ul li a:visited {
background: url("http://s0.wp.com/wp-content/themes/pub/bueno/styles/purple/bullet_hover.png?m=1391150862i") no-repeat scroll 10px 12px transparent;
}

    2. Add this to your CSS:

    #wpadminbar * {
color: #CCCCCC !important;
}

    Somewhere along the line, something in your CSS is overriding the color in the admin bar, and it really shouldn’t be. That should be separate.

  • Unknown's avatar
    cuplet · Member ·

    Gaaahhhhhh indeed! but removing the “important” attribute has worked, and those pesky bullets are gone! yay!

    I’ve added the #wpadminbar code, which has worked to change the titles back to the default color, but now the rest of the headings in those drops downs have changed color and looked grayed out. Gaaahhhhhhhh again! I’ve been pulling my hair our trying to unpick my code to find out what’s caused the problem. I am now officially Duncan Goodhew! Can we get it fixed before tomorrow lovely wordpress wizard? I’m still bashing away over here trying things to sort it out, but your more expert eyes are definitely welcome right now :) What can we try next do you think?

  • Unknown's avatar
    thesacredpath · Member ·

    There are some omissions in your CSS that are causing the problems. First off copy all your CSS out and paste it into a plain text file for safe keeping. Then delete all the CSS from the edit window and past in the following, which is a cleaned up and modified version and see where this gets us.

    #navigation {
    background-color: #663366;
    margin-top: -20px;
}

#pagenav a {
    background-color: #663366;
    color: #EEEEEE !important;
    display: block;
    font-family: calibri,verdana,arial,sans-serif;
    font-size: 25px;
    height: 40px;
    margin-top: 130px;
    padding: 15px 10px 0;
    text-decoration: none !important;
    text-transform: none;
}

.col-full {
    width: 1000px;
}

.site-title a {
    background-color: #663366;
    border-color: #663366;
    border-style: solid;
    border-width: 20px 10px;
    color: #EEEEEE !important;
    display: block;
    font-size: 70px;
    height: 60px;
    left: -40px;
    margin-top: 30px;
    padding: 4px;
    position: absolute;
    text-align: center;
    text-decoration: none !important;
    text-transform: none;
    width: 620px;
}

.wf-loading .site-title a {
    color: #EEEEEE !important;
    text-decoration: none !important;
}

.wf-active .site-title a {
    color: #EEEEEE !important;
    text-decoration: none !important;
}

#main {
    position: relative;
    width: 650px;
}

body {
    color: black;
    font-family: calibri,verdana,arial,sans-serif;
    font-size: 15px;
}

h1 {
    color: #3B0466 !important;
    font-size: 28px;
}

h2 {
    color: #3B0466 !important;
    font-size: 20px;
}

h3 {
    color: #3B0466 !important;
}

#container a:link, #container a:visited {
    color: #3B0466;
    font-weight: bold !important;
    text-decoration: none !important;
}

#container a:hover {
    color: #3B0466;
    font-weight: bold !important;
    text-decoration: underline !important;
}

#sidebar {
    background-color: white;
    font-size: 12px;
    margin-top: 2px;
    padding: 10px;
}

#image-3 {
    margin-bottom: 0;
    text-align: center;
}

#twitter-3 h3 a {
    color: #3B0466 !important;
    text-decoration: none !important;
}

.widget h3 {
    color: #3B0466 !important;
    font-family: calibri,verdana,arial,sans-serif;
    margin: 0 0 7px;
    text-transform: none;
}

.widget ul li a:link, .widget ul li a:visited {
    background: url("http://s0.wp.com/wp-content/themes/pub/bueno/styles/purple/bullet_hover.png?m=1391150862i") no-repeat scroll 10px 12px transparent;
    color: #3B0466 !important;
    font-weight: bold;
    text-decoration: none;
}

.widget ul li a:hover {
    color: #3B0466 !important;
    font-weight: bold;
    text-decoration: underline;
}

.widget_recent_comments li a, .widget_twitter a {
    color: #3B0466 !important;
}

.text-3 a:link, .text-3 a:visited {
    color: #3B0466 !important;
    font-weight: bold;
    text-decoration: none;
}

.text-3 a:hover {
    color: #3B0466 !important;
    font-weight: bold;
    text-decoration: underline;
}

.rss_links-3 a:link, .rss_links-3 a:visited {
    color: #3B0466 !important;
    font-weight: bold;
    text-decoration: none;
}

.rss_links-3 a:hover {
    color: #3B0466 !important;
    font-weight: bold;
    text-decoration: underline;
}

#copyright p:after {
    color: white;
    content: "© 2011 cup-let.com";
    margin-left: 300px;
}

.post .date .day {
    color: #EEEEEE !important;
    display: block;
    font-family: calibri,verdana,arial,sans-serif;
    font-size: 36px;
    font-weight: normal !important;
    line-height: 32px;
}

.post .date .month {
    color: #EEEEEE !important;
    display: block;
    font-family: calibri,verdana,arial,sans-serif;
    font-size: 16px;
    line-height: 32px;
    text-transform: none;
}

#wrapper {
    height: auto !important;
    margin: 0 auto -20px;
    min-height: 100%;
}

#respond {
    border-color: #EFEFEF;
    border-style: solid;
    border-width: 5px;
    margin-top: -50px;
    padding: 8px;
}

#respond h3 {
    background-color: white;
    border-color: #EFFEEF;
    border-style: solid;
    border-width: 5px;
    padding: 8px;
}

#comment-form-subscribe {
    background-color: white;
    border-color: #EFFEEF;
    border-style: solid;
    border-width: 5px;
    padding: 1px;
}

#commentform label {
    font-weight: normal;
    text-transform: none;
}

#extended-footer {
    display: none;
}

#footer {
    background-color: #663366;
    color: #EEEEEE;
    font-size: 11px;
    padding: 20px 0;
    text-transform: none;
}

#footer a:link {
    color: #EEEEEE !important;
    font-weight: normal !important;
}
  • Unknown's avatar
    cuplet · Member ·

    wow. thats an incredible amount of work you’ve done there to clean up my rookie attempts at CSS. I can;t thank you enough. Ok i’ve removed my css and pasted in the revised one, but i’m still getting an underline on the site title and pagenav titles when i hover over them, which i don’t want. We have the text-decoration:none!important rules in there, so i’m not sure why those aren’t working. not sure how we combat that. everything else seems to be working just as we want it though.

    now having a meltdown about the html file i want to link to in the Code Runner post. I cant find anyway to put it in there. box.net doesnt work. neither does scribd or google docs. and my whole website kinda doesnt make any sense if i dont have this one document in the post. At the moment all the work i’ve done over the past two weeks seems pointless if I cant sort that out. I think I may cry :(

  • Unknown's avatar
    thesacredpath · Member ·

    Sigh!

    I’m not getting an underline on the site title in either Safari or in Firefox, but I do see one on the post titles.

    Add this to your CSS at the very bottom.

    .site-title a:link, .site-title a:visited, .post .title a:hover, .page .title a:hover {
text-decoration: none !important;
}
  • Unknown's avatar
    cuplet · Member ·

    I’ve added that but the underlines are still there in the site title and pagenav headings. I’m using Chrome. They weren’t showing up in the my CSS code, although from the looks of it the code here is the same as before. Sigh indeed.

    I think i will cry now.

  • Unknown's avatar
    thesacredpath · Member ·

    Are the underlines on the page nav only when you hover?

  • Unknown's avatar
    cuplet · Member ·

    yes. on the page nav and the site title when i hover. but they weren’t there at all before.

  • Unknown's avatar
    thesacredpath · Member ·

    The problem is without me being able to recreate it it is a little difficult to track down.

    The other thing is, I’m seeing none of the changes I made to the CSS, so I’m still working off the old stuff before I fixed a bunch of things. That means I can’t do anything as I keep having to recreate all my changes in Firebug which takes way too much of my time.

    Did you even insert the big bunch of CSS I gave you and did you save it?

    I’m stopping all work till I see the changes I made on the stylesheet in Firebug.

  • Unknown's avatar
    cuplet · Member ·

    Yes, I took out all of my CSS as you said, inserted all the CSS you gave me and saved the style sheet. But the underlines are still showing when i hover over the page nav and site titles.

    I’m really sorry this is taking so much of your time. I understand if you want to leave it.

  • Unknown's avatar
    thesacredpath · Member ·

    Take the “important” off of the text-decoration in the below.

    #container a:hover {
color: #3B0466;
font-weight: bold !important;
text-decoration: underline;
}
  • Unknown's avatar
    cuplet · Member ·

    when i do that it removes the underline from all the other links in the body of the post and the sidebar.

  • Unknown's avatar
    thesacredpath · Member ·

    Then we will target those specifically to underline them. The “a:hover” covers the entire site (unless you specifically target other selectors to override that. There are far too many “importants” in the CSS, but we will get around those hopefully. I would actually rather start from scratch and redo everything, but at this point, let’s just get it working the way you want.

    Change #container a:hover to this

    #container #sidebar a:hover, #container #main a:hover {
color: #3B0466;
font-weight: bold !important;
text-decoration: underline !important;
}

    The above also does the underline on the post title when hovered. Do you want that or do you want no hover on the post title?

  • Unknown's avatar
    cuplet · Member ·

    you’ve done it you bloody genius!!!! If I could hug you through the internet right now I totally would! No underlines now on the site title, or the page nav headings. All underlines for links in the post and the sidebar present and correct. I’m totally fine with the post titles having underlines :).

    YOU ARE AWESOME. I’m not sure I can really thank you enough for all your help. But thank you, thank you so so much :) Fingers crossed for going live tomorrow, and fingers double crossed that someone will actually visit my webpage.

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome, and if you find any other errant bits we missed, just let us know.

1 2
  • The topic ‘formatting font-weight of links in my sidebar’ is closed to new replies.