CSS Noob: Help with styling

[oguruma]

Relevant URL: coosguide.com/cat

I am trying to style some category buttons on a wordpress site that I am developing. The categories are for WordPress CPTs from a plugin called GeoDirectory.

I am a total CSS novice and I cannot figure out which selectors I would use to accomplish this.

I want to style my icons to look like THIS.

The categories are inserted with a GeoDirectory shortcode. It seems that they fill the container in 3 equal rows. What I want is show them in the container, aligning them to the left, based on the length of category title.

[Dagny]

Okay so for some reason your plugin is creating a new un-ordered list “ul” for each category – this is so wrong. The correct semantic html should be:

ul > li >a

So I’d suggest to change the plugin or edit its source code to output semtantic code.

I did however wrote the css needed to make the categories look like the screenshot.

https://jsfiddle.net/zxd461t0/

[oguruma]

Thanks for the help with that. That CSS as is didn’t change anything, though.

The CSS below did change the font color and background, however it’s still displaying with 33% width for each of the blocks and excess padding around the text.

.gd-cptcat-ul {
list-style-type:none;
display:inline-block;
padding: 0;
}

.gd-cptcat-li.gd-cptcat-li-main {
padding:0;
background:black;
}

.gd-cptcat-li.gd-cptcat-li-main a {
display:inline-block;
padding: 0;
color:white;
text-decoration:none;
font-size:10px;
}

[Paulie_D]

The styling seems to be coming from

.geodir-categories-container ul {
    display: inline-block;
    width: 33%; /* remove this */
    min-width: 185px; /* and this */
    list-style: none !important;
    padding: 0 !important; /* perhaps adjust this */
    margin: 0;
    vertical-align: top;

[Dagny]

oguruma , my CSS will only work if you remove the default styling (and your own)

[Dagny]

Meant to say if you remove the plugin styling and yours *

[oguruma]

I got it dialed pretty much how I want it, but something is setting the height to 45px, which is creating a margin that I don’t want. I just can’t figure out which selector I need to set the height to auto.

Dagny, I actually believe that the plugin creates a ul for each category because there is a switch for subcategories. I have that switch turned off, so it only shows the main category.

[Author]

Posts