[rapidwebsitesParticipant]

Hello – I’m trying to create a custom Post Grid by modifying the ‘Masonry Grid:Default’ template. I’m not sure what I’m doing wrong, but it just doesn’t seem to be working. All I’m trying to do is center the elements (Post Title, Post Excerpt and Button) and change the color of the button. When I save the changes to the modified template only the Post Title is centered and the Button has disappeared altogether. I’m also trying to reduce the padding around the text. Are you able to help?

Page with ‘Masonry Grid:Default’ template is here:
http://www.webfactory.com.au/testsites/artscouncil/hunter-valley-art-exhibitions/

Page with ‘Custom’ template is here:
http://www.webfactory.com.au/testsites/artscouncil/hunter-valley-art-exhibitions/2015-exhibitions/

Any assistance you can offer would be greatly appreciated.
Regards
Melanie

[LelyModerator]

Hi Melanie,

Please try adding the following CSS via Appearance > Customize > Custom > CSS:

.page-id-1106 .vc_custom_heading.vc_gitem-post-data.vc_gitem-post-data-source-post_excerpt {
    text-align: center;
}
.page-id-1106 .vc_btn3-container.wpb_animate_when_almost_visible.wpb_appear.vc_btn3-center {
    text-align: center;
    opacity: 1 !important;
}

Hope this helps.

[rapidwebsitesParticipant]

Great! Thank you very much. Is there a way to reduce the top and bottom padding? http://www.webfactory.com.au/testsites/artscouncil/hunter-valley-art-exhibitions/2015-exhibitions/

Regards
Melanie

[rapidwebsitesParticipant]

I’ve just realised that only worked for that one page – I’m going to have lots of pages where I need the same formatting (have exhibitions to archive since 2003, and then one every year for the future). Is there an easy way to adjust that code so it will automatically work for all of these pages rather than having to add the Page ID to Custom CSS code?

Regards
Melanie

[rapidwebsitesParticipant]

Sorry, one more question – I’ve tried selecting Two Columns for the Masonry Grid Portfolio template http://www.webfactory.com.au/testsites/artscouncil/hunter-valley-art-exhibitions/2015-exhibitions/ In my experience with WordPress, Masonry normally responds to different size images and fills in the gaps (hope this makes sense …) As an example – http://avada.theme-fusion.com/2-column-grid/

Is there a way to display the Portfolio items in this way, rather than in rows and columns leaving lots of white space as it is now?

Regards
Melanie

[Paul RModerator]

Hi Melanie,

Please refer to the link below.

https://community.theme.co/kb/portfolios/

Hope that helps.

[rapidwebsitesParticipant]

Thanks – I’ve watched the video, but it doesn’t help at all with Visual Composer ‘Post Grid’ element, which is what I’m trying to use.

I switched to ‘Layout – Portfolio’ in the Page Attributes, as suggested in your video http://www.webfactory.com.au/testsites/artscouncil/hunter-valley-art-exhibitions/ Although I’me now seeing them display in Masonry style, my problem here is that I appear to have lost the ability to use the Visual Composer elements and use the Custom Headline like the rest of the pages on the site – is that correct or am I doing something wrong? Also, the Hover information is fairly irrelevant, and not what I need.

I really need the page to look like this http://www.webfactory.com.au/testsites/artscouncil/hunter-valley-art-exhibitions/2011-exhibitions/ but in Masonry style. Can you please let me know if I’m missing something? I’m not sure if this is a conflict between X-Theme and Visual Composer?

Regards
Melanie

[rapidwebsitesParticipant]

Sorry! I worked it out. Bought a full licence of Visual Composer, updated everything and now the Masonry Post Grid is working.

Regards
Melanie

[Paul RModerator]

Hi,

Glad to know its fixed.

Have a great day! 🙂

[kellymowrerParticipant]

Hi, I have a similar question – I’m using a post grid on my homepage and need to change the color of the read more buttons to match my color scheme. Would the CSS you’ve suggested above work for me as well? Thanks.

[JoaoModerator]

Hi Kelly,

Can you please provide the URL of your website?

Thanks,

Joao

[kellymowrerParticipant]

mymeditativeyoga.com

i added some css i saw on another similar question in this forum, seems to have done the trick but if you could doublecheck me in the event there was something i overlooked, i would appreciate it. thanks so much!

a.vc_gitem-link.vc_general.vc_btn3 {
color: #ffffff;
border-color: #479DB4;
background-color: #479DB4;
text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
-moz-text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
-webkit-text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
padding: 0.385em 0.923em 0.538em;
}
a.vc_gitem-link.vc_general.vc_btn3:hover {
color: #ffffff;
border-color: #E0A733;
background-color: #E0A733;
text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
-moz-text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
-webkit-text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);

[JoaoModerator]

Hi,

Looks good to me!

If you would like to remove those text links above the buttons you can try

.home a .more-link {

display: none;

}

Let us know if you need further help

Thanks,

Joao

[kellymowrerParticipant]

Ah was wondering about that, thanks Joao as I would like to remove them. I did try the above and the Read More text links remained. hmm…

[Rue NelModerator]

Hello There,

Sorry if it didn’t work out. Please update the code and use this instead:

.home a.more-link {
  display: none;
}

Hope this helps. Kindly let us know.

[Author]

Posts