WordPress › Support » Add Icons to Sidebar Page Links?

dbtoutfit
Member
Posted 1 year ago #

Hi,

I am pulling my hair out here.

I am trying to simply list pages and Cat's to my side bar with Icons to the left of the link name

I have made a link with an icon for video yet the text to the right does not center to the icon on the left, the text is dropped down.

I have tried so many widgets to do this but all of them fail. They add Icons every where on the page the page/Cats links are but not in the sidebar. I only want icons in the sidebar forany link type.

Please someone help ease my madness!

:)
stvwlf
Member
Posted 1 year ago #
Its hard to know exactly what you are doing from the description.

What you want is to use the icons as CSS background images

HTML
```
<ul id="videos">
  <li><a href="somewhere">Video #1</a></li>
  <li><a href="somewhere">Video #2</a></li>
  <li><a href="somewhere">Video #3</a></li>
</ul>
```
CSS
```
ul#videos li {
   background: url(/path/to/my/icon.jpg) no-repeat;
   padding-left: 20px;
}
```
That will display the icon to the left of the link. You usually have to adjust the li padding both vertical and horizontal to get the text lined up with the icon.

you can also add image positioning to the icon like this
background: url(/path/to/my/icon.jpg) no-repeat 3px 5px;
that means to start displaying the background image 3 pixels to the right of its actual beginning and 5 pixels below the vertical top of the image. You can also use negative numbers on positioning.
dbtoutfit
Member
Posted 1 year ago #

HTML goes in the sidebar.php?
Css goes in the style.css?

But where?
I see the Notes in the style /*** Sidebar ***/ so i assume under that.

How ever I am not sure how or where to enter the html code.

Sorry I am an old html guy and css php is a bit different for me.

Thanks for your help

(Also my header.png is right up against the top of the page... where in the style.css can I enter the info to bring it down?)
stvwlf
Member
Posted 1 year ago #

HTML goes in the sidebar.php?
Css goes in the style.css?

yes.

Here are two articles I found that demo how to add bullets as background images on lists
http://html.cita.uiuc.edu/text/dec/dec-example-list.php

http://html.cita.uiuc.edu/text/dec/dec-example-list.php

They show the code required. You just add it to your sidebar and your style.css file.

I highly recommend the Firefox Firebug addon for learning to work with CSS as it shows you exactly what CSS is being applied to what element. Some of the biggest issues in CSS are learning about specificity. When multiple conflicting stylings are being assigned to the same element there has to be a way to determine which one "wins". A text color can't be red and green at the same time.

So there are cascading rules that determine which element gets applied and which element overrides other stylings assigned to the same HTML on the page. It takes some practice and it can be really confusing for a while. I used to have a very difficult time with CSS, coming from old school HTML myself. But I finally got it, and it is a great tool. It requires changing the way you think, that is the hardest part. HTML is for "what" and CSS is the "how". First you create the what. Then you make it look the way you want it to.

As far as header.png, that could be any of a number of things. Post a URL of your page and I'll look at it and try to help fix the problem.
dbtoutfit
Member
Posted 1 year ago #

http://www.xmarkcomputers.com/Andrea/
dbtoutfit
Member
Posted 1 year ago #

Also I want a different icon for each link so video has a video icon photos have a photo icon and so on.

With the code about do this?

Eric
stvwlf
Member
Posted 1 year ago #
what you do in that case is assign a class to each <li> tag.
```
<ul>
  <li class="video"><a href="somewhere">Video #1</a></li>
  <li class="photo"><a href="somewhere">Photo #1</a></li>
  <li class="video"><a href="somewhere">Video #2</a></li>
</ul>
```
CSS
```
ul li.video {
   background: url(/path/to/my/video_icon.jpg) no-repeat;
   padding-left: 20px;
}
ul li.photo {
   background: url(/path/to/my/photo_icon.jpg) no-repeat;
   padding-left: 20px;
}
```
a little more polished is to do it this way: Make one of the classifications the default. If you have more videos than photos, make the default condition a video icon is assigned to everything. Then you only need to override that with a class in the case of photos.

HTML
```
<ul class="products">
  <li><a href="somewhere">Video #1</a></li>
  <li class="photo"><a href="somewhere">Photo #1</a></li>
  <li><a href="somewhere">Video #2</a></li>
</ul>
```
CSS
```
ul.products li {
   background: url(/path/to/my/video_icon.jpg) no-repeat;
   padding-left: 20px;
}
ul.products li.photo {
   background: url(/path/to/my/photo_icon.jpg) no-repeat;
   padding-left: 20px;
}
```
What is happening is all <li>'s that are children of a <ul> with the class "products" are assigned the video icon. That assignment is overridden with a more specific one when the <li>'s has the photo class.

<li>'s in the photo class actually have two background images being assigned to them in the above css. The LI assignment to LI.photos is more specific than the assignment to just LI so the LI.photo gets the photo background.

Hope this helps in explaining.
stvwlf
Member
Posted 1 year ago #

