Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Body Text color and size with CSS codes

  1. tomloveslauren
    Member

    Hello! I am very new to CSS modifications, so I need a little help.

    On my blog I have a few different Pages: "Welcome", "Tom and Lauren", "RSVP" and "Location". When you click on those pages there are a few little unfinished blurbs. I would like for that text to be easier to read... possibly by changing the color and the text size.

    The text must also be much bigger. Is there a way I can do this? I tried to input the codes but I don't know how to change that specific text!

    Is it possible that I can put a translucent box behind the text so it is easier to read *without* blocking the background photo?

    I would also like to take out the search bar, categories, and other unimportant links as I will only be using this as more of a website.

    Thanks so much for taking time to read this!

    The blog I need help with is tomloveslauren.wordpress.com.

  2. thesacredpath
    Member

    The problem is not all browser support transparency in a background color (IE8 and earlier, Firefox 2.x and earlier, Opera 9 and earlier, Safari 2.x and earlier). If they don't support rgba transparency, then they will simply show a solid white background to the content area.

    My suggestion is to create a transparent PNG image perhaps 10px x 10px with a white color and then set an opacity for that white color in your image editing program. Save the file, upload it to your media library, get the URL of that image and then put it into the background declaration (replace the URL OF IMAGE between the double quote marks) in the following and add the whole mess below to your CSS.

    #container {
background: url("URL OF IMAGE") repeat scroll 0 0 transparent;
padding-left: 10px;
padding-right: 30px;
}

    This will end up covering a lot more browsers out there.

  3. tomloveslauren
    Member

    Thank you so much!! Do you think this will take away from the background image? If not, then I will try it out!

    Thanks again!

  4. thesacredpath
    Member

    It just depends on the level of transparency or opacity you do. You might have to try several to find a level that allows the text to be legible without taking too much away from the image. The problem is there isn't a text color you can choose that is going to work without some sort of transparent color behind the content area, so you are going to have to live with whatever it takes.

  5. tomloveslauren
    Member

    Sounds good! I'll keep trying! Thanks again!

  6. tomloveslauren
    Member

    One more thing. How can I change the font size and color of the body text under each page?

    THANK YOU!!!

  7. thesacredpath
    Member

    Right now you have the text set to bold (strong) so that selector in the CSS is ruling which is,

    b, strong {
color: #000000;
}

    If you switch back to normal (not bold) then the font color set in "body" would rule, which in your custom CSS is this:

    body {
color: #36BCAB;
}

    If you want to set a font color and size only for the content of pages and posts then it would be best to make your own rule such as this.

    .entry-content p, .entry-content b, .entry-content strong {
color: #CC0000 !important;
font-size: 120% !important;
}

    The CC0000 color and the 120% font size are just placeholders. Edit as you see fit. I added the "!important" attribute to make sure it overrides anything else in your CSS.

  8. tomloveslauren
    Member

    Hello again! So I finally figured out how to create the transparent box, and I am really happy with it! Thank you so much!

    Do you know how I can change the color of the titles within a page? For example if I click on the white title page that says Tom + Lauren. It takes me to a short paragraph. Above the paragraph it says "Our Story" in white, and above that, it says Tom+Lauren in a gray color that you can barely see. Is there a way I can change that to the 36bcab rather than the gray?

    Thank you soo much!!!

  9. thesacredpath
    Member

    It would be here, but you are probably going to have to go with white.

    .entry-title {
color: #36BCAB;
}

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags