- This topic is empty.
-
AuthorPosts
-
April 19, 2019 at 9:49 pm #286616ogurumaParticipant
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.
April 21, 2019 at 8:53 am #286659DagnyParticipantOkay 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.
April 22, 2019 at 7:14 pm #286718ogurumaParticipantThanks 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;
}April 23, 2019 at 2:59 am #286727Paulie_DMemberThe 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;
April 23, 2019 at 5:56 am #286731DagnyParticipantoguruma , my CSS will only work if you remove the default styling (and your own)
April 23, 2019 at 8:01 am #286734DagnyParticipantMeant to say if you remove the plugin styling and yours *
April 23, 2019 at 3:13 pm #286755ogurumaParticipantI 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.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.