Need help with some problems

  • Unknown's avatar
    demastmerksplas · Member ·

    I’m having certain problems.

    The first one is that my header image is overlapping my top WP menu bar, rendering some of it unviewable. I cannot figure out how to correct this.

    My second problem is that the META in the bottom does not ‘blend in’ with the footer, I cannot find how I can class it or how I make it like that.

    Lastly , my color in my contactinfo. I cannot find where I can change this content. Can anyone help me with these?

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

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    designsimply · Member ·

    The menu overlapping the header image is how the Book Lite theme is designed to work. You can see it’s like that on the demo site:
    https://booklitedemo.wordpress.com/

    And there’s more information about Book Lite at https://theme.wordpress.com/themes/book-lite/ in case you’re interested.

    You can, of course, modify the placement of the header image using CSS, but in this case it’s a bit tricky because of how the header area in this theme was actually not designed to use an image with a logo and a text like you are using and instead is setup to work well with images such as the lake and mountains photo background you see in the demo site. In that design, the image can be clipped and still look good at several different widths.

    I worked on a CSS example that may help you force the header image area to do what you are wanting. It requires media queries to make sure the responsive design still looks good on mobile devices.
    http://en.support.wordpress.com/custom-design/custom-css-media-queries/

    You may also want to learn a little more about the “background-size” property and how it works because it can be a little confusing to work with if you’re not used to it.
    https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

    .admin-bar #masthead {
    background-position: center 100px;
    background-size: auto 200px;
}

@media ( max-width: 680px ) {
    .admin-bar #masthead {
        background-position: center 140px;
        background-size: 90% auto;
    }
}

@media ( max-width: 480px ) {
    .admin-bar #masthead {
        height: 200px;
    }
}
  • Unknown's avatar
    designsimply · Member ·

    I see that you changed the background color of the footer widget area to a dark color using something like this:

    div#secondary {
    background: #19181A;
}

    You will also want to change the text color inside the widgets since they were black before you updated the background color. You can add something like this:

    #secondary .widget {
    color: #eee;
}

    Adjust the color code as needed.

    This method can help you when looking for certain CSS selectors:
    http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

  • The topic ‘Need help with some problems’ is closed to new replies.