How toHow to remove the border around icons

Sometimes, you don’t want to have a border around the icons. Try one of these solutions :

1. In the posts

In your template file, put the following code if you want no link and no border (most of the time, just ‘link=false’ do the trick) :

get_cat_icon('class=myicons&link=false');

with this added in your style.css file :

.myicons {
 border: 0px;
 border-style:none;
}

2. In the sidebar

Use the put_cat_icons() function. Example :

put_cat_icons(wp_list_categories('echo=0'),'class=myicons');

But you can also use the widget as an alternative, which is easier, but don’t forget to activate it. You’ll need to enter the following parameters in put_cat_icons() field :

class=myicons

with this in your style.css :

.myicons {
border: 0px;
}

3. Use the border parameter

Important ! If you use the border parameter, your page will not be valid XHTML Strict.

In your pages and posts :

get_cat_icon('border=false');

In the sidebar :

put_cat_icons(wp_list_categories(’echo=0′),’border=false’);

In the widget parameters:

border=false

20 thoughts on “How to remove the border around icons

  1. I want border around icons in my sidebar.php to disappear.

    How do I insert this in sidebar.php: get_cat_icon(’class=myicons&link=false’);

    Style.cc file is updated accordingly. But I don’t know what to do in sidebar.php.

    Thanks

  2. Why don’t you use the Template Code ? In the options, check ‘Process the list of categories (usually used in sidebar) ?’ Then, go to the Template Code tab, and look at the bottom : you’ll find where to put the code in your sidebar. The code to put in the sidebar is not get_cat_icon(), but put_cat_icons().

    example :

    put_cat_icons(wp_list_categories(‘echo=0′),’class=myicons’);

    But you can also use the widget as an alternative, which is easier. You’ll need to enter the following parameters in put_cat_icons() field :

    class=myicons

  3. thanks, I used the widget.

    maybe you need to let users know that they have to activate the widget on plugins page before they can see it as one of the option.

    thanks again for the great plugin.

  4. Hello,

    I’m having a small problem with your plugin. I can’t delete the small border around the icon of a category. I tried with ‘class=myicons’ but it didn’t worked and I can’t try with the widget because I’m using a modified theme.
    I have the latest wordpress and category plugin.
    Could you help me please?

  5. I’m sorry, but it’s not working. I still don’t know what file (css) to edit in order to have some visible effect or what code to put in my index.php file.

    This is the code I have in my index.php:

    <?php
    if (function_exists(‘put_cat_icons’))
    put_cat_icons( wp_list_categories(‘orderby=id&echo=0&exclude=138,139,140,141,142&title_li=’ . __(‘Browse Categories’) . ”));
    else
    wp_list_categories(‘orderby=id&exclude=138,139,140,141,142&title_li=’ . __(‘Browse Categories’) . ”);
    ?>

    In the style.css I added:
    .myicons {
    border: 0px;
    }

  6. I am using the widget and it is activated, but class=myicons still isn’t removing the borders. Also how may I add space between the icons and the category text? I tried the option to use a picture to create a space around the icon but that added little boxes next to the icons. I am not sure where to edit the CSS for the other option. Pretty new at this…

    Thanks.

  7. @George :

    you forgot class=myicons in your parameters. And as I’ve said : it’s a CSS problem, and I don’t support them : it’s time consuming (I must download the theme, install it, open firefox and then firebug and look at the CSS issue). I’ve written a liitle guide about Firebug in the blog, read it, please (the last part of http://www.category-icons.com/2008/05/how-to-make-rollovers-with-jquery/).

    @Billy :

    did you put the correct CSS code in your style.css ? If yes, have you tried the third solution ? Please remember I’m not supporting CSS. You have the tools to help you and find the correct CSS code you need to put in your style.css. Try to use Firefox and Firebug to find a solution to your CSS problem. I’ve written a little guide about Firebug in the blog, read it, please (the last part of http://www.category-icons.com/2008/05/how-to-make-rollovers-with-jquery/).
    The little boxes are displayed because of your style.css. Try to find something like images/background.gif in style.css and delete it to see what happens.

  8. Thanks. I added no border and a white background to the little boxes by adding a .caticonspacer class to style.css and it did the trick. I now have a space between the icons and text without the boxes being noticeable.

  9. hello George, I have the same problem. As I know little about php and css. It is not clear where to put the code to remove the border. If you manage, could your post your solution? I will do the same.

  10. yey! I got it, you have to replace the full text given in the template with

    It was unclear to me that
    get_cat_icon(); ?>

    should be get_cat_icon(‘border=false’); ?>

  11. Aaaah got it. Your number 1 solution is not working as you showed the wrong quotes!

    get_cat_icon(’class=myicons&link=false’);

    must be:

    get_cat_icon(‘class=myicons&link=false’);

    I think that is why people could not get it to work.

  12. Okay, that’s weird.

    If I copy get_cat_icon(’class=myicons&link=false’); you wrote on top of this page and paste in in the code of my webpage, it shows different quotes. Which I manually have to change. In my previous comment I posted the second time different quotes. Yet when I view my previous comment it looks like I pasted the same quotes twice.

    Anyway, changing the quotes made it work for me.

  13. Hi!

    first of all, thank you very much for your work with the Category-Icon Plugin for WordPress! It works fine, BUT only on the first page. that means, when i go to an other category, there is the border still visible :-( Do you have a trick or something ? :-)

    And again : Thank you !!

  14. Ohh sorry, i found the error by my self ! :-)

    i forgot to edit

    get_cat_icon(‘class=myicons&link=false’)

    also in archive.php and in page.php

    now it works PERFECT !!!

    Yeahhh

  15. Hello

    I’m trying to remove the border on my icons (also trying to get them display beneath each other but thats another story! :P ) but I can’t work out where I’m supposed to put these codes? What are the exact files and locations?

    Thank you :)
    Liane

  16. bonjour

    peut-on retirer aussi cette bordure avec la version lite dans la side bar ?