Edit

Manage CSS files

  • Article

Cascading Style Sheets (CSS) allows you to control the formatting and styling of your site.

By default, new Power Pages sites will have bootstrap.min.css, theme.css and portalbasictheme.css files installed as part of the site templates.

You can modify the style using the Styling workspace or you can upload your own custom CSS files.

When you upload a new custom CSS file, it will be available as a web file in the Portal Management app.

Note

Power Pages sites use Bootstrap 3.3.x. Site developers should not replace Bootstrap 3 with other CSS libraries as some of the scenarios in Power Pages are dependent on Bootstrap 3.3.x. For more information, see Understanding Bootstrap framework and Customize Bootstrap sections in this article.

Manage custom CSS files in the Styling workspace

  1. Go to Power Pages.

  2. Select Edit on the site you want to add a page.

  3. Select the Styling workspace.

  4. Select the Manage CSS option under more options in Styling Workspace.

    Manage CSS files using design studio.

Upload CSS files

In the Manage CSS panel you'll see a list of the default CSS files:

  • bootstrapmin.css
  • theme.css
  • portalbasictheme.css

To upload your custom CSS file, select Upload and choose your custom CSS file.

Upload CSS files using design studio.

Note

  • You can upload custom CSS files of a size up to 1 MB.
  • Once the custom CSS file is uploaded the preview will reflect on right side.
  • The uploaded custom CSS files will be applicable for all themes.

More options

Select the ... (ellipse) to right of the custom CSS file, where you can move the file higher or lower in precedence and disable the custom CSS file.

Note

CSS files listed at bottom take higher precedence, meaning that if two files contain an update the same property, the update contained in the file lower in the list will be applied.

Order of precedence for CSS files.

Architecture

Any custom CSS file is at lower priority than the default portalbasictheme.css and higher than theme.css. This prioritization is to encourage customizing styles using style panel for out of box styling options.

Note

We recommend custom CSS should be used to format only styles which aren't provided out of box in style pane.

Warning

Do not deactivate, delete or change the display order of any of the default CSS files (bootstrap.min.css, theme.css, or portalbasictheme.css). You will see an error in the design studio.
Update CSS files using the Portals Management app.
Open the Portal management app and to restore the default state and display order of the default CSS files to resolve the issue.

Delete a custom CSS file

  1. The CSS files are stored as web files. To remove the custom CSS file, go to the Portal Management app and select Web Files.

  2. Locate the custom CSS file record. You may need to filter on the Name and Website values to locate the correct record.

  3. Once the web file record is selected, select Delete.

  4. In the design studio, select Sync configuration to clear the styling changes from the custom CSS.

Understanding Bootstrap framework

Bootstrap is a front-end framework that includes CSS and JavaScript components for common web application interface elements. It includes styles for navigation elements, forms, buttons, and a responsive grid layout system that allows site layouts to dynamically adjust to devices that have different screen sizes, such as phones and tablets. By using the Bootstrap layout system, you can develop a single site that presents an appropriate interface to all devices your customers might use.

The templates included with Power Pages are implemented by using standard Bootstrap components with minimal additional custom styles. So when you implement the templates, you can take advantage of Bootstrap customization options. You can quickly customize the theme (fonts, colors, and so on) in a way that's applied consistently across the site.

Customize Bootstrap

Bootstrap supports customization through a set of variables. You can set any or all of these variables to custom values and then download a custom version of Bootstrap that is compiled based on these values.

The power of Bootstrap variables is that they don't dictate the style of a single element. All styles in the framework are based on and derived from these values. For example, consider the variable @font-size-base. This specifies the size that Bootstrap assigns to normal body text. However, Bootstrap also uses this variable to indicate the font size for headings and other elements. The size for an H1 element might be defined as 300 percent of the size of @font-size-base. By setting this one variable, you control the entire typographic scale of your portal in a consistent way. Similarly, the @link-color variable controls the color of hyperlinks. For the color you assign to this value, Bootstrap will define the hover color for links as 15 percent darker than your custom value.

The standard way to create a custom version of Bootstrap is through the official Bootstrap site. However, due to the popularity of Bootstrap, many third-party sites have also been created for this purpose. These sites might provide an easier-to-use interface for Bootstrap customization or predesigned versions of Bootstrap for you to download. The official Bootstrap customizer site has more information about Bootstrap customization.

When you download a customized version of Bootstrap, it contains the following directory structure.

css/
    |-- bootstrap.min.css 
img/
    |-- glyphicons-halflings-white.png 
    |-- glyphicons-halflings.png 
js/ 
    |-- bootstrap.min.js

Or, depending on the customizer application used, it might only contain bootstrap.min.css. Regardless, bootstrap.min.css is the file that contains your customizations. The other files are the same for all custom versions of Bootstrap and are already included in your portal.

See also