Category icons for Bender theme

[cus]

Does anyone know the code to add catergory icons on bender theme main page? 

Thanks,
Tim
www.canadausedsports.com
www.schlepmobile.com

[cus]

Anyone??

Thanks

[jromero]

Hi,

I am interested in this too. Hope someone can help us. Check my site walalia.com

Regards

[ugogo.info]

I'm interested in this also.

[AVBestDeals]

Has anyone gotten this to work with the 3.2 Bender Template yet?
Is so could you please share this with the forum members!

Thanks

AVBestDeals

[s51]

.

Hi: Cus & jromero & ugogo & AVBestDeals,  -  and all other OSClass friends . . .


1.)
New subdirs like this.: ../oc-content/themes/bender/s51extra/maincategoryicons
* Create x1 eXtra sub dir  =  s51extra
* and x1 more under s51extra  =  maincategoryicons
- -

2.)
* Now create a number of PNG files, - visual corresponding to your categories,
width 140px height 60px and save them as.: Png24 interlaced transperent
and name each PNG24 file ..exactly.. as your category names.
(only a example.: Categori= For sale = For sale.png)
- -

3.)
* Now open.: functions.php :. under Bender theme
and find this piece of code
<h1><a class="category <?php echo osc_category_slug() ; ?>" href="<?php echo osc_search_category_url() ; ?>"><?php echo osc_category_name() ; ?></a> <span>(<?php echo osc_category_total_items() ; ?>)</span></h1>
(remember to close it with comments <!--  -->
- -


4.)
* Then replace it with this:
<!-- YourName START eXtra code insert of main category Png icons -->
<h1><a class="category <?php echo osc_category_slug() ; ?>" href="<?php echo osc_search_category_url() ; ?>"> <img src="<?php echo osc_current_web_theme_url('s51extra/maincategoryicons/') . osc_category_name() .'.png' ?>" width="140px" height="60px" alt="" title=""/></a> <span><strong>(<?php echo osc_category_total_items() ; ?>)</strong></span></h1>
<!--  YourName STOP eXtra code insert of main category Png icons -->
- -

5.)
And 1-2-Pronto you have images on your main categories 
(NOTE: I have ..not.. tested it with sub categories in several levels)
- -




Best Regards.:/ s51
.

[AVBestDeals]

Hi s51

First let me say thank you for the post and code, your code worked great!

The only thing that did not work was that your code replace the Categories name with the images
and I wanted to have the Images and the Categoies Labele names below the images so i make some changes to your code

NEW Code with Categories Images and Categories Label Names below the images (I also change the subfolder name s51extra = icons in the new code)

Code: [Select]

<!-- <h1><strong><span class="category <?php echo osc_category_slug() ; ?>"></span><a href="<?php echo osc_search_category_url() ; ?>"><?php echo osc_category_name() ; ?></a> <span>(<?php echo osc_category_total_items() ; ?>)</span></strong></h1> -->

<!-- START code insert of main category Png icons -->
<h1><a class="category <?php echo osc_category_slug() ; ?>" href="<?php echo osc_search_category_url() ; ?>"><img src="<?php echo osc_current_web_theme_url('icons/maincategoryicons/') . osc_category_name() .'.png' ?>" width="50px" height="50px" alt="" title=""/></a>

<br /><strong><span class="category <?php echo osc_category_slug() ; ?>"></span><a href="<?php echo osc_search_category_url() ; ?>"><?php echo osc_category_name() ; ?></a> (<?php echo osc_category_total_items() ; ?>)</span></strong></h1>
<!-- END code insert of main category Png icons -->

Thanks for the help and support!

AVBestDeals

[cus]

Very cool.   Works great. 

Thanks again!

[s51]

.
Hi  AVBestDeals, and other friends . . .

1.)
>>The only thing that did not work was that your code replace the Categories name with the image
Yes,,, I just forgot to put the other out (two variations) - but this you manage self
- -

2.)
Why I normaly use the version I put out, - is because I seemed we get a double effect,
using both category image, - and category text (see my jpg test example)
- -


And you're all welcome, and have a nice day
Best Regards.:/ s51
.

[AVBestDeals]

Thank you s51

AVBestDeals

[shamim_biplob]

Hi s51

First let me say thank you for the post and code, your code worked great!

The only thing that did not work was that your code replace the Categories name with the images
and I wanted to have the Images and the Categoies Labele names below the images so i make some changes to your code

NEW Code with Categories Images and Categories Label Names below the images (I also change the subfolder name s51extra = icons in the new code)

Code: [Select]

<!-- <h1><strong><span class="category <?php echo osc_category_slug() ; ?>"></span><a href="<?php echo osc_search_category_url() ; ?>"><?php echo osc_category_name() ; ?></a> <span>(<?php echo osc_category_total_items() ; ?>)</span></strong></h1> -->

<!-- START code insert of main category Png icons -->
<h1><a class="category <?php echo osc_category_slug() ; ?>" href="<?php echo osc_search_category_url() ; ?>"><img src="<?php echo osc_current_web_theme_url('icons/maincategoryicons/') . osc_category_name() .'.png' ?>" width="50px" height="50px" alt="" title=""/></a>

<br /><strong><span class="category <?php echo osc_category_slug() ; ?>"></span><a href="<?php echo osc_search_category_url() ; ?>"><?php echo osc_category_name() ; ?></a> (<?php echo osc_category_total_items() ; ?>)</span></strong></h1>
<!-- END code insert of main category Png icons -->

Thanks for the help and support!

AVBestDeals

It is working nice in local server but when i try in live server i dont kno why icons are not showing.

please help me if can

[emakarskacom]

Thank you for the post and code, your code worked great!

Now I have problem with mobile version, now my mobile site is disgusting.

How to embellish mobile version?

[emakarskacom]

Thank you for the post and code, your code worked great!

Now I have problem with mobile version, now my mobile site is disgusting.

How to embellish mobile version?

[raess]

This also work on Minimalist  theme with some mods.

in main.php replace this:

Code: [Select]

<h1><strong><a class="category cat_<?php echo osc_category_id(); ?>" href="<?php echo osc_search_category_url(); ?>"><?php echo osc_category_name(); ?></a> <?php echo clb_minimalist_format_category_ad_count(); ?></strong></h1>
With this:

Code: [Select]

<h1><strong><a class="category cat_<?php echo osc_category_id(); ?>" href="<?php echo osc_search_category_url(); ?>"> <img src="<?php echo osc_current_web_theme_url('s51extra/maincategoryicons/') . osc_category_name() .'.png' ?>" width="20px" height="20px" alt="" title=""/><?php echo osc_category_name(); ?></a> <?php echo clb_minimalist_format_category_ad_count(); ?></strong></h1>

[design]

Edited to add: follow directions with image size, and file save to work in all browsers!

the code has been adjusted to be accessibility compliant. make sure to keep it in h1 tags using <br /> for spacing  & in main.css if you don't want the images to show in responsive add .r-list li img display:none; @media (xxx)

Code: [Select]

<div class="category"><img src="<?php echo osc_current_web_theme_url('images/') . osc_category_name() .'.png' ?>"  width="140px" height="60px" alt="<?php echo osc_category_name() ; ?>" title="<?php echo osc_category_name() ; ?>"/></div>
previous error:  I actually believe this is a simple fix but it must be a snake  . I put the full image url pathway in the browser and I go to the broken image-not a 404! but no image!! (yes it's loaded, tripled check)