Adding css to Brunch-Pro theme

[BlueBug]

Hi, I'm new at WordPress design and am trying to set up a navigation menu using medium sized images in two rows inside of a TinyMCE widget. I have found a website that is doing this and like the way it looks. How can I add css to this theme so that I can add rows and divide it into thirds to display my images that I will link to my pages? Should I use a table?

[Brad Dalton]

Link to an example please.

---

Tutorials for StudioPress Themes.

[BlueBug]

deidrariggs.com

[Brad Dalton]

Try CSS or you can use PHP code.

I assume you mean display post entries in columns?

---

Tutorials for StudioPress Themes.

[BlueBug]

No. If you look at the page she uses images in tow rows as navigation. Speaking, books, blog, events, contact, about. How do I add css to the brunch pro template?

[Brad Dalton]

There's several ways to do this:

1. You can add 6 featured page widgets to the home top widget area and use CSS to display them in a grid a bit like you see here after the slider.

Or

2. You could add 6 text widgets with HTML for your images and links and use CSS to display them in a grid.

Or

3. You could use the WordPress gallery to display 6 images in a grid and link to them pages.

The CSS goes at the end of your child themes style.css file, before the start of the CSS for Media Queries.

Also note: Brunch Pro includes a featured posts widget which includes a setting to display entries in columns. You could use this as well and display the featured image only.

I suggest you try one of these methods and then link to the page if you need further help.

---

Tutorials for StudioPress Themes.

[ducnv]

You can update and view the results wordpress 4.6.1

---

bỉm doctor pia

bỉm hàn qu?‘c

bỉm hàn qu?‘c doctor piaford ?‘à lạt

nhân macca vita
hạt macca vita
nhân hạt macca
hạt macca úc
khám phá macca
hệ th?‘ng phân ph?‘i macca vita

[BlueBug]

Thanks for your help. I will give that a try.

[Brad Dalton]

The CSS will look something like this if you want to use the featured page widgets in home top or home middle.

.home-middle,
.home-top {
	background-color: #fff;
	clear: both;
	overflow: hidden;
	padding: 60px 30px 0;
}

.home-middle .widget,
.home-top .widget {
	float: left;
	padding: 0 2.8%;
	width: 33.33333333333%;
}

.home-middle .widget:nth-of-type(3n+1), 
.home-top .widget:nth-of-type(3n+1) {
	clear: left;
}

---

Tutorials for StudioPress Themes.

[BlueBug]

Brad, I appreciate the code. Maybe you could help me further? I found the plugin Genesis featured page advanced and am tying to us it. It allows me to use custom pictures. I have figured out how to link them to the pages. But I can't get the images to display across the page in a row and I suspect that the css you sent doesn't work with the advanced version.

[Brad Dalton]

Hello @BlueBug

All the code i post here and on my site is tested and works.

Please clear any server side, plugin and/or browser caching.

The CSS assumes you have added multiple Genesis featured page advanced widgets to the home top or home middle widget area.

---

Tutorials for StudioPress Themes.

[Author]

Posts