[goldbrick]

Hi I am using the enhanced categories plugin in the sidebar of a buddypress site, i was wondering is there a way to style the way the categories are displayed in css.
Example instead of the categories being displayed like this.

.category 1
.category 2

could they be laid out like this
.category 1 .category 2

iam using the buddypress default theme with fishbook child theme.

the web address is http://www.fancygoingout.com

any help would be much appreciated.
Thanks
Jay

[pcwriter]

@goldbrick

Sure is! Add the following to your stylesheet:

div#enhanced-categories ul li {
display:inline-block;
width:49%;
vertical-align:top;
}

display:inline-block sets the li items up side-by-side as long as width is less than 50%. vertical-align:top ensures that each li item stays aligned at the top when the other is expanded (try without the vertical-align to see the difference).

To make your css learning curve a lot easier, install the Firebug for Firefox addon. You can play around with various settings on any web page (even if it’s not yours) until you get the look you want, then simply copy the style rules to your stylesheet and upload. http://getfirebug.com/

Hope this helps!

EDIT: if you add a 3rd main category, you’ll need to set width to 33% or less to accommodate it on the same line, or leave it at 49% if you want them in 2 columns (I’m guessing that’s how it’ll display).

[goldbrick]

Hi pcwriter

thanks for the reply i will give this ago, thanks for the firefox addon.

Jay

[goldbrick]

Hi pcwriter
Thanks very much it worked a treat exactly how i wanted it.
Much appreciated.

Jay