locked
how to apply different banners for different pages within a site? RRS feed

  • Question

  • Hi all i have 6 pages within a site and a banner is applied in default.master. now i need to apply 6 different banners to 6 different pages. how to resolve this issue???
    Monday, February 14, 2011 7:11 AM

Answers

  • If i understood correctly, there is one banner on the master page and depending on different content page (6 pages in your case) you have to change banner when page loads.

    You can do by this way.

    1. I think there is one DIV on master page which is showing banner and image in coming from CSS stylesheet.

    Banner HTML
    
    <div id="banner"></div>
    
    Banner CSS
    
    #banner
    {
      background-image: url("../Images/banner.jpg");
      background-repeat: no-repeat;
      height: 126px;
      margin-top: 10px;
      width: 256px;
    }
    

    2. Use CEWP (Content Editor WebPart) on content pages and use inline styles to override image path , so when your page get loaded, inline  style on the content page will change the path.

    <style type="text/css">
    	#banner
    	{
    		background-image: url("../Images/banner1.jpg");
    	}
    </style>
    


    w: http://www.worldofsharepoint.com | t: @sharesandip
    • Marked as answer by Emir Liu Friday, February 25, 2011 2:26 AM
    Monday, February 14, 2011 10:31 AM
  • Yes you can add CEWP page the page and change the banner, however you said its part of your masterpage and you want it to appear on all the page. Its not possible to add the CEWP to each page. This is what I do in these circumstances. - JQUERY!

    so in your master link to the jquery lib... This would be added to the masterpage

    <script src="path to jquery lib"></script>

    <script>

    $(document).ready(function(){

    var url = window.location.toString();

    //here you could put your subsite, managed path, or page.aspx

    if(url.indexOf("/subsite1") != -1) {

    //here you could put an image in .. or do .css("background-image","/path/image.png")

    $("#banner-image").html("<img src='imagesrc'/>");

    }

    //then just repeat for the six sites

    if(url.indexOf("/subsite2") != -1) {

    $("#banner-image").css("background-image","/blah/blah.png");

    }

    });

     

    </script>

    <div id="banner-image"></div>

     

     

     

     

    Hope that helps!


    -tom daly
    • Marked as answer by Emir Liu Friday, February 25, 2011 2:26 AM
    Wednesday, February 16, 2011 5:07 AM

All replies

  • and im using moss 2007

    Monday, February 14, 2011 7:12 AM
  • Hi Rahul,

     

    You can create different master pages & for each page you can apply a specific master page.

    This can be done using SP Designer. using the menu,  Format-> Master Page -> Attach Master Page.

     

    Thanks,

    Chanakya

    Monday, February 14, 2011 9:13 AM
  • Every page will have to use the same masterpage. After that you have to make 6 different stylesheets where you have a modification on the image(url) in the placeholder. These stylesheets have to be added to the page, by clicking add stylesheet on the right of the screen in Designer.

     

     So Page1 gets Stylesheet1 with Banner1

    Page 2 gets Stylesheet2 with Banner2 etc.

     

    is it possible to do like this?? if yes plese help in how to write that css and how to attach?

    Monday, February 14, 2011 9:23 AM
  • If i understood correctly, there is one banner on the master page and depending on different content page (6 pages in your case) you have to change banner when page loads.

    You can do by this way.

    1. I think there is one DIV on master page which is showing banner and image in coming from CSS stylesheet.

    Banner HTML
    
    <div id="banner"></div>
    
    Banner CSS
    
    #banner
    {
      background-image: url("../Images/banner.jpg");
      background-repeat: no-repeat;
      height: 126px;
      margin-top: 10px;
      width: 256px;
    }
    

    2. Use CEWP (Content Editor WebPart) on content pages and use inline styles to override image path , so when your page get loaded, inline  style on the content page will change the path.

    <style type="text/css">
    	#banner
    	{
    		background-image: url("../Images/banner1.jpg");
    	}
    </style>
    


    w: http://www.worldofsharepoint.com | t: @sharesandip
    • Marked as answer by Emir Liu Friday, February 25, 2011 2:26 AM
    Monday, February 14, 2011 10:31 AM
  • Yes you can add CEWP page the page and change the banner, however you said its part of your masterpage and you want it to appear on all the page. Its not possible to add the CEWP to each page. This is what I do in these circumstances. - JQUERY!

    so in your master link to the jquery lib... This would be added to the masterpage

    <script src="path to jquery lib"></script>

    <script>

    $(document).ready(function(){

    var url = window.location.toString();

    //here you could put your subsite, managed path, or page.aspx

    if(url.indexOf("/subsite1") != -1) {

    //here you could put an image in .. or do .css("background-image","/path/image.png")

    $("#banner-image").html("<img src='imagesrc'/>");

    }

    //then just repeat for the six sites

    if(url.indexOf("/subsite2") != -1) {

    $("#banner-image").css("background-image","/blah/blah.png");

    }

    });

     

    </script>

    <div id="banner-image"></div>

     

     

     

     

    Hope that helps!


    -tom daly
    • Marked as answer by Emir Liu Friday, February 25, 2011 2:26 AM
    Wednesday, February 16, 2011 5:07 AM