Need help? Check out our Support site, then


Framing the text in the About section

  1. Hi there,

    I am wondering how to do the CSS code for framing the "About" content much like I have done for the archives. So I can have the content untouched by the background image. I was also wondering how I could make the background for the content black, and then make the content and menu, and all text that would be impossible to see against the black, turn it white.

    Thanks,

    Chris

    The blog I need help with is imveryape.com.

  2. Hi Chris,

    Here's what's happening: your content is in a 900px wide container on all your pages. The archives have a background-color set (white) and the About page doesn't, so it's transparent. You can make it black with this (kinda long) code:
    .page.page-id-2-page-template-default.logged-in.admin-bar.no-customize-support.custom-background.typekit-enabled.single-author.mp6.highlander-enabled.highlander-light #container {background-color: black;}
    If you inspect the body element on that page (let me know if you don't know what that means) you see the crazy long class name on the body. If my code doesn't work, check my class name against that for typos.

  3. You will see that your background image is probably not wide enough on that page though, so it may need some modifying.
    Also, do you want that entire area black? And just on the About page? We should clear that up before worrying about changing fonts.

  4. Thanks for the quick reply. Yes, it would just be for the About page. Would like to have that page a little different. Would the framing be the same dimensions as my archive page? That's what I'm looking for.
    Ya, I'll adjust the background picture so it fits better.

    Thanks again for all of your help

  5. I didn't see any change after the code, I will check the body element (I think I know what that is).

  6. Yes, the About page has the same dimensions as the rest of the site.

    It looks like most of the text is still pretty legible on top of black. The a elements (hyperlinks) seem to be the biggest issue as they're black. To change their color only on the About page, you will need to start the selector with that long class and then find the elements you want to change. Such as:
    .super.long.class #widgets a {color: white;}

  7. Hi jeffwelston, thanks for helping! One quick tip would be that you don't need to have that super long class selector. Picking just one of the body classes, especially a unique one to the page, will work. For example, instead of starting with this:

    .page.page-id-2-page-template-default.logged-in.admin-bar.no-customize-support.custom-background.typekit-enabled.single-author.mp6.highlander-enabled.highlander-light

    You could start with this:

    .page-id-2

    The final example would look like this:

    .page-id-2 #container {
    	background-color: black;
    }
    .page-id-2 #widgets a {
    	color: white;
    }
  8. You beat me to it! I figured that out and was just going to correct myself.
    Thanks.

  9. I was thinking that it was a huge class name, not a string of classes.

  10. Thank you both for the help, that is awesome.

  11. @jeffwelston, body classes are crazy like that. :)

Topic Closed

This topic has been closed to new replies.

About this Topic