US 1.877.212326.2662
Browse Search
HOWTO: Customizing the Skin for Bamboo Navigators Using the Custom Style Option
Created on: 27-Oct-13. Print Article
Last Modified on: 04-Nov-13. Email Article
Skill Level: Intermediate.
Article has been viewed: 5060 times.
Rated: 1 out of 10 based on 1 vote.
KB.13015

APPLIES TO:

About This Article

This article has four sections:

Related Information

TOP


Where is the Custom File?

  • After adding the Web Part to the site, BambooSolutions folder will be created in the Style Library list of SharePoint. And the Style Library only exists on the root site of the site collection.
  • Go to the root site of the site collection > Settings > Site Contents > select Style Library list > BambooSolutions folder > select Bamboo.Navigators folder.
  • There are three folders for Menu, Tabstrip and Treeview folder for each Web Part (Bamboo Navigator Menu Web Part, Bamboo Navigator TabStrip Web Part, Bamboo Navigator Tree Menu Web Part).

  • In each folder we will see two default files: one contains images and one is CSS file. Go to the Menu folder > Skins > Customskin and you should see them.

  • If you want to use unique styles and colors for the Navigator Web Parts, you have to make changes to the CSS file of each Web Part (Menu, TabStrip, Tree Menu). For example Menu Web Part, the CSS file is Menu.CustomSkin file.

Custom Skin for Bamboo Navigator Menu Web Part

  • Add Bamboo Navigator Menu Web Part to the page or to the site.
  • Configure the tool pane, select Custom Style option.

  • Download the CSS file for each Web Part (Menu, TabStrip, Tree Menu), as Menu Web Part download Menu.CustomSkin that belongs to Menu folder and make the necessary changes such as background menu, and/or text color.

  • Upload the modified file to the Customskin folder.
  • On the Web Part, the background and the text color of menu are shown as:

Note:

    • If the default folder (Customskin) is selected to not be used, create a new folder Myskin the same level as with the Customskin and copy the images file and the CSS file to the Myskin folder, Image file name should be “Menu” and CSS file name should be “Menu.MySkin”.

    • However, it is required to replace all the name “Customskin” of classes in the CSS file to “Myskin”.

    • It is also required to change the path to Myskin in the tool pane.

    Custom Skin for Bamboo Navigator TabStrip Web Part

    • Add Bamboo Navigator TabStrip Web Part to the page or the site.
    • Configure the tool pane, select Custom Style option.

    • Download the TabStrip.CustomSkin file belongs to the TabStrip folder and make the necessary changes such as background of the TabStrip:

    • Upload the modified file to the Customskin folder.
    • On the Web Part, the text-color, the background of level1/ level2 and the background when item selected are shown as:

    Note:

    • If the default folder (Customskin) is selected to not be used, create a new folder Myskin the same level as with the Customskin and copy the images file and the CSS file to the Myskin folder, the Image file name should be “Tabstrip” and the CSS file name should be “Tabstrip.MySkin”.

    • It is required to replace all the name “Customskin” of classes in the CSS file to “Myskin”.

    • It is also required to change the path to Myskin in the tool pane.

    Custom Skin for Bamboo Navigator Tree Menu Web Part

    • Add Bamboo Navigator Tree Menu Web Part to the page or the site.
    • Configure the tool pane, select Custom Style option:

    • Download TreeView.CustomSkin file that belongs to Tree Menu folder.
    • Edit CSS code for Tree Menu such as text color.

    • Upload the modified file to the Customskin folder.
    • On the Web Part, the text color of the Tree menu is shown as:

    Note:

    • If the default folder (Customskin) is selected to not be used, create a new folder Myskin the same level as with the Customskin and copy the images file and the CSS file to the Myskin folder, the Image file name should be “TreeView” and the CSS file name should be “TreeView.MySkin”.

    • It is required to replace all the name “Customskin” of classes in CSS file to “Myskin”.

    • And it is also required to change the path to the Myskin in the tool pane.

    Related Articles
    No Related Articles Available.

    Article Attachments
    No Attachments Available.

    Related External Links
    No Related Links Available.
    Help Us Improve This Article
    What did you think of this article?

    poor 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

     excellent
    Tell us why you rated the content this way. (optional)
       
    Approved Comments
    No user comments available for this article.