The reason you are having the problem on xmarkcomputers is the space allocated for the header is 300 high by 950 wide. The image you are displaying in the header is 1500 wide by 311 high.

You have the difference between 1500 and 900 handled by saying the image should be centered, but you haven't accounted for the difference between 311 and 300.

I was able to make the image display in a better location by changing the background CSS to this
background: url("images/header.png") no-repeat 50% 11px;

That tells the browser to start displaying the image 11 pixels from its top, which gives an effective display of 300, the size of the header.

A good analogy of how to think of this is of a window on a computer desktop that is of a size where the entire program being looked at doesn't completely fit in the available window space. The program throws up scrollbars so you can see the whole thing, though not at once.

When the background image is bigger than the available space to display it, we can tell the browser the vertical and horizontal place to begin displaying the image. That is what my CSS above is doing. The first number is the horizontal, the second the vertical.

If I had a situation like this I would resize the image proportionately so the height was 300. Then the problem goes away. Or else crop 11 pixels of height off the bottom for the full 1500 width.
dbtoutfit
Member
Posted 1 year ago #

Did all your suggested info on the head image worked like a champ!
Thanks...

Now I just need to work on the icons in the side bar.

I just hope I put the code on the right line/location....

Eric
dbtoutfit
Member
Posted 1 year ago #

Well I must have put the code in the wrong place cause its not showing up in the side bar :( .....
stvwlf
Member
Posted 1 year ago #

you will have to post a link if you want some help
dbtoutfit
Member
Posted 1 year ago #

oh sorry same website.

let me know what you need...
dbtoutfit
Member
Posted 1 year ago #

ok,

I got the links to show up in the side bar but I must still be placing the code in the wrong place in the style.css cause the icons are still not coming up. Also theres some little dark red bullets where I want the icons. I wonder if this is causing some issue with the icons? I know I want them gone.

I have removed the code for now from the css. I just cant figure out the right place to put it.

I've added and removed it just about ne place I could find that made sense but no go.

Site: http://www.xmarkcomputers.com/Andrea/

If there is something you need to help me let me know, I'm assuming you can view the source code of my site to see the code or you already know where this code should be placed.

Thanks again for the help.
stvwlf
Member
Posted 1 year ago #
No I can't see your source code. I can see your HTML sent to the browser but not the original PHP code.

Based on what I see, it looks like you made the menu with the WordPress menu system. That is good, actually.

What you need is a custom class on each menu item, and the menu builder lets you add one. I just started working with that recently and discovered that some of its options don't display until you change some settings.

Go to Menu in the dashboard. At the very top of the page at the right, open up Screen Options. Make sure there is a check in CSS Classes and Link Target and then click screen options tab again to close it.

When you now open each of your menu options you will find a field for CSS classes. Going back to that code I sent about video and photo, enter on each option the name of the class you want to asociate with that option. Video, photo, one for each background image you want to add. Save all the changes you made.

put all the background images in the "images" folder that is in your WP theme folder.

you should now be able to assign a background image with CSS like this
```
.menu li.video {
   background: url(images/video_bkgrnd_img.jpg) no-repeat;
   padding-left: 20px;
}
```
that assumes that at least one of the menu items you assigned a class to in the Menu Builder received a class of "video", and that the name of your video background image for the video class is video_bkgrnd_img.jpg If you used a different files name or assigned a class other than "video" then use the real names that you used.
dbtoutfit
Member
Posted 1 year ago #

K thanks,

Im going to get to it....
dbtoutfit
Member
Posted 1 year ago #

couldnt find where I could delete these posts. disregard, but i got it.

Thanks for your help so much.
dbtoutfit
Member
Posted 1 year ago #

How do I get the text to end up being on the left side of the icon and where do I adjust the icon size?
As far as the little red bullets next to the icon/text. How do I get rid of it?

Thanks
dbtoutfit
Member
Posted 1 year ago #

Got everything working thanks for all your help.

Heres a good link that I would use if I was trying to do this the first time as I know this post could be confusing at this point.

For adding custom icons to each link (must use text widget).
(This method allows you full control over icon and text placement and so forth, very easy method)
http://forum.bytesforall.com/showthread.php?t=201

For removing the Round, square etc bullets on the list in the sidebar.
(this also covers how to add icons to your list in place of the bullets, in another words all the icons would be the same using the method described here)
http://codex.wordpress.org/Styling_Lists_with_CSS

Hope this helps someone,
Eric
stvwlf
Member
Posted 1 year ago #

hi

I've been too busy to get back to you so far. Glad to hear you've got it figured out. Those are two good articles.
dbtoutfit
Member
Posted 1 year ago #

Not a problem, You were more than helpful.
Had you not helped I would have never stumbled over those articles while trying to put the pc's together.

Thanks you for your time to a complete stranger.

:)

Topic Closed

This topic has been closed to new replies.

WordPress.org

Forums

Add Icons to Sidebar Page Links? (20 posts)

Topic Closed

About this Topic

Tags

Code is Poetry