WordPress.org

Ready to get started?Download WordPress

Forums

Can't find text to change color in CSS file (10 posts)

  1. jay_jay_
    Member
    Posted 6 months ago #

    I have been stuck on this for weeks. My font is an unreadable gray as are my post titles. Here is my site: jblog9.com

    I just want to change it from gray to a readable color, like black, and maybe get rid of the white shadowing (or change the color). I am also trying to change the menu bar from gray. In the CSS tab, I can't tell what anything is. I've gone in and changed a bunch of the grays to #000000 to see what would happen and updated it but it all looks exactly the same.

    Also, when I go to 'Inspect Element' the first thing I hovered on lights up in blue and then doesn't change no matter what else I put my mouse on. So I have not been able to find where the font of the section I want is that way, either.

    I have wasted a lot of time watching tutorials that don't cover this. What are the names of these things and how can I learn them? Is there an online dictionary for this? Any help is appreciated.

  2. SideKick Dan
    Member
    Posted 6 months ago #

    Hello,

    Here is some css code to add to a custom css file or plugin. it should work. tested in firebug. with colors, sometimes you start by seeing if the element you are interested has a color defined for it. lots of times though, the color it has is inherited from an element higher up the chain, in your case the paragraphs do not have a color defined, but they inherit the color from the "body" class itself. You can just change it here, or if you want specifically add a class for the paragraph color. Also, sometimes finding the location of css can get tricky especially when one is dealing with multiple css files, child themes, priority issues, etc etc. I sometimes just get to the issue quicker and can keep my css customizations in one place by using a custom css plugin or adding css to the style.css file and adding the !important declaration at the end of a rule to tell the browser to override any other css for the same element.

    Let me know if it helps. Let me know if you need any more hands on help with the theme. However, one suggestion i would have is go with a theme that is just nicer in how it was built. there are a lot of free templates that are just lousy, but a lot that are great. Usually you can swing a nice template to look however you'd like and you start with something that is less troublesome :)

    Danny

    body {
    text-shadow: none !important;
    color: #000000 !important;
    }
    
    /* title colors */
    
    .entry-title, .entry-title a {
    color: #ffffff !important;
    }
    .entry-title a:hover {
    color: #cccccc !important;
    }

    And a suggestion would be to add a background image or color to the page div to make the text easier to read.

    #page {
    background: #ffffff !important;
    }
  3. jay_jay_
    Member
    Posted 6 months ago #

    Hi Danny:

    Thanks so much for the piece of code! It works beautifully. It was easy enough to change the colors to what I was looking for. I see now it might be easier when working with themes to just override with CSS so that's what I'll try from now on. You've taught me something useful. My menu bar is still gray but I will see if I can fix it myself.

  4. jay_jay_
    Member
    Posted 6 months ago #

    PS, as for the background, I knew something was missing but couldn't exactly figure out what, so thanks for that, too.

  5. jay_jay_
    Member
    Posted 6 months ago #

    Sorry for all the posts (no edit button). I pasted a few codes into my site and couldn't change the menu bar.

    That doesn't concern me right now, but my links under each post as well as author and date are invisible and I would like to change the color to the same gray as the rest of the text on the line 'CAMPAIGN POSTS.' That's kind of important. Again, thanks for your help!

  6. SideKick Dan
    Member
    Posted 6 months ago #

    Hello,

    Try this code to play with. If it works without the !important, the remove it :)

    Danny

    #primary .entry-meta a {
    color: #5e5e5e !important;
    }
    #primary .entry-meta a:hover {
    color: #ffffff !important;
    }
    
    .entry-meta {
    color: #5e5e5e !important;
    }
  7. jay_jay_
    Member
    Posted 6 months ago #

    Hi Danny:

    This worked perfectly, of course. But the in-body links are still black. I tried a handful of codes yesterday to see if I could turn it gray and couldn't (the best thing I got was the sidebar menu text turned gray instead).

    How am I ever supposed to learn how to do this myself?

  8. SideKick Dan
    Member
    Posted 6 months ago #

    Hello,

    Can you specify what page as an example? I saw one of the header title's in the comments title that was black. If that is the issue try this

    a, h1, h2, h3, h4, h5, h6 {color:#ffffff !important;}

    It can be a bit of a learning curve with css. It actually can be quite easy and fun once you wrap your head around it's basic concepts; although it always has its frustrations. I'd recommend playing with firebug for firefox or chrome's built in css inspector. Learn how to use it, how it works. Go to a site and see what you can do to change things on the fly for fun. Second, become familiar with CSS inheritance (priorities). Third become familiar with html css div layouts and positioning. Fourth get familiar with some of the most common css rules for colors, backgrounds, etc. These are kind of the things to specifically learn and play with, google, youtube, etc. Lynda.com has some awesome classes too.

    One little exercise to have fun with and play with using the browser inspectors is to go to a random website and edit the looks along with images to anything you'd like. It would be best to find a really well designed website done with mobile responsiveness. I found that playing with well designed layouts helps with learning things the right way. A good example of would be wordpress's Responsive template, free. Another would be Twitter Bootstrap layouts like here http://getbootstrap.com/examples/carousel/ . Just play with the css inspector, change colors, links, etc. Great things to do to learn

    Best Regards,
    Danny :)

  9. jay_jay_
    Member
    Posted 6 months ago #

    Wow, a lot of good info there! Will definitely bookmark this. Someone also recommended Treehouse in addition to Lynda. Inheritance is a new concept for me. I was learning a lot with codecademy and then I got stuck on the cursive glitch and had to stop.

    As for my site, I'm talking about the main page, links are appearing in the text of a post as black. The text is blue, the link is a few lines down and just appears as black space. That's probably why you didn't see it!

  10. SideKick Dan
    Member
    Posted 6 months ago #

    Try this :)

    p a {
    color: #ffffff !important;
    }

    Danny :)

Reply

You must log in to post.

About this Topic