Did you ClassiPress category icons disappear after your recent upgrade? Not a problem. We will walk you though a new tutorial on how to add icons to you site without modifying any core code at all. Whats core code? Well, the code inside the /classipress/ directory you uploaded. You never want to modify that code because upgrading becomes rather difficult when you do that! Instead you should always create a child theme, which will lean on ClassiPress and extend its functionality allowing you to change styles, colors, and even how some pages function! If you don’t know how to make a child theme, you might start in the tutorial we wrote for AppThemes here: http://www.appthemes.com/blog/classipress-child-theme-tutorial-part-1/
Now that you have established a child theme, lets begin.
The first step we will take is to implement styles and load the same icon for every category. Start by opening up your child themes style sheet and then you will want to copy this code and place it inside.
#directory .catcol ul li.maincat .subcat-list a { background:none; } #directory .catcol ul li.maincat a { background: url("images/cp_logo_icon.png") no-repeat scroll 0 0 transparent; display: table-cell; line-height: 13px; padding: 0 0 0px 24px; vertical-align: middle; float: left; height: 24px; width: 70%; }
If you peek into the code above you will see its looking for “images/cp_logo_icon.png”. That means we need to add that file to the server. To make things easier for you, we are providing you with a zipped copy of the images folder.
Simply download this file: [download id=”10″ format=”2″]
and extract the images folder into your child theme. To give you an example, your basic childtheme folder should look like this:
The site should now look something like this.
Now lets go find the ID of the “Pro Check-Ins” category so that we can use a custom icon just for that one category. To do this, you can of course use Firebug and inspect the HTML using developer tools, but I’m going to assume many of you don’t know how to do that, so lets get the category ID from the WordPress admin.
Now we know the category ID is 42. Please keep that in mind as we enter the next step of the process.
Now that we know the category ID, we are able to add the next line of CSS code in our style.css document. Note that you should have the second icon already in your images folder that was included in the download above.
#directory .catcol ul li.maincat.cat-item-42 a { background: url("images/map-pin.png") no-repeat;}
Take this above code and append your style.css file with it. Now your page should look something like this! Rinse and repeat for all other categories.
© Copyright 2023 Sethmatics Websites All Rights Reserved.
Pingback: Images classipress
Pingback: [TUTORIAL] Menu Category Icons 48px
Pingback: Inserir Icones categorias
Hi, nice tutorial. well explained and well laid out. as of now (April 2012) I’m running the latest version of WordPress and ClassiPress. I’ve followed the child theme install to the letter. and it didn’t work. but guess what? That’s because I was turning different things off and on. I had deactivated your theme and disabled the core stylesheets (ClassiPress/Settings/Advanced). because it was messing with my colour scheme.
now I’ve left the core stylesheets disabled set to No, but activated your theme and it works brilliantly.
Thank you!
Pingback: Adding Category Icons Classipress 3.1.9!