By sickfreq on

Can someone please walk me through how to add an icon to my aquasoft theme by modifying the style.css file? The directions:

The top toolbar icons(Primary Links) are customizable for each menu item. Refer to style.css for further information on how to assign icon for each item.

are a little vague. Here is what style.css says to do:

/* Specify Icons for each primary menu's menu item. */
ul.toolbarmenu {
margin-left:0;
padding:0;
}

Okay, that means almost nothing to me. I am not a php programmer, so I don't really know how to modify this properly. If someone has a working piece of code for me to examine that would help greatly.

Sick

⋅ Categories: Drupal 5.x

Comments

rszrama’s picture

rszrama commented

You need to look below that at the examples...

For the following info, refer to http://tracker.freebasic.net (an incomplete site I was working on in 4.7 that uses a modded Aquasoft... in fact, just examine the CSS there to see how to do it!).

/* Specify Icons for each primary menu's menu item. */
ul.toolbarmenu {
  margin-left:0;
  padding:0;
}

/* Below are two example icons assigned to Primary Menu Items named "Homepage" & "Forum".
Create a copy of one of the assigned styles and replace "Homepage" with your menu item
name & set image path to a new image (Note: Replace space in Menu Item name with underscore.)
You can find more theme related icons under "images/icons" folder. */

/*
li#User_CP a{
 display: block; background: url(images/icons/tb_usercp.gif) no-repeat top center; 
}

li#FAQ a{
 display: block; background: url(images/icons/tb_faq.gif) no-repeat top center;
} */

So.. remove the comments (the /* and */) from the li#... entries, copy and paste an entry for each one of your primary links. Then, change "li#User_CP" to whatever the name of your primary link is... "li#Home", "li#Forum", etc. Make sure you set the url properly, too. If you look at the CSS for the FB Tracker, you can see how I set these for each of the primary links on the site.

Let me know if you still can't get it!

sickfreq’s picture

sickfreq commented

I checked into your css file and it looks quite similar to mine. Here are the relevant parts of my css:

/* Specify Icons for each primary menu's menu item. */
ul.toolbarmenu {
margin-left:0;
padding:0;
}
/* Below are two example icons assigned to Primary Menu Items named "Homepage" & "Forum".
Create a copy of one of the assigned styles and replace "Homepage" with your menu item
name & set image path to a new image (Note: Replace space in Menu Item name with underscore.)
You can find more theme related icons under "images/icons" folder. 
*/

li#User_CP a{
 display: block; background: url(images/icons/tb_usercp.gif) no-repeat top center; 
}

li#FAQ a{
 display: block; background: url(images/icons/tb_faq.gif) no-repeat top center;
}

li#Search a{
 display: block; background: url(images/icons/tb_search.gif) no-repeat top center;
}

I think my problem is a lack of understanding on the primary link concept. I don't think I get the part about naming primary links.

For example, I have a primary link on the site to http://www.google.com It shows up as a hyperlink in the right margin. I'm not sure where this url, for google in this case, should be entered in order to make the icon appear. I apologize for my ignorance, and I appreciate your help. If you can dummy it down one more time, I should get it.

rszrama’s picture

rszrama commented

The primary links are an actual subset of the menu and are normally displayed somewhere in the header of a theme. At FB Tracker, the primary links are things like Home, Projects, Forums, Books, etc. The name is set in admin -> menus, and it's not the name of the URL. It's what's displayed on the page.

So, unless your site has these primary links named User_CP, FAQ, and Search, your icons will not show up. Do you have a URL for your site, or are you testing all on localhost?

----------------------
Current Drupal project: http://www.ubercart.org

sickfreq’s picture

sickfreq commented

I found where the menu is for administering the Primary links is located. I am toying around with the admin -> menus subsection and now I have some text where the icons should be, a start anyway. I cannot control the text, it is just this

ArrayArrayArrayArrayArrayArrayArrayArray

That also shows up in the footer. BTW, I have icons in the /var/www/themes/aquasoft/images/icons directory.

Does this have anything to do with the parent item box?

Thanks!

rszrama’s picture

rszrama commented

Hmm.. the Array bug is coming as a result of the upgrade from 4.7 to 5.0. Did you make sure to grab the right version of the theme for your version of Drupal?

----------------------
Current Drupal project: http://www.ubercart.org

sickfreq’s picture

sickfreq commented

I installed via apt-get and then downloaded the newest version and then ran the upgrade script. I will uninstall and start from scratch tonight starting with the newest version and see if that fixes it.

sickfreq’s picture

sickfreq commented

We have a winner! I just re-installed and now we are off and running with icons. Much thanks to you, rszrama, for staying with me on this problem.
SickFreq

rszrama’s picture

rszrama commented

Woohoo! Glad you got it working. : ) It's the most creative display for primary links I've seen in any of the themes available.

----------------------
Current Drupal project: http://www.ubercart.org

HangOut’s picture

HangOut commented

hi

Which Theme did you use for ubercart.org? It looks pretty good

Thanks
hangout

rszrama’s picture

rszrama commented

This is the new theme for Drupal 5.x called Garland. I tweaked the colors to a nice, rich brown, and I used a few modules to redesign the front page. (Views + Panels, there's a tutorial about it mentioned in the news at the site.)

----------------------
Current Drupal project: http://www.ubercart.org

bilgehan’s picture

bilgehan commented

Hi,
How can I set icons for menu items which have characters other than standart Ascii? Names coded with utf-8? As far as I know, in style.css file it's not posible to use non-ascii characters.
Thanks.

HangOut’s picture

HangOut commented

hi

How can I set Icons for Menu Items with slashes in them in Aquasoft theme?

Thanks
Hangout

You can use GETDREAMSALE code to get $50 OFF on yearly plans at Dreamhost