Need help? Check out our Support site, then


WordPress.com Forums » Support

Help with modifying Journalist

  1. 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!

  2. vivianpaige
    Member

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

  3. 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!

  4. 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

  5. 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.

  6. 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 ;)

  7. 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.

  8. vivianpaige
    Member

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

  9. carocat
    Member

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

  10. 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.

  11. rosclarke
    Member

    Try here: http://www.upsdell.com/BrowserNews/res_fonts.htm#a01

  12. 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!

  13. 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!

  14. vivianpaige
    Member

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

  15. 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.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags