Add Custom CSS and JavaScript to Your Theme – OpenCities

This task is for users with the OC Site Designer role.

While most of your theme can be styled in the Styles tab, you can add CSS rules in the CSS / JS tab if you cannot achieve the exact look and feel you want.

the CSS/JS tab

To use this tab, select an SCSS file from the File to edit drop-down and edit in the HTML window for that file. Although the files are set up to use SCSS syntax, you can enter plain CSS if you prefer, and any JavaScript functionality you want to add can go in the plugin.js file. Any CSS or Javascript file you added to the Files tab can also be edited here.

You can update the following files:

client.scss: This is a more general file where most custom styles will go. For example, any styling for specific browser sizes will go into this file.
client_forms.scss: Add styles specific to form elements, such as button styling, to this file.
client_menu.scss: Add custom styles for your menu to this file.
client_menu_s1.scss: Add custom menu styles for viewing your site on a desktop device. This file will not be included when the system detects viewing the site on a mobile or tablet device. Any CSS rules need to be wrapped in the media query @media (min-width: 992px) {...}
client_print.scss: Add specific styles required for printed versions of your page.
client_s1.scss: Add custom styles for viewing your site on a desktop device. This file will not be included when the system detects viewing it on a mobile or tablet device. Any CSS rules need to be wrapped in the media query @media (min-width: 992px) {...}
client_style.scss: Add styles for HTML elements (<h1> or <a>, for example). This is where to add any CSS rules you want available in the WYSIWYG Editor, such as those in the CSS Class drop-down menu.
plugins.js: Add any JavaScript to this file to affect the functionalities of your site.

Add Classes for Use in the WYSIWYG Editor

This is an example of a CSS rule you may want to apply to your site. The WYSIWYG Editor has a drop-down menu titled Apply CSS Class, which allows you to add classes to various page elements. These classes style page elements in specific ways, such as styling a link to look like a button. Although there is a predefined list of CSS classes here, you can add your own.

These instructions will use the example of adding a styled call-to-action button:

Go to the CSS / JS tab of the theme applied to your site and open the client_styles.scss file.
If it's not already there, add this multiline comment to the top of the file:
```
/*@Editor-classes
      
@Editor-classes*/
```
Within this multiline comment, add the name you want to appear in the CSS drop-down menu and the selector of the CSS rule. This should be separated by a | symbol. Your comment should now look like this:
```
/*@Editor-classes
Call to action Button|a.styled-button-calltoaction
@Editor-classes*/
```

After the multiline comment, add your CSS rule with all necessary declarations. For this example, the code block should end up looking like this:

/*@Editor-classes
Call to action Button|a.styled-button-calltoaction
@Editor-classes*/

a.styled-button-calltoaction {
     color: #FF0000;
     background-color: #FFFFFF;
     border: solid 2px #FF0000;
}

There are some requirements when creating your own class rules:

The CSS selector must be the same throughout your CSS rule. In the example above, the selector is a.styled-button-calltoaction. So, if in step four (above), you use styled-button-calltoaction instead, the rule would not work.
For step 4, there must be at least one CSS rule which includes only the selector from step 3.
Any new classes you add will not appear in the Apply CSS Class drop-down menu until the theme is re-published. The theme must also be the currently applied theme on the site where you want to use the new class.

What Else?