Modify a custom style by using page metadata

Learn how to modify the Page Builder styles to get the look you want by using page metadata.

Page Builder CSS style sheets should not be edited directly, since these changes might be lost during a fix pack upgrade. Instead, Page Builder CSS can be overridden in a new style sheet belonging to custom theme.

See Page builder CSS for more information about the Page Builder style sheets

1. Create a style sheet

   1. Open theme styles in WebDAV by going to dav:fs-type1/themes/<customTheme>/css/

   2. Create a folder: dav:fs-type1/themes/<customTheme>/css/custom/

   3. Create a CSS file under the custom folder: dav:fs-type1/themes/<customTheme>/css/custom/custom.css

2. Write the new styles

   1. Open a Portal page that has theme applied

   2. Use a tool like Firebug to select and inspect the style rules you want to change

   3. Type the style rules you want to change into the custom style sheet

3. Apply the custom style sheet to pages

   1. Figure out the root page for the area on which you want to apply the custom style. To apply to the entire site, choose the Content Root.

   2. Add metadata with a key of colorPalette and a value of css/custom/custom.css to the root

4. Use Firebug to inspect CSS

   1. Open the Firebug plug-in in a Firefox browser

   2. Click the element selection icon in the Firebug menu bar

   3. Click the area on the page you want to change

   4. Double check that the correct area is selected in the HTML tab on the left

   5. Look at the Style tab on the right to inspect all the CSS applied to the HTML element

   6. Edit the CSS in the Style tab until the HTML element looks how you want

   7. Copy the CSS you changed in the Style tab into the custom style sheet

Custom style example

Change the banner from white text on a black background, to black text on a white background.

1. Use firebug to select the banner.

2. Look at the Style tab to see that the lotusBanner CSS class assigns a black background-color and a background-image:

   .lotusBanner {
       background-color: #000000;
       background-image: -moz-linear-gradient(center top , #525252 0%, #000000 100%);
   } 

3. Change the style to white and add it to custom.css.

   .lotusBanner {
       background-color: #FFFFFF;
       background-image: -moz-linear-gradient(center top , #EEEEEE 0%, #FFFFFF 100%);
   } 

4. Use firebug to select the logo.

   .lotusui .lotusLogo, .lotusLoginLogo {
       background-image: url("../images/portalLogoWhiteText.png") !important;
   }

5. Change to use a black logo and add it to custom.css.

   .lotusui .lotusLogo, .lotusLoginLogo {
       background-image: url("images/portalLogoBlackText.png") !important;
   } 

6. Select a navigation link.

   .lotusBanner ul.lotusInlinelist li a, .lotusBanner ul li span.lotusUser {
       color: #EEEEEE;
   } 

7. Change the link color to black and add it to custom.css.

   .lotusBanner ul.lotusInlinelist li a, .lotusBanner ul li span.lotusUser {
       color: #000000;
   } 

8. Click the Style tab dropdown in Firebug and select :hover to show the styles that apply to the links when a mouse is hovering over them.

   .lotusBanner ul.lotusLinks a, .lotusBanner ul.lotusLinks a:visited, .lotusBanner ul.lotuslinks a:active, .lotusBanner ul.lotusLinks a:hover {
       color: #EEEEEE;
   }

9. Change the :hover link color to black and add it to custom.css.

   .lotusBanner ul.lotusLinks a, .lotusBanner ul.lotusLinks a:visited, .lotusBanner ul.lotusLinks a:active, .lotusBanner ul.lotusLinks a:hover {
       color: #000000;
   }

10. Select the Log Out link and look at the :hover style.

    .lotusBanner ul.lotusUtility a, .lotusBanner ul.lotusUtility a:visited, .lotusBanner ul.lotusUtility a:active, .lotusBanner ul.lotusUtility a:hover {
        color: #EEEEEE;
    }

11. Change the :hover link color to black and add it to custom.css.

    .lotusBanner ul.lotusUtility a, .lotusBanner ul.lotusUtility a:visited, .lotusBanner ul.lotusUtility a:active, .lotusBanner ul.lotusUtility a:hover {
        color: #000000;
    }

    All together, custom.css looks like the following sample:

    .lotusBanner {
        background-color: #FFFFFF;
        background-image: -moz-linear-gradient(center top , #eee 0%, #FFFFFF 100%);
    } 
    .lotusui .lotusLogo, .lotusLoginLogo {
        background-image: url("../images/portalLogoBlackText.png") !important;
    } 
    .lotusBanner ul.lotusInlinelist li a, .lotusBanner ul li span.lotusUser,
    .lotusBanner ul.lotusLinks a, .lotusBanner ul.lotusLinks a:visited, .lotusBanner ul.lotusLinks a:active, .lotusBanner ul.lotusLinks a:hover,
    .lotusBanner ul.lotusUtility a, .lotusBanner ul.lotusUtility a:visited, .lotusBanner ul.lotusUtility a:active, .lotusBanner ul.lotusUtility a:hover {
        color: #000000;
    }

Use the Change Style shelf

You can configure the Change Style shelf to have override style sheet show up as a choice. See Adding a custom style: wp7 and follow steps 4 and 5:

{'label':'Custom','id':'customc.css','url':'css/custom/custom.css', 'thumbnail':ibmCfg.themeConfig.themeRootURI+'/images/changeStyle/defaultThumb.gif', 'help':''}

Parent

Change page style
Page Builder CSS January 4, 2012

  2012/01/04 v7. Edition 2: Second edition includes corrections a... 2011/12/15 documentation refresh

+

Search Tips   |   Advanced Search