SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2005
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    External link icon on top of bg in sidebar

    Hi,

    I need to add an icon on my sidebar menu that shows which link is external.

    I found this css code (http://www.csstemplatesweb.com/css-a...ks-with-css/):

    Code:
    a[href^="http:"]
    {
    background: url(images/yourimage.gif) no-repeat right center;
    padding-right: 1em;
    }
    But I am running into a problem, as my sidebar menu already has set background properties.

    Is it possible to add a second bg on top of the first one?

    Below is the code from my css:



    Code:
    .sidebar .widget ul, .sidebar .widget_categories ul {
    	margin:0;
    	background:url(../press/images/sidebar_list_line.gif) left top no-repeat;
    	padding-top:2px;
    	font-weight:normal}
    
    .sidebar .widget ul ul a, .sidebar .widget_categories ul ul a {
    	padding-left:70px;
    	background:url(../press/images/ico_arrow_blue2.gif) 56px 12px no-repeat;}
    
    .sidebar .widget ul ul a:hover, .sidebar .widget_categories ul ul a:hover {
    	background:url(../press/images/sidebar_list_hover3.png) 0 0 no-repeat;}
    	
    .sidebar .widget li, .sidebar .widget_categories li {
    	list-style:none;
    	background:url(../press/images/sidebar_list_line.gif) left bottom no-repeat;
    	padding-bottom:2px;
    	margin:0}
    
    .sidebar .widget li a, .sidebar .widget_categories li a {
    	display:block;
    	background:url(../press/images/ico_arrow_blue2.gif) 36px 12px no-repeat;
    	padding:5px 5px 5px 50px}
    	
    .recentcomments a {
    	background:none!important;
    }
    
    .recentcomments{
    	padding:5px 20px 5px 30px;
    }
    
    .sidebar .widget li a:hover, .sidebar .widget_categories li a:hover {
    	background:url(../press/images/sidebar_list_hover.png) 0 0 no-repeat;
    	color:#023d67}
    
    #sidebar_left .sidebar .widget_categories li a, #sidebar_left .sidebar .widget li a{
    	background:url(../press/images/ico_arrow_blue2.gif) 16px 12px no-repeat;
    	padding:5px 5px 5px 30px}
    
    #sidebar_left .sidebar .widget_categories li a:hover, #sidebar_left .sidebar .widget li a:hover {
    	background:url(../press/images/sidebar_list_hover2.png) 0 0 no-repeat;
    	color:#023d67}
    Thanks!
    Looking for partners/sales people advertising & content deals

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    You could put a <span> inside those links and set styles for the spans for certain links. E.g.

    Code:
    a[href^="http:"] span {
      background: url(images/yourimage.gif) no-repeat 0 0;
    }
    You'll need to experiment with the settings on that span, like giving is a height and width to match the dimensions of the background image, and perhaps also display: inline-block;


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •