Need help? Check out our Support site, then

Need CSS help for changing themes, but approximating appearance of the old one..

  1. I am currently using fadtastic with some css customizations. It has been a long time since i edited them and don't remember what i did. I want to change to a theme shows multiple posts on the home page (which fadtastic to my understanding cannot do without changes to the original theme itself). I like the way the sidekick theme looks and am trying it out on a test site

    If possibIe, I want to 1) change the menu to full width, single line and 2) reposition content so header image to be fully displayed similiar to the way it was on the old theme and 3) change font colors

    thanks for any help.

    The blog I need help with is

  2. What I can do is help by giving you some starting points. Pay attention to the selectors because those are what you can use to add further changes. If you want a basic refresher on CSS in general, this is a good tutorial:

    To find which selectors to use, I right-clicked on the things on the page I wanted to find out more about, selected "Inspect Element," and used the browser's built in web inspector to browse the HTML on the left and all of the CSS that applies to whatever is selected on the right. It's the most useful thing you can possibly do when working with a theme's existing CSS.

    1) change the menu to full width, single line

    To make the menu full width in the Sidekick theme, try setting the width for the area that contains the site title as well as the menu to 100%. Here is an example to get you started:

    #masthead hgroup {
    	width: 100%;
    .main-navigation {
    	width: 100%;
  3. 2) reposition content so header image to be fully displayed similiar to the way it was on the old theme

    With this one, I think you're breaking out of the Sidekick setup completely—it has a built in setup to do a header image that is 480 x 150 pixels. What you can do is bypass that completely and add a background image to one of the header elements using CSS. Here is a basic example that just adds in the background image. You should add these to the "#masthead hgroup" selector that is already in your custom CSS from the last example:

    background: url("") no-repeat;
    	height: 235px;
  4. 3) change font colors

    I would recommend experimenting with whole color palettes first—you can find that in Appearance -> Themes -> Customize -> Colors.

    To target individual text colors, you need to create CSS rules to override ones in the theme. There could be many. You can use the built in web inspector to find them. Here are a few basic ones:

    To change the base text color, you can update the color for the "body" tag:

    body {
    	color: hotpink;

    That should affect any text that doesn't have a more specific color rule in the theme's CSS.

    To adjust link colors, you can do something like this:

    a {
    	color: blue;
    a:visited {
    	color: purple;
    a:active {
    	color: green;

    But that won't affect post titles on the home page because there are more specific rules in the theme for those particular colors. Here is an example that will change the color, visited color, and hover color for post titles on the home page:

    .entry-title a,
    .entry-title a {
    	color: brown;
    .entry-title a:visited,
    .entry-title a:visited {
    	color: teal;
    .hentry:hover .entry-title a,
    .hentry:hover .entry-title a:hover {
    	color: gold;

    Other font colors may also need specific rules added to adjust theme depending on what text you add and what rules exist in the theme to affect that text. You can adjust the font color further as you add more content. Use your browser's web inspector to find what CSS selectors to use to adjust more colors.

Topic Closed

This topic has been closed to new replies.

About this Topic