locked
setting an image for the quick launch ment item RRS feed

  • Question

  • I created my own master page from the default.master

    I also created my own folder Images folder and css file to override the default values and I turned theming off. I tested the menu item by setting the background to Yellow which works, so I have the right class I believe.

    I have a custom image 280x50 that I want behind then menu items, but I can't get an image to display.

    Here's my css, can anyone help me? I'm using Sharepoint Designer to edit the files.

    .menu .menu-item   {
        
         background-image: url('/_layouts/images/GemsImages/MenuTab_normal_v6.png');
         width: 280px;
         height: 50px;
    }
    
    


    Wednesday, November 30, 2011 8:02 PM

Answers

  • First off it sounds like your talking about SP2010 quicklaunch b/c those are the classes in there. The second thing is to test your CSS first using IE Dev Toolbar or Firebug. You can use those tools to quickly apply CSS to elements on the page. 

    Then by looking at the HTML, find out what classes you need to create styles for. Then put that into your pagelayout/cewp/masterpage/css/whatever. At least then once you put in your style you can inpsect the HTML and see if its being applied or overriden. Then you can go back and adjust your css.

    gl

     


    -tom daly
    • Marked as answer by nick5454 Thursday, December 1, 2011 4:24 PM
    Thursday, December 1, 2011 5:04 AM

All replies

  • First off it sounds like your talking about SP2010 quicklaunch b/c those are the classes in there. The second thing is to test your CSS first using IE Dev Toolbar or Firebug. You can use those tools to quickly apply CSS to elements on the page. 

    Then by looking at the HTML, find out what classes you need to create styles for. Then put that into your pagelayout/cewp/masterpage/css/whatever. At least then once you put in your style you can inpsect the HTML and see if its being applied or overriden. Then you can go back and adjust your css.

    gl

     


    -tom daly
    • Marked as answer by nick5454 Thursday, December 1, 2011 4:24 PM
    Thursday, December 1, 2011 5:04 AM
  • The problem I have is referencing the  image from css. What is the correct path for an image.

     

    Like the Calculate32.png file in the images folder. How would I refer to that image in my custom css?


    • Edited by nick5454 Thursday, December 1, 2011 2:18 PM
    Thursday, December 1, 2011 1:42 PM
  • Ok, so this works for the Reference

    .menu .menu-item .additional-background
    {
    	 background-image: url("/_layouts/images/quicklaunchheader.gif");
         width: 280px;
         height: 50px;
    	display: block;
    }
    


    And I have a folder called GemsImages, which has my image and it won't show the picture, but it does show the quicklaunchheader.png picture

    My ref for my picture

    url("/_layouts/images/GemsImages/MenuTab_normal_v6.png");

     

    Why does it not see my Gems folder?

    Sorry about the wrong forum it's Sharepoint 2010. When I google Sharepoint msdn forum pre-2010 always comes up and I forgot to click the forums and go to the parent.

     

    Thursday, December 1, 2011 2:39 PM
  • So I found the image placement and it's in the main images directory 14/Template/Images

     

    • Edited by nick5454 Thursday, December 1, 2011 4:24 PM
    Thursday, December 1, 2011 4:23 PM
  • So you figured it out?

    14/Template/Images should map to /_layouts/images/mypic , thats the physical directory. if you have multiple Web fronts ends a picture might not show if you didn't copy it to both. In those cases easier to host it in SharePoint.

    Also to verify a picture is in that folder I always try to hit the picture through the browser. 

    If its giving you trouble i would say move the pic to a sharepoint folder. gl


    -tom daly
    Saturday, December 3, 2011 2:12 AM