Add custom CSS and JavaScript to your theme – OpenCities

This task is for users with the following roles: OC Site Designer.

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 a .scss file from the File to edit dropdown 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:

Filename	Purpose
client.scss	This is a more general file, where most of your 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 when your site is viewed on a desktop device. This file will not be included when the system detects the site being viewed on a mobile or tablet. 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 when your site is viewed on a desktop device. This file will not be included when the system detects the site being viewed on a mobile or tablet. 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 dropdown menu.
plugins.js	Add any JavaScript to this file, to affect functionalities on your site.

Add classes for use in the WYSIWYG Editor

This is an example of the kind of CSS rule you may want to apply to your site. In the WYSIWYG Editor, there is a dropdown 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 mulitline comment, add the name you want to appear in the CSS dropdown menu and the selector of the CSS rule. This should be separated by | 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 dropdown menu until the theme is re-published. The theme must also be the currently applied theme on the site on which you want to use the new class.

What else?