Docs

[nathanr_]

Hi,

As much as I love x theme I really feels is lacks in blog customisation compared to other themes, all I wish to do is have full width images at the top of the blog page and blog post pages with the title of the page over the image to follow the design of the rest of the site. I have looked through the forum and tried many ideas but most have not worked.

BLOG PAGE

I have managed to set a full width image on the blog page using the following custom css:

.blog .x-header-landmark {
width: 100%;
max-width: 100%;
background-color: #000;
background-repeat: no-repeat;
height: 370px;
background-image: url(‘image url’);
background-size: cover;
}

All I wish to do now is place text over the image which is centered and has a black transparent background, the details for this are below:

Custom headline: H4

background-color: rgba(0,0,0,.8); padding: 20px; display: inline-block; text-transform: uppercase;

Can I do this by simple adding more code to the custom css I have?

BLOG POST PAGES

Again I wish to do exactly the same to all the blog post pages where it simply pulls the featured image and uses it as a full width image at the top (max height 370px) and uses the blog title over it in the same format in white text(h4) and black transparent box behind.

I have attached an image of how the rest of the top of the pages look as I wish for them to all look the same.

Thank you

Nathan

[nathanr_]

This reply has been marked as private.

[nathanr_]

This reply has been marked as private.

[Rad]

Hi there,

Thanks for writing in.

Please change your CSS to this

@media (min-width: 980px){
.blog .x-header-landmark {
    width: 100%;
    max-width: 100%;
    background-color: #000;
    background-repeat: no-repeat;
    height: 395px;
    background-image: url(http://webdesign25.co.uk/wp-content/uploads/2017/01/BW-Events.jpg);
    background-size: cover;
    position: relative;
}
.blog .x-header-landmark:after {
    background-color: rgba(0,0,0,.8);
    padding: 20px;
    display: block;
    text-transform: uppercase;
    position: relative;
    margin: 0 auto;
    content: "THE BEST NEW TEAM TO ENTER THE MANCHESTER COMMERCIAL LAW MARKET";
    top: 45%;
    color: #fff;
    text-align: center;
    max-width: 550px;
    font-size: 171.4%;
    font-weight: 600;
}
}

Then add this code to Admin > Appearance > Customizer > Custom > Javascript

jQuery( function($) {

$('.single-post .entry-featured').insertBefore('.single-post .site > .x-container'); 
$('.single-post .entry-header').appendTo('.single-post .entry-featured'); 

} );

Then add this to your custom CSS to

.single-post .entry-featured {
    position: relative;
    margin-top: 0px;
    border: 0px;
    padding: 0px;
}
.single-post .x-header-landmark {
    display: none;
}
.single-post .entry-featured .entry-thumb {
    max-height: 395px;
    overflow: hidden;
}
.single-post .entry-featured .entry-header {
    top: calc(395px/-2);
    background-color: rgba(0,0,0,.8);
    padding: 20px;
    display: block;
    text-transform: uppercase;
    position: relative;
    margin: 0 auto;
    color: #fff;
    text-align: center;
    max-width: 550px;
}
.single-post .entry-featured .entry-header h1 {
   color: #fff;
   font-size: 171.4%;
}

Hope this helps.

[nathanr_]

This reply has been marked as private.

[nathanr_]

This reply has been marked as private.

[Jade]

Hi there,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[nathanr_]

This reply has been marked as private.

[Nabeel A]

Hi again,

Try adding the following code in your Customizer:

.single-post .entry-featured .entry-thumb {
    max-height: 400px !important;
    min-height: 400px !important;
}
.single-post .entry-thumb img {
    position: absolute !important;
    top: -280px !important;
}
.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding-left: 10px !important;
    padding-right: 10px !important;
}
.single-post .entry-featured .entry-header {
    margin-bottom: -100px !important;
}

Let us know how this goes!

[nathanr_]

Hi,

Thank you for the awesome help! Problem fixed.

Thank you
Nathan

[Joao]

You are welcome Nathan!

[Author]

Posts