[Anders OlssonParticipant]

Hi !

I would like your help so that this post (fullwidth post layout) – http://www.consciousbreathing.com/learn-more/breathing-index-score/
looks like this page – http://www.consciousbreathing.com/learn-more/breathing-test1/breathing-index-score2/

So I need your help to:
1. Increase left and right padding to the featured image and the post-title
2. Make the background of the post-title white

Further I cannot update
– Cornerstone from 1.1.3 to 1.3.3
– X Theme 4.3.4 to 4.4.1

I get “An error occurred while updating Cornerstone / X: Update package not available.”

Thanks and kind regards
/Anders Olsson, Conscious Breathing

[Rue NelModerator]

Hello There,

Thanks for writing in! To make the single post almost the same as your page, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.single-post .entry-featured {
    padding: 60px;
    padding-bottom: 0;
    background-color: #fdecdb;
    box-shadow: 0;
    border: 0;
}

If you want to update X and Cornerstone, you can download a fresh copy from Themeforest downloads section or by downloading it from your dashboard (https://community.theme.co/dashboard/) and upload if using ftp to update the files manually.

Hope this help.

[Anders OlssonParticipant]

Your suggestion for question #1 worked great, and so did the upgrades. Thank you !!

Regarding question #2, “Make the background of the post-title white” I don’t think you provided a code for that, right.

If you look at this post – http://www.consciousbreathing.com/testimonials/barbro-rosendahl/, I want the post title “I’ve almost completely been able to skip taking pain killers” as well as the author info below to:

a) have the same padding as the featured image.
b) have the same color on the margin as the featured image (#fdecdb)
c) have the same padding as the text beneath the post title/author info
c) have the same background (white) on the content area, so it is in line with the text beneath and that that whole area from the featured image above to the text below is white.

Hope you understand what I mean and that this image explains what I mean – https://www.dropbox.com/s/ua2lbvfeccz5l6y/Sk%C3%A4rmklipp%202016-04-03%2012.51.35.png?dl=0

Kind regards
/Anders

[LelyModerator]

Hello Anders,

We need to adjust more settings to achieve that.

Please update this custom CSS:

.single-post .entry-featured {
    padding: 170px;
    padding-top: 0;
    padding-bottom: 0;
    background-color: #fdecdb;
    box-shadow: 0;
    border: 0;
}

To this:

.single-post .entry-featured {
    padding: 10%; /* We need to use percentage here for responsiveness*/
    padding-top: 0;
    padding-bottom: 0;
    background-color: #fdecdb;
    box-shadow: none;
    border: 0;
}

Please also add this:

.single-post  .entry-wrap {
    padding: 0px 10%; /* Same 10% padding with the featured image */
    background-color: #fdecdb;
}
.single-post  .entry-header { /*For the header to appear white*/
    background-color: #fff;
    padding: 60px 20px;
}
.single-post .entry-content.content {
    margin-top: 0;
}
.single-post div#x-section-1 { /* This will make sure that first section padding is zero and will remove extra space*/
    padding: 0 !important;
}
.single-post .x-section .x-container.width {
    width: 100%;
}

Then please make sure that on Row Settings, padding left and right is set to 20px. Currently it is 50px. Adjust this to 20px so it will align to the header.

Hope this helps.

[Anders OlssonParticipant]

Thank you very much, perfect 🙂 !!

I have a couple of more questions:
1. Is it possible to add a section at the bottom of the post, so that it looks like on this page where there is a blue section at the end – http://www.consciousbreathing.com/learn-more/how-do-you-breathe/
2. If I want to add the same global post-styling code above also for pages how do I do that?
3. Is it possible to change the email text in Social Sharing from the default “Hey, thought you might enjoy this! Check it out when you have a chance:” into something else?

Kindly
/Anders

[Paul RModerator]

Hi Anders,

1. Yes it’s possible, you can add this in your child theme’s functions.php file.

function add_post_footer() {
    if(is_singular('post')){
    ?>
   ADD CONTENTS HERE
    
    <?php
    }  
}

add_action( 'x_after_the_content_end', 'add_post_footer', 10 );

Change ADD CONTENTS HERE with your content

2. To make it work on pages, you can change .single-post to .page

Hope that helps.

[Anders OlssonParticipant]

Thank you 🙂

What css do I need to use have the same margin, padding and background on the product page – http://www.consciousbreathing.com/product/power-breath/ as on this page – http://www.consciousbreathing.com/learn-more/how-do-you-breathe/

Also, is it possible to change the email text in Social Sharing from the default “Hey, thought you might enjoy this! Check it out when you have a chance:” into something else?

Further, when I do a search on the site the results presented – http://www.consciousbreathing.com/?s=leifi, are to wide and I would like the results to show up with the same layout as here (except that it is only an excerpt of the text of course) – http://www.consciousbreathing.com/testimonials/leifi-jacobsson/

Thanks
/Anders

[JackKeymaster]

Hi there Anders,

Thanks for writing back!

To match the styling of that page on a WooCommerce, you can add the following css code.

.woocommerce .entry-wrap .single-product {
    background-color: #ffffff;
    padding-bottom: 45px;
    padding-left: 60px;
    padding-right: 200px;
    padding-top: 60px;
}

For the social sharing text, the best way to edit this would be to use the x.pot file found in x/framework/languages

On the search template, did you want it to display exactly as that page you linked to with the same image size for all results? Or would you prefer it to use whatever image size is actually attached to the post, let us know and we can provide some CSS to change that for how you need it. 🙂

Thank you!

[Anders OlssonParticipant]

Thanks for your quick reply, really great 🙂 !!

Since I have the same size for all featured images (I think :)), I would like it to display exactly as the page I linked to for all results.

Keep up the great job you are doing!
/Anders

[JadeModerator]

Hi Anders,

Please add this CSS:

@media (min-width: 775px) {
    .search-results .has-post-thumbnail .entry-featured {
        width: 774.328px;
    }
}

Hope this helps.

[Author]

Posts