Ambiance pro grid

[jalodico]

Hi all,

I am trying to create an Ambiance Pro home page that shows three posts wide instead of two. I tried adding the code below which I got from another thread in this forum but it isn't working. Any suggestions? (site: http://www.swimannapolis.com).

Would also like to remove post titles so that it only shows the graphic.

Thank you for any help.

ambiance-grid .entry {
background-color: rgba(0, 0, 0, 0.5);
float: left;
margin: 0 4% 4% 0;
min-height: 200px;
position: relative;
text-align: center;
width: 33%;
}

.ambiance-grid .entry:nth-of-type(3n) {
margin: 0 0 4% 0;
}

.ambiance-grid .entry:nth-of-type(3n+1) {
margin: 0 4% 4% 0;
}

http://swimannapolis.com

[SavvyJackie]

Hi,
Give this a try and see if that helps. I added a display: inline-block, changed float to none and reduced percentage to 30%.

.ambiance-grid .entry {
background-color: rgba(0, 0, 0, 0.5);
float: none;
margin: 0 4% 4% 0;
min-height: 200px;
position: relative;
text-align: center;
width: 30%;
display:inline-block;
}

.ambiance-grid .entry:nth-of-type(3n) {
margin: 0 0 4% 0;
}

.ambiance-grid .entry:nth-of-type(3n+1) {
margin: 0 4% 4% 0;

}

Hope that helps,
Cheers.

---

Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie

Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂

[jalodico]

Sorry it took me so long to respond but thank you. That helps. How would I go about centering those two columns in the middle of the page?

Thanks again.

[rajk]

Hello - Just installed Ambiance Pro. How did you remove the titles and date on grid so it only shows the graphic on the grid? Didn't exactly catch that in the above code snippet.

Thanks!

Raj

[jalodico]

The code above set it to three wide (cache didn't clear at first so please disregard comment about centering above) but the headline is still showing.

I was able to find the date and remove it (sorry but not sure how I did it) but I can't seem to figure out what is controlling the headline. Any help removing it from the home page would be appreciated.

Thanks,

Jim

[rajk]

Okay, this worked to remove titles and date displays from home page grid displays. Now it only displays graphics. Check http://riffiti.com/riffstreams/ (hiding it from indexing, not yet public)
1) To remove title display, find this piece of code in style sheet (style.css) and change display value.

.ambiance-grid .entry-title a,
.ambiance-grid .entry-title a:hover {
color: #fff;
display: none; /* changed from display: block; to hide from home page grid display */
}

2) To hide date display, add the below single line.

.ambiance-grid .entry-time { display: none; } /* to hide date from home page grid display */

Let me know if this worked for you. It works perfect for me. Thanks,

Raj

[jalodico]

Thanks Raj. I was able to test it and it works.

Is there a way to remove the header that shows the featured image on the individual posts? I want to show the image on the home page but not in the header of the page itself. If possible, I would like to just remove the entire entry header that disappears when you start scrolling down the page--the gray area at the top of individual posts.

Thanks again,

Jim

[Author]

Posts