CSS

 

CSS stands for Cascading Style Sheets. It allows you to format & style web pages.

 

CSS is a design language that helps you enhance the layout, visual structure, and overall aesthetics of your help site. In this article, we will refer to the site-wide CSS. Therefore, even when you edit a page’s CSS, it will reflect on the entire site.

 

Note: Each site comes with default CSS styles.

 

Here is an example of a site powered by ProProfs Knowledge Base using its CSS styles:

 

The client has modified CSS, from color scheme to fonts & other visual aspects, to overhaul the look & feel of our standard ProProfs Knowledge Base product.

 

Preview of a ProProfs Knowledge Base-powered site with Custom CSS Styles

 

CSS has several benefits:

 

  • It allows you to store style presentation information (such as colors, fonts, layout, etc.) separately from your HTML structure.

  • It gives you precise control over your page’s design and format.

  • It reduces the use of code, thus enabling fast page speed.

  • It allows responsive web designs for a better user experience across devices.

 

These CSS editing instructions are meant for users with knowledge of CSS. If you are new to CSS or need a refresher, check out this great resource: http://codex.wordpress.org/.

 

This article covers the following:

 


 

You can change a page’s CSS. However, you cannot change the application’s CSS. Customizing the site can control the theme, header, and other options.


Add or Edit CSS

 

Step 1: Click the CSS () toolbar button in the page editor. An overlay will appear displaying your site’s CSS.

 

Click the CSS button in the toolbar in the page editor

 

Step 2: You can add or edit the CSS as you wish.

 

Add or Edit the CSS

 

The CSS file comes with the system’s default style. However, you can modify any of these styles.

 

It includes:

  • The default font style: body {}

  • Bullet and list styles: ul {}, li {}, ol {}

  • Table styles and classes

  • Horizontal Rule: HR {}

  • Hyperlink colors and styles: a{}, a:link, a:visited, a:active, a:hover {}

  • Styling for the home page: #startcontainer {}

 

You are allowed to change any of the default CSS. You can also add more CSS styles and classes to control the layout of any page.

Applying CSS Styles

 

You can manually apply CSS to different page elements such as Image(s), Link(s), and Table(s), among others.

 

To apply CSS:

 

  • Double-click on the element and go to the Advanced tab.

  • Enter the CSS class name or ID you want to apply to the element.

 

Below is an example of an image:

 

Advanced Image Properties

 

Styles and Format Drop-Downs

 

The CSS powers the toolbar’s styles, format, and other options. If you want to change the formatting, such as the fonts, sizes, colors, etc., you will need to do it in the CSS.


Below is the mapping of   elements in the CSS.

 

Styles Drop Down CSS Class
Computer code .computer_code, code {
Computer code 2 .computer_code, code {
Tip .tip {
Info .info {
Warning .warning {

 

Below is the mapping of elements in the CSS.

 

Format Drop Down

CSS Class

Normal

P {  , Body {

Heading 1

H1 {

Heading 2

H2 {

Heading 3

H3 {

Heading 4

H4 {
Heading 5
H5 {

 

The Styles drop-down will display your custom CSS classes if you use TAGNAME.CSSNAME in your site’s CSS. You must define the type of element, such as div.classname, h2.classname, etc. If you enter .classname, it will not appear in the drop-down.

 

Changing the Default Font

 

Note: The following operation is only for advanced users.

 

You can change the default font for all pages using the below steps:

 

1. Click on the CSS icon in the toolbar.

2. Locate the Body {} class at the top of the list.

3. Locate the font family attribute and font size as highlighted below.

 

 

body {
background-color:#FFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
padding:15px;
margin: 0px;
margin-right: 0px;
margin-bottom: 20px;
}

 

 

4. Make the change and click OK.

 

Here are some web-safe font options to COPY and PASTE :

  • font-family: Verdana, Geneva, sans-serif
  • font-family: Georgia, “Times New Roman,” Times, serif
  •  font-family: Arial, Helvetica, sans-serif
  • font-family: Tahoma, Geneva, sans-serif
  • font-family: "Trebuchet MS", Arial, Helvetica, sans-serif
  • font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif

 

You can also follow this guide for changing the paragraph and heading styles.

Reverting to the Default CSS

 

If you break or damage the CSS code, you can click Revert to default CSS to restore the CSS to the original setting.

 

Note: When you revert to the original, it will erase your previous modifications.

 

  1. Click Revert to default CSS and hit OK.

  2. Refresh the page to restore the original CSS setting.

 

Revert to Default CSS

 

Multiple Sites and CSS

Each site you create will have its separate CSS styles. Sites do not share CSS styles.

 

If you want to use the same CSS styles from a site you already created, you will need to copy the CSS from one site and paste it to the new site.

 

That is all about modifying CSS styles in ProProfs Knowledge Base.

 

 

Related Articles

 
Was this information helpful?
add chat to your website