Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Change background, font color in Pilcrow theme

  1. blacknectar3
    Member

    Hello, I have changed my theme to Pilcrow and have a few questions:

    1. How can I bring the subheading up where the title (of the blog) is? I would like it to be on the far right of the page or directly underneath the title.

    2. I altered the width on Pilcrow, but when I attempted to change the background color, the width went back to its original dimensions. How can I change the background color and keep my width?

    3. How can I remove the boxes around the widgets to the right of the page?

    4. How can I change the color of the headings? Also, how can I change the font of the headings?

    5. Finally, how can I change the hover color of the menu (and the other links) to brown?

    I know I asked a million questions, thanks in advance for the help. It is much appreciated!

    I'm here: http://blacknectar.me/

    Thanks again!

    The blog I need help with is blacknectar.me.

  2. blacknectar3
    Member

    --Number 2 is answered, so no need to answer that one. The rest I still need help with. Thanks!

  3. blacknectar3
    Member

    **Clarification for #4: I would like to change the menu font--the other fonts are fine.

    **Clarification for #5: I want to change the hover color of the menu to brown, and the hover color of the links on the rest of the site to blue.

    **For #3, I would also like to remove the (gray colored) boxes around the text in the posts as well.

  4. blacknectar3
    Member

    Sorry...more clarification...

    **For number 4: Still would like to know how to change the color for the post headings and change the font of the post headings.

  5. designsimply
    Staff

    1. How can I bring the subheading up where the title (of the blog) is? I would like it to be on the far right of the page or directly underneath the title.

    In Pilcrow, the tagline is actually setup to appear in the footer. One possibly good workaround would just be to add some text right after the site title in the header with the content property like this:

    #site-title {
float: left;
}

#site-title:after {
padding-left: 15px;
content: "Black (female) consumption of food, art, and politics";
}

    You may want to remove the left float for the site title if you'd rather have it on the rifht. Adjust the 15px spacing and other details as necessary.

  6. blacknectar3
    Member

    Thanks!

  7. designsimply
    Staff

    3. How can I remove the boxes around the widgets to the right of the page?

    There are a few different types of boxes around widgets in your sidebar right now. First, there are lists inside widgets. To remove the background and border from those, try this CSS:

    .widget ul {
background: none;
border-bottom: none;
}

    Another type of box appears when you add images with captions, to remove the background and borders from image captions in the sidebar, add this:

    #sidebar .wp-caption {
background: none;
border: none;
}

    **For #3, I would also like to remove the (gray colored) boxes around the text in the posts as well.

    To remove the shading from image captions throughout the site (not just in the sidebar), use this:

    .wp-caption {
background: none;
border: none;
}

    In the Pilcrow theme, sticky posts are given a background color. To remove that, use this CSS:

    .sticky .entry-content {
background: none;
}

    To remove the background from the boxes with categories, tags, and comments links in the footer of each post, use this:

    .entry-links {
background: none;
border-bottom: none;
}

  8. designsimply
    Staff

    4. How can I change the color of the headings? Also, how can I change the font of the headings?

    **Clarification for #4: I would like to change the menu font--the other fonts are fine.

    **For number 4: Still would like to know how to change the color for the post headings and change the font of the post headings.

    To change the font for post headings, go to Appearance → Custom Design → Fonts and select a font under Headings.

    To change the color of post headings in the Pilcrow theme, try this:

    .entry-title a {
color: OliveDrab;
}

.entry-title a:focus,.entry-title a:active,.entry-title a:hover {
color: Sienna;
}

    Adjust the color names as necessary.

    In most WordPress.com themes, the menu font is set by the Body Text setting on the Appearance → Custom Design → Fonts page. If you would like to set a font for the menu other than the one in that setting, you can do something like this:

    #nav {
font-family: Georgia, "Bitstream Charter", serif;
}

    See this page about font stacks to learn more about how they work:
    http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/

  9. designsimply
    Staff

    5. Finally, how can I change the hover color of the menu (and the other links) to brown?

    **Clarification for #5: I want to change the hover color of the menu to brown, and the hover color of the links on the rest of the site to blue.

    There are two components to the hover colors in the menu, the background and the font color. Here's is an example of changing the background color for menu items to brown:

    #nav {
	border: solid brown;
	border-width: 1px 0 2px;
}
#nav a {
	color: brown;
}
#nav ul ul a {
	background: brown;
	color: #fff;
}
#nav .current_page_item a,#nav li:hover > a,#nav ul ul :hover > a {
	background: brown;
	color: #fff;
}
#nav ul ul a:hover {
	background: Maroon;
}

    To change the font color for menu items, change #fff to a color name or code of your choice.
    http://en.wikipedia.org/wiki/Web_colors

    To change the base link and hover link color throughout the site to blue, add this CSS:

    a {
color: blue;
}
a:focus,a:active,a:hover {
color: blue;
}

    Adjust the color names as necessary.

    I noticed you have hard coded colors into some of the links in your posts like this:

    <a href="http://blacknectar.me/2011/07/15/review-on-being-wretched/"><span style="color:#993300;">Project</span></a>

    You can try to override that manual HTML color change with a rule like this in your CSS:

    a span {
color: blue !important;
}

    Note that may not catch all cases where you have manually changed the color using HTML, and you may need to adjust the content in some of your posts to change specific color settings like those.

  10. blacknectar3
    Member

    Thanks so much! I appreciate all of your help. There is one more thing--how can I change the widget titles from gray to blue?

  11. blacknectar3
    Member

    I figured out how to change the widget title color. Thanks again for your help!

  12. designsimply
    Staff

    I figured out how to change the widget title color.

    Nice work! It'd be great if you posted back with the CSS you figured out for this. :)

  13. blacknectar3
    Member

    Here it is:

    .widget-title {
    color:#3366FF;
    }

  14. designsimply
    Staff

    Awesome, thanks!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags