Custom Styling in the Footer
The footer on Scalar pages sits just below the main text area. It contains the Scalar logo and a host of links to Scalar User’s Guide, Terms of Service and Privacy Policy among others. It's spatial boundaries on Scalar pages are represented by the highlighted area in the image to the left.
Font Style
CSS accepts two different values for font styles, or more specifically, for the font-family property: actual font family-names (e.g. "Times New Roman" or “Arial”) and generic font families (e.g. "serif", "sans-serif", "or "monospace"). In most cases, one should list several font families (separated by commas) in the font-family property. This way if a browser does not support the first font listed, it can move on to the next (read more about websafe fonts here). To change the font style in the footer one needs to begin by declaring the selector for the footer (#footer), the property they wish to modify (font-family) and then the font they wish to use (with possible “fallback” fonts in case their primary font is unsupported by a browser). Thus, to change the text style in the footer to “Georgia” with a fallback of a generic “serif” one would insert:
Learn more about the font-family property here.
Font Size
To change the font size of text in the footer one needs to designate the selector (#footer), select the font-size property (font-size) and set the value for the font size in pixels (font pixel size referes to the font height, specifically from the top of ascenders like 'P' or 'T' to the bottom of descenders like 'g' or 'y'). Thus, to change the font size of text in the footer to 20 pixels, one would insert:
Learn more about the font-size property here.
CSS accepts a number of color values: hexadecimal colors (e.g. #F1F1F1), RGB colors (e.g. 255,255,255) and predefined color names (e.g. red). To change the background color of the footer one needs to begin by declaring the selector for the footer (#footer), the property they wish to modify (background-color) and then decide how they want to define the color of their choice. To change the background color of the footer to red using a predefined color name (see a list of cross-browser redefined color names here) one would insert:
And to change the background color of the footer to bright blue using RGB colors, one would insert:
To adjust the distance between the content area and the footer one needs to create a margin atop the footer. Thus to create a distance of 20 pixels between the content area and the footer one needs to begin by declaring the selector for the footer (#footer), the property they wish to modify (margin-top) and the value in pixels (e..g. 20px) for the flowing statement:
Footer Text
Font Style
CSS accepts two different values for font styles, or more specifically, for the font-family property: actual font family-names (e.g. "Times New Roman" or “Arial”) and generic font families (e.g. "serif", "sans-serif", "or "monospace"). In most cases, one should list several font families (separated by commas) in the font-family property. This way if a browser does not support the first font listed, it can move on to the next (read more about websafe fonts here). To change the font style in the footer one needs to begin by declaring the selector for the footer (#footer), the property they wish to modify (font-family) and then the font they wish to use (with possible “fallback” fonts in case their primary font is unsupported by a browser). Thus, to change the text style in the footer to “Georgia” with a fallback of a generic “serif” one would insert:
#footer {font-family: Georgia,Serif;}
Learn more about the font-family property here.
Font Size
To change the font size of text in the footer one needs to designate the selector (#footer), select the font-size property (font-size) and set the value for the font size in pixels (font pixel size referes to the font height, specifically from the top of ascenders like 'P' or 'T' to the bottom of descenders like 'g' or 'y'). Thus, to change the font size of text in the footer to 20 pixels, one would insert:
#footer {font-size: 20px;}
Learn more about the font-size property here.
Footer Background Color
CSS accepts a number of color values: hexadecimal colors (e.g. #F1F1F1), RGB colors (e.g. 255,255,255) and predefined color names (e.g. red). To change the background color of the footer one needs to begin by declaring the selector for the footer (#footer), the property they wish to modify (background-color) and then decide how they want to define the color of their choice. To change the background color of the footer to red using a predefined color name (see a list of cross-browser redefined color names here) one would insert:
#footer {background-color:red;}
To change the background color of the footer to black using hexadecimal colors, one would insert:#footer {background-color:#000000;}
And to change the background color of the footer to bright blue using RGB colors, one would insert:
Distance Between Footer and the Content Area
To adjust the distance between the content area and the footer one needs to create a margin atop the footer. Thus to create a distance of 20 pixels between the content area and the footer one needs to begin by declaring the selector for the footer (#footer), the property they wish to modify (margin-top) and the value in pixels (e..g. 20px) for the flowing statement:
#footer {margin-top:20px;}
| Previous page on path | Custom Styling, page 3 of 10 | Next page on path |
Discussion of "Custom Styling in the Footer"
Add your voice to this discussion.
Checking your signed in status ...