Advertisement:

Author Topic: [TIP] - How to add Icons to Modern Theme Properly  (Read 3076 times)

tryinghard

  • Newbie
  • *
  • Posts: 21
[TIP] - How to add Icons to Modern Theme Properly
« on: September 16, 2014, 08:50:47 pm »
Hi guys,

After alot of googling i finally figured out how to add icons for MODERN theme. Most of the instructions were for other themes which led me on a wild goose chase. So this is finally the way to do it.

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)
This is very important that you create the name EXACTLY the same as your category, that includes spaces or characters etc.
- -

3.)
* Now open.: inc.main.php :.
and find this piece of code (approx line 31)
 

<h1><strong><a class="category cat_<?php echo osc_category_id(); ?>" href="<?php echo osc_search_category_url(); ?>"><?php echo osc_category_name(); ?></a> <span>(<?php echo osc_category_total_items($



- -


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 -->

or if you want the title under the icon, then replace the code with this:

<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('extraimg/icon/') . osc_category_name() .'.png' ?>" width="20px" height="20px" 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>

And thats it, as good as golden. Hope someone else finds it useful otherwise i spent a few hours screwing around with zero luck.

thanks to the original author for the headsup.
----
« Last Edit: September 17, 2014, 11:15:33 am by tryinghard »

design

  • Hero Member
  • *****
  • Posts: 2619
  • Osclass 3.5 MAC/PC w/ Modern Browsers
Re: How to add Icons to Modern Theme Properly
« Reply #1 on: September 17, 2014, 02:18:48 am »
you should write [TIP] in your subject line!

thanks for the help and research - we need all we can get  ;D

greg2012

  • Jr. Member
  • **
  • Posts: 66
Re: [TIP] - How to add Icons to Modern Theme Properly
« Reply #2 on: October 06, 2014, 06:55:38 am »
This sounds really interesting. Can you or someone turn this info into a plug (or theme?) and and make life easier for us.
 8)

design

  • Hero Member
  • *****
  • Posts: 2619
  • Osclass 3.5 MAC/PC w/ Modern Browsers
Re: [TIP] - How to add Icons to Modern Theme Properly
« Reply #3 on: October 08, 2014, 10:05:34 pm »
this would be a personal touch using built in helpers, some themes will have it some won't, some want it some don't, which is why it is a "helper".
 why this post exist is as an example of how to use the helper for customizing your theme (so it doesn't look like anyone else's)

tomshaft

  • Hero Member
  • *****
  • Posts: 862
  • Osshaft for Osclass - Add 650 posts to my total
Re: [TIP] - How to add Icons to Modern Theme Properly
« Reply #4 on: October 08, 2014, 10:16:35 pm »
The first post of code is a very old post belonging to a long lost member s51. If I recall correctly he wrote it for the modern theme so not sure what the issues where?

Tom

design

  • Hero Member
  • *****
  • Posts: 2619
  • Osclass 3.5 MAC/PC w/ Modern Browsers
Re: [TIP] - How to add Icons to Modern Theme Properly
« Reply #5 on: October 08, 2014, 10:23:09 pm »
me either...memory of a goldfish lol  :-X

f

tomshaft

  • Hero Member
  • *****
  • Posts: 862
  • Osshaft for Osclass - Add 650 posts to my total
Re: [TIP] - How to add Icons to Modern Theme Properly
« Reply #6 on: October 08, 2014, 10:49:42 pm »
me either...memory of a goldfish lol  :-X

f

Actually sweet thang - I only remembered when I seen the code. It still has his username in it.

Tom

design

  • Hero Member
  • *****
  • Posts: 2619
  • Osclass 3.5 MAC/PC w/ Modern Browsers
Re: [TIP] - How to add Icons to Modern Theme Properly
« Reply #7 on: October 09, 2014, 12:13:57 am »
lol..didnt even notice that !

btw..nice to hear from you again  :-*

tryinghard

  • Newbie
  • *
  • Posts: 21
Re: [TIP] - How to add Icons to Modern Theme Properly
« Reply #8 on: October 14, 2014, 10:06:42 am »
Just to clarify whilst the code of s51 worked, the instructions were outdated on where and what file to modify. This is simply a collation of instructions with the right instructions on where to add the modification and what file to do it in in newer osclass.


blinkmeoff22

  • Newbie
  • *
  • Posts: 11
Re: [TIP] - How to add Icons to Modern Theme Properly
« Reply #9 on: December 30, 2014, 04:34:48 pm »
how can i do the same, but with subcategories? On the other page i have subcategories and i want to give them icons, help

falouche

  • Newbie
  • *
  • Posts: 38
Re: [TIP] - How to add Icons to Modern Theme Properly
« Reply #10 on: March 17, 2015, 07:05:14 pm »
Hi

how to do the same with bener theme, pleaz