Error in layout in post page

[lauradelaat]

Hi there!

I will do my best to explain the challenge…

To start with how it started.

Revolution slider behind the header on the homepage.
The client wants an animation on the homepage header, it’s not jet an animation but I’ve build the revolution slider on the homepage with a minus top padding so it appears in the header. The header background is transparant.
See here the home

Header background other pages is an image
So I have set that image with a minus top padding so it appears in the header
Example

Problem with the layout of the posts
Then I started with the blog posts. As I place the header image with minus top padding, it gives troubles.

I want to place a row with image and text, automatic there comes an high space
see here

If I just place for example a seperator with a minus top padding, I can solve the problem. But not in case of a row with an image an text column.

I have tried minus top and bottom padding in all possible options, nothing seems to work…

Besides, because I use the composer at the post, the original blog post lay out disappears, as you can see ont the link before.

When you look here, you can see how the blog post looks without the visual composer.

I really hope you can help me. Maybe I have to change something somewhere else?

My best regards,

Laura

[Laura]

Hello, try adding this to style.css at child theme

COPY CODE

section.container-wrap.main-title.alternate-color.title-single.border-bottom h1 {
    color: #3F3F3F !important;
}
section.container-wrap.main-title.alternate-color.title-single.border-bottom {
    background-color: #3F3F3F;
    color: #3F3F3F;
    border: #3F3F3F;
}

Let me know 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[lauradelaat]

Hi Laura,

Thanks for your reply. I paste the code in the editor, see the printscreen I’ve added.

It doesn’t help removing the space: see example

If the problem is to difficult. I’ll have to change the design from the home page to make the post page ok. So be it then…

Is it true that using the visual composer might give some problems when used in posts?

Thanks for you time.

Best regards,

Laura

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, yes it could have some issues but works fine, can you share admin credentials so i can check it out?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[lauradelaat]

This reply has been set as private.

[Laura]

Hello, added this to your style.css

COPY CODE

.single-post #main-container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

Check http://martijnvanbraam.nl/2016/02/12/new-test-post-with-composer/

Does it look better? Let me know 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[lauradelaat]

Hey Laura,

Thanks, but this doesn’t give the solution. The problem is that the functionalities/characteristics of the blog post fall away by using the composer.

Besides padding, it effects the meta information on the left of the text and it effects the way it looks in the Kleo post carousel on the homepage. (see printscreen)

It’s important my customer can use the visual composer in the blogposts. That’s the only part he will be managing and that’s kind of why I chose the theme…

Glad to hear from you again.

Best regards,

Laura

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[lauradelaat]

Ok, thank you so much for your effort!

Have a great day 🙂

[Andrei]

Hi @lauradelaat, sorry for asking again but I couldn’t understand exactly what’s not working as it should from your previous posts.

Can you please tel me step by step in depth detail how can I replicate the issue, or what exactly is not working as you would aspect ?

Looking forward.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[lauradelaat]

Okido, I can understand as I first dropped two troubles to shoot 😉

But the main thing at this moment is this:

When I create a post and use Visual Composer the special functionalities/characteristics of the post fall away.

That means the meta data that is normally on the left side of the post doesn’t show (See printscreen) and the way it is shown in the Kleo Post Carousel on the homepage (see link)

And for example on the blog-overview page the text of the blog is not shown when I used the visual composer.
http://martijnvanbraam.nl/blog/

The thing is my client is going to post his own posts and wants to use the composer when posting. Hope that is possible..

Hope this makes a bit of a picture.

Best regards,

Laura

Attachments:

You must be logged in to view attached files.

[lauradelaat]

Dear Andrei,

Is there any news on this subject?

Best regards,

Laura

[Andrei]

Hi, sorry for the delay,

When you’re using Visual Composer for building custom post pages some of the default article elements disappear so that you can fully use Visual Composer in any way you want, that’s how it’s supposed to work, you either keep the basic layout or you fully build you page starting from layout to content, that’s why VC is not enabled by default for posts.

Let me know with what else I can help you.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[lauradelaat]

Hi Andrei,

Thanks for the reply. A by coming problem is the way the articles are shown in the applications as kleo carousel, as shown before in the printscreens.

And can you tell me how I can use VC and show the meta details of a post?

Thanks!

Best regards,

Laura

[Andrei]

Please update Kleo, K-Elements and Visual Composer to their latest versions, the carousel issue with post excerpt should have been fixed.

You can show meta details in VC listings just by using the Post Grid element and by building a custom design for the Grid Item element.

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[lauradelaat]

I manually updated K elements and VC.

Do I also need to choose a theme update as I can choose by theme options where I need to give the api and themeforest and back up?

Now its’s not working jet.

Thanks for the efforts…

[Andrei]

