Add Icons to Sidebar Page Links?

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.

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

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
https://html.cita.uiuc.edu/text/dec/dec-example-list.php

https://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.

https://www.xmarkcomputers.com/Andrea/

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

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.

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.

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

Well I must have put the code in the wrong place cause its not showing up in the side bar ?? …..

you will have to post a link if you want some help

oh sorry same website.

let me know what you need…

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: https://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.

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.

K thanks,

Im going to get to it….

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

Thanks for your help so much.