Help with modifying Journalist

  • Author
    Posts
  • #166200

    vivianpaige
    Member

    I have to admit to being a real novice at CSS. I thought it would be easy to modify just a few elements of The Journalist theme in order to add some color. However, it appears that it not the case. Perhaps I’m missing something.

    I really just want 2 things: the blog title in a different font & color, and the sidebar titles in a different color. It seems that if I change the sidebar color, it changes all of the text as well. As for getting the blog title in a different font & color, well, all I’ve managed to get changed is the size of it.

    Before I purchase the CSS upgrade, can somebody take a look at the style sheet and let me know if I’m going to be able to do it?

    Thanks!

    #166367

    vivianpaige
    Member

    Oops. I put this in the wrong forum. It should be in CSS Customization. Can a mod move it?

    #166371

    rosclarke
    Member

    Here’s a helpful way of approaching some CSS issues. If you press CTRL+U on any webpage, it will give you the underlying code. You can then search this for text. So if you type in the text of your blog title, or the sidebar titles, it’ll find those for you. Then you can look to see what class they’re under and this gives you the CSS code you’ll need.

    So, for instance, the blog title might be under H1, in which case you’ll want something like

    H1 {
    color:#231232;
    }

    Comparing the source code with the CSS stylesheet you can view in the CSS editor also helps!

    #166374

    ellaella
    Member

    To change the color of the sidebar and the header title, add one line to each section below (as I did, using blue as the color — just because it’s easy to see.)

    }
    
    #sidebar {
    float:left;
    width:180px;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:12px;
    border-left:#999 1px solid;
    margin:0 0 0 20px;
    padding:0 0 10px 10px;
    background:blue
    }
    
    }
    
    #container h1 a {
    color:blue;
    text-decoration:none;
    }

    You can, of course, use any color # you wish. I like the color wheel here:
    http://www.ficml.org/jemimap/style/color/wheel.html

    #166375

    ellaella
    Member

    Vivian, I’m sorry. I thought you wanted to add color to the sidebar. So please ignore the sidebar code above. To change the color of the titles in the sidebar, you still need to add a line (I stuck with blue) thus:

    }
    
    #sidebar h3 {
    	font-size:14px;
                 color:blue;
    	margin:20px 0 5px;
    }

    Mea culpa.

    #166384

    vivianpaige
    Member

    Thanks for all of the responses. I messed around some more and was able to get some stuff done :) I decided to go ahead and purchase the upgrade. While the changes I made are really minor, I think it makes the readability of the theme so much better ;)

    #166392

    ellaella
    Member

    It looks good! I think I now know what’s been bothering me about that theme: a lack of at least a touch of color. Definitely more readable, at least to my eyes.

    #166393

    vivianpaige
    Member

    Thanks! I thought that was all that was missing, too.

    #166432

    carocat
    Member

    I agree, that looks so much better now. Nicely done. :)

    #166433

    vivianpaige
    Member

    ellaella – I do have one question for you. Is there a list somewhere of fonts that most computers use? The reason I ask is that I changed the font of my header to one that I liked (Oxford) but apparently that font isn’t widely available on computers. (I didn’t even have it on my laptop and didn’t realize that the font had to be installed to be viewable.) Thanks for any pointers you might be able to give me.

    #166443

    rosclarke
    Member
    #166454

    vivianpaige
    Member

    Thanks. That helped a lot.

    Just one last question: I’d like to change the color of the search button. I’ve tried every element in the style sheet that looks like anything to deal with it to no avail. Is this an HTML element that I can’t change?

    I really do appreciate all the help here. You guys are great!

    #166597

    vivianpaige
    Member

    I just found someone else who is modifying this theme (on a self-hosted blog) http://www.harshj.com/2007/11/26/new-theme-the-journalist/ One thing he’s done is align the avatar in the comments to the right instead of the left. I found the code in his style sheet but he’s using gravatar and not our avatar here. Here’s the code

    comments img.gravatar {
    
    float: right;
    
    margin: -5px 0 0;
    
    }

    Any idea what the code is for our avatars? Thanks!

    #166598

    vivianpaige
    Member

    Nevermind on that – I figured it out :) Now to figure out how to make the avatar larger

    #166601

    vivianpaige
    Member

    Argh! Looks like the size of the avatar is fixed in the html. I figured out how to make it bigger but it just stretched the image.

The topic ‘Help with modifying Journalist’ is closed to new replies.