[kameilabdParticipant]

Hey all

Am trying to put the finishing touches to my wife’s dancing site and have stumbled a bit on her integrated blog page

http://www.ipmconsulting.com.au/kbd/blog

You can see there that she’s got shortcut images with the title of each blog entry. This is fine. However when you go into the page itself, the layout at the “top” of each blog post isn’t correct

Is there a way to move the top image into the container with the rest of the post as well as moving the header for the article?

There also seems to be a bit of a mystery button on the right hand side that moves between blog post but is missing a graphic

[NicoModerator]

Hi There,

Thanks for writing in.

Would mind checking your setup first. Please share us your admin credentials in private reply.

The right side box is an arrow to the right or a button to go to the next post.

Thanks.

[kameilabdParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

The color of the arrows between post is white because it just relies on the link color settings in your customizer. To change it’s color, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-nav-articles a {
    color: #000;
}

In your blog post, the featured image on each post is correct. You should select the featured image the same as the image you have added in your posts. If unless otherwise you want to have a different layout and would like to display the featured image different, if you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thank you.

[kameilabdParticipant]

Thanks for the code, the button makes sense to the eye now 🙂

Having the featured image is fine really. The main requirement is to move the heading under the feature image to be within the darkened container.

And then line up the feature image and the container so that it looks “seamless”

I’ve attached an image for example (excuse the quality, was quickly done in paint)

[Paul RModerator]

Hi,

You can add this under Custom > CSS in the Customizer.

.single-post .x-section .x-container.width {
    width:100%;
}

.single-post #x-section-1 {
    padding:0;
}

.single-post .entry-header {
    padding: 20px 30px 0;
    background: rgba(0, 0, 0, 0.85);
}

.single-post .entry-content {
    margin-top: 0;
}

.single-post .x-main .hentry .entry-featured {
    margin-bottom: 0;
}

.single-post .entry-featured img {
    width:100%;
}

Hope that helps

[kameilabdParticipant]

Thanks for that, it’s 90% there now

Any ideas on how to eliminate the gap between the header and container?

EDIT: Ok after some digging around, I know I need to change .x-section-1 {padding: 0px} to remove the gap

However I can’t get it to work in the custom css as I don’t understand to to write the “full path” to the actual div

EDIT AGAIN: Just realised that you actually included this in the original changes. Not sure why it didn’t work though. If I change the setting manually in Firebug, the margin is removed

[RadModerator]

Hi there,

Please try adding !important, it’s being overridden by inline style.

.single-post #x-section-1 {
    padding:0 !important;
}

Cheers!

[kameilabdParticipant]

Brilliant! That worked perfectly 🙂

[Prasant RaiModerator]

You are most welcome. 🙂

[Author]

Posts