Header image (Blog Layout)

[chasingthedonkeY]

Hello,

I have followed the steps from the blog layout to have a full-width header. BUT it’s not taking up the full space. Could you tell me what I have done wrong?
http://www.chasingthedonkey.com/

Thanks

[Davinder Singh Kanith]

For full width header:

1. Remove widgets from header right widget area (make sure it’s empty).
2. To upload image, go to Appearance > Customizer and then use retina option in the header image section.
3. Here you need to upload image that is double the size of required header image. For example here – http://demo.simpleprothemes.com/flex/blog/ – the image is of size 2160 X 500 size – http://demo.simpleprothemes.com/flex/blog/wp-content/uploads/2015/06/flex-blog-logo-retina.jpg

[chasingthedonkeY]

Horray! That worked. It was the size I was uploading the wrong width. I’ll get my designer to make me one up in that new size.
Is it possible make that whole header area black (full width)? Thanks.

[Chinmoy Paul]

Add this in your style.css file for black header

.site-header,
.site-header .wrap {
   background: #090909;
}

[chasingthedonkeY]

Thanks, at the very end of it? I did that, but nothing changed.

[Chinmoy Paul]

I am thinking that you are using cache plugin. Clear the cache and it will work. Currently site is not taking updated css file due to cache plugin

[chasingthedonkeY]

You rock!!!!!!! Oh man, my site NEVER has looked so good. Thanks Chinmoy.
Can I do the same with the footer? And also, can I make the buttons (on pagination and sliders) that are now blue and change then to black also? If you prefer I can open another ticket. Thanks again.

[Chinmoy Paul]

Footer:

Currently style.css file have this css

.site-footer {
    border-top: 1px solid #e3e3e3;
    color: #444;
    font-size: 14px;
    line-height: 1.3;
    padding: 20px 0;
    text-align: center;
}

Replace by

.site-footer {
    background: #000;
    border-top: 1px solid #e3e3e3;
    color: #949494;
    font-size: 14px;
    line-height: 1.3;
    padding: 20px 0;
    text-align: center;
}

.site-footer .wrap {
    background: #000;
}

[Chinmoy Paul]

Pagination Buttons:

Find this css

.archive-pagination .active a, 
.archive-pagination li a:hover {
    background: #22a1c4;
    color: #fff;
}

and Replace by this once

.archive-pagination .active a, 
.archive-pagination li a:hover {
    background: #000;
    border-Color: #000;
    color: #fff;
}

[chasingthedonkeY]

Thanks, that almost all worked. I now just need to know which section will change the whole footer (that the three widgets are in) and not just the line at the bottom.

FYI: I managed to find the other buttons for the enews etc and make them black also.

[Chinmoy Paul]

style.css file have this section

/* # Footer Widgets
---------------------------------------------------------------------------------------------------- */

You will change the border-color, background color and text color. Hope that this information will help you.

[chasingthedonkeY]

Great thanks! You’ve been very helpful.

[Chinmoy Paul]

Thank you.

But menu is not looking good on mobile device. Can you modify the CSS from @media queries section? All responsive css are locating at bottom of style.css file

[chasingthedonkeY]

? I am sorry, I don’t know what that means.

[Author]

Posts