Home>Support>Blog Grid possibilities

Blog Grid possibilities

By rschalkwijk, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

Hi there,
For a new website I have a testdomain on which I’m temporary using the Vantage premium theme which I bought for another website. On my new website I want to make use of the blog grid the theme provides, but I want to change the way it looks. I’m not very talented in coding, so I need some help of you guys!
The first problem I have is that I want only 3 posts next to eachother. To get this done I changed the width of an article to 33.333%. This gives me 3 posts next to eachother, but on the next line the 4th post is shown.. What do I do wrong?
Another thing I want is to show the title of a post over the image with a colored block behind the text. Like they do here: http://css-tricks.com/text-blocks-over-image/
I have the feeling I cant do this by css alone, or can I?
The last thing I want is to get rid of the border around the thumbnails and to change the hover effect of it. I want an opacity effect that turns darker. Is this possible?
Hopefully these changes are not to hard, because I really enjoy using the Vantage Theme ad the Pagebuilder!

URL: http://bbq-junkie.argonzaal2.nl/

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 9 months ago Andrew Misplon
    Hi, I Work Here

    Hi rschalkwijk

    We can try help out with a few of your requests.

    The grid item hover background color can be changed as follows:

    /* Vantage Grid Thumbnail Hover Background */

.vantage-grid-loop article .grid-thumbnail:hover{
border-color:#00bafa;
-webkit-box-shadow:0 0 5px rgba(0,187,251,0.75);
-moz-box-shadow:0 0 5px rgba(0,187,251,0.75);
box-shadow:0 0 5px rgba(0,187,251,0.75);
}

    Change the colors there or set each value to none to remove the effect.

    The featured image border can be adjusted using the following selector:

    /* Vantage Blog Grid Layout Border */

.vantage-grid-loop article .grid-thumbnail {
display: block;
padding: 5px;
border: 1px solid #c2c5ca;
-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.1);
-moz-box-shadow: 0 0 4px rgba(0,0,0,0.1);
box-shadow: 0 0 4px rgba(0,0,0,0.1);
background: #FFFFFF;
margin-bottom: 10px;
}

    To put three items in row you’ll need to do the following.

    1. Create a child theme. Here is one to start with: https://siteorigin.com/wp-content/uploads/2014/12/vantage-child-vanilla.zip. Install and activate. Redo Appearance > Customize and Appearance > Menu settings if needed.

    2. Create a folder in the child theme called: loops

    3. Copy /loops/ loop-grid.php from the parent theme to the same location in the child theme.

    4. On line 21 change the integer 4 to 3.

    5. Add the following to Appearance > Custom CSS:

    /* Vantage Grid Loop Article Width */

.vantage-grid-loop article {
width: 33.33%;
}

    Adding a opacity based overlay with the title is unfortunately beyond our scope at the moment. You could consider suggesting this as future feature: https://siteorigin.com/suggest-feature/ or consider custom development with http://codeable.io/.

    Hope that helps.

  2. 9 years, 9 months ago rschalkwijk

    Hi Andrew,

    Thank you for your reply! I’m having a quesion about the search field to, but I will start a new thread for that one.

    Roy

  3. 9 years, 9 months ago Andrew Misplon
    Hi, I Work Here

    Thanks Roy, I’ll pick that up ASAP.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More