From your themeforest account you can generate an api key to use it in the theme options update page.
Please be sure you’re updating the theme to the 4.0.2 version and after that go in “Appearance > Install Plugin” and update all plugins from that list.

If you cannot do it with the api key then I recommend you to re-download the theme from themeforest and manually update it on ftp.

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[lauradelaat]

Thanks for all the help but it is all a bit too much…

Inserted the API but nothing happens. So checked the versions of the theme. Child theme says no version number and the main theme says 3.1.3.
But the child is the one being active.

I downloaded the new files from themeforest. Which file do I take and replace on the FTP?
(see printscreen) Or the whole kleo file?

Sorry, I’m no expert in these things…

Attachments:

You must be logged in to view attached files.

[Andrei]

Hi,

From the main themeforest package make sure you find the kleo.zip file, unzip it, and on your ftp, firstly be sure you backup the whole “kleo” main theme folder, and then delete it and upload the new one you got from the zip.

Let me know if you need any more guidance.

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[lauradelaat]

Ok, great it works. Thanx a lot! that was quite scary to do 😉

Only thing, after the update I now have some double lines in the design which not were there before.
http://martijnvanbraam.nl/

But will have a look tomorrow what that can be…

One more question, is it possible to change the purple stripes of blog overview in to an other color?
http://martijnvanbraam.nl/blog/

Thanks again.

[lauradelaat]

Goodmorning Andrei,

In one of the answer you said:
You can show meta details in VC listings just by using the Post Grid element and by building a custom design for the Grid Item element.

But the question about the met details that are not showing is about the message it self.

The difference between post with composer and without composer

Is there a solution? Like a shortcode that I can put in a column so the details are there in the article too?

And if possible, is there a solution to change the purple lines in an other colour?

Thanks again for the effort.

Best regards,

Laura

[lauradelaat]

To bring so more to table, I have a few problems after the website.

1. Lines appear which were not there before. See printscreens. To get a white line underneath the header I have set that line the column settings on every page. Only a few pixels of white on the topborder. Now it also shows a pixel of white on the bottom border. Even when I set the bottom to 0 pixels.

2. I had help from Radu to set a 5 column row in the centre (on the home page) which is not centered anymore.
(see printscreen)

Hope this is easy to solve…

Attachments:

You must be logged in to view attached files.

[lauradelaat]

Hi there, wondering if there is any news or are things in progress?

[Andrei]

Hi,

The grid element design is for the listing not for the whole article page, in there you don’t have any alternative if you use visual composer for building post pages, once you’ve changed the default template that’s it.

From what I see the extra borders are coming from your custom css code, not from the visual composer row settings as it should, so maybe you should remove those rules related to the borders color.

Regarding you 5 columns row, I’ll ask @Radu to come in and give a look at what’s happening.

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[lauradelaat]

Thanks for your answer, but it is not taking me far.

1.
I might not understand you well… I don’t use the grid element on the blog/post page itself. The question is: I would like to see meta details on the blog/post page even when I use visual composer. See the print screens in the message before, is that possible?

2.
The extra borders were not there before the update.
I think something in the update refers to border behaviour?
I didn’t add anything to the css in relation to the borders. I’ve put in a printscreen of the css, maybe you can see if something is there?

3.
And if possible, is there a solution to change the purple lines in an other colour?
That shows on the overview blog/post page using kleo posts grid.

Please notice that I work for somebody else, who really really wants to release his site with the blog articles. I have to keep him on distance in all this time it takes… It would be a great big favour for me when we can make this all work in a short notice.

Thank you anyway for the effort!

Attachments:

You must be logged in to view attached files.

[Radu]

Hi,

1. Add this function to kleo-child/functions.php

COPY CODE

function kelo_show_post_meta () {

?>
<?php if( kleo_postmeta_enabled() ): ?>
    <div class="article-meta shortcode">
			<span class="post-meta">
				<?php kleo_entry_meta();?>
			</span>
        <?php edit_post_link( esc_html__( 'Edit', 'kleo_framework' ), '<span class="edit-link">', '</span>' ); ?>
    </div><!--end article-meta-->
<?php endif;?>
<?php
}

add_shortcode('kelo_show_post_meta','kelo_show_post_meta');

And this css to wp-content/themes/kleo-child/style.css

COPY CODE

article .article-meta.shortcode { width: auto !important; display: inline-block; }
article .article-meta.shortcode small{ display:inline-block !important;margin-right:5px; }
.article-meta.shortcode small.meta-comment-count a { font-size: 18px !important; }

2. I don't know how do you want to style the borders give a sketch please.

3. Add this css and replace red with your desired color

COPY CODE

.masonry-listing .format-standard .post-title {
    border-left: 3px solid red;
}

For the rest of the modifications i recommend you to hire a developer.

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[lauradelaat]

Thanks for the detailed reply.

Where can I find kleo-child/functions.php?
And wp-content/themes/kleo-child/style.css?

I only know the normal css.

About 2: In the beginning, before the update, I just had only a white line of a few pixels under the header and in between. Now, after the update, there are also small lines in between and above the footer.

To show, I have now removed all the white lines on the homepage that needed to be there. The ones that need to be gone are still there and I don’t understand where they come from.

And there is a point 4: The 5 columns you have helped me with are not any more centered after the update.

Thanks again.

Attachments:

You must be logged in to view attached files.

[Radu]

Hi

The wp-content is a folder located on your server and you should connect using a FTP client

For centering that 5 images on homepage add this css to wp-content/themes/kleo-child/style.css

COPY CODE

section.container-wrap.home_box_wrap.main-color.border-bottom .section-container.container .wpb_column.vc_column_container.vc_col-sm-2 {
    width: 20% !important;
}

You can remove all borders from page by adding this css to wp-content/themes/kleo-child/style.css

COPY CODE

.home section.container-wrap.main-color.border-bottom {
    border: 0;
}

Take a look on youtube how to connect to server via FTP : https://www.youtube.com/results?search_query=connect+ftp+server+wordpress

Please consider that I’m trying to help and guide with your issues but please understand that we don’t offer advanced customisation through our forum or support tickets.

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[lauradelaat]

Hi Radu,

Thanks for your help. Please notice that the last things appeared after the update: the white lines and the 5 columns which are not centered anymore.

I found ftp, copied the css file, added the things, saved and replaced it, but it is not working.

I was almost ready to deliver this site weeks ago, but now I still can’t…

Please help me only with this two points, the rest I will just leave behind. These two are essential for the design and were fine before the update.

In the printscreen you can see the css I’ve added.

Thanks for helping.

Attachments:

You must be logged in to view attached files.

[Radu]

Hi,

Paste this into wp-admin -> theme options -> general settings -> quick css

This css will show centered images inline

COPY CODE

section.container-wrap.home_box_wrap.main-color.border-bottom .section-container.container .wpb_column.vc_column_container.vc_col-sm-2 {
    width: 20% !important;
}

Tell me whats is the second issue

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[lauradelaat]

Thanks, that works.

Second issue were the white lines that appear on every page while they are not in the settings.
I have now added the css you gave earlier in the quick css instead of the ftp and that works for the homepage. On the other pages there are still lines that needs to be gone, for example: http://martijnvanbraam.nl/blog/

On the page: http://martijnvanbraam.nl/tevreden-klanten/
The thick line under the heading needs to be there, the thin line above the footer appeared after the update.

Thanks again.

[Radu]

Hi,

Please use this CSS code

COPY CODE

.vc_column-inner {
    border: 0 !important;
}

.main-color .masonry-listing .post-content {
    border: 0;
}

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[lauradelaat]

Hi Radu,

I’ve pasted it in the quick css but it doesn’t work. Please see printscreen, is it right what I’ve done?

Attachments:

You must be logged in to view attached files.

[lauradelaat]

First I’ve pasted it in the editor CSS. Removed it there and added it to the quick CSS, see printscreen.

Attachments:

You must be logged in to view attached files.

[lauradelaat]

You might find this interesting too…

I have made a new test page and all the lines are showing.

And when I made a new blogpost only some of the lines are showing.

I really hope this is helpful to see what is happening.

Attachments:

You must be logged in to view attached files.

[Radu]

I’ve accessed your wp and I’ve made some css adjustments in child theme now it should be ok,i’ve created a new page and i’ve inserted text block to try to reproduce your described issue and it seems to be solved.

Please confirm if all are ok now

NOTE:  Please salve the css file from child for later use.

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[lauradelaat]

Hi Radu,

I noticed 😉
Thanks again. But sadly, the costumer wanted the white line, about 5 pixels, under the header and in between the rows on the homepage. How do I get those back?

Thanks,

regards,

Laura

[Radu]

Hi….

I’ve removed the css that removes the border under the header and between rows form home, you will have to set/add/remove borders as you want from row settings. The rest of wishes of your client you will have to do it not mine because that is not my job, i cannot ofer you continuous support for a custom stylization for your client.

Cheers

 

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[lauradelaat]

Thanks for helping and don’t get me wrong but it was ok before the update…

Of course I have set the row settings with a border but because of the setting are now all borders zero, this does not appear.

It has nothing to do with the client, but these are really simple design setting which seem to make things highly complicated. Understand me, this is getting me frustrated too and I am very glad when these simple settings are just as they were before the update.

Attachments:

You must be logged in to view attached files.

[lauradelaat]

If the service ends here, I will have to add an image of a white border instead of set it in the settings.

That might be the best to do…

To save each other a further headache?

 

[Author]

Posts