Custom styles: Make Cosmetic Changes (CSS color, size, font)

Classibase themes has feature to add custom CSS. This allows to change some styles on classifieds website.

To change styles you need to know some basic CSS rules.

Where to add custom styles?

1. Go to "Appearance" → "Themes" in admin panel.
2. Click “Customize” button for theme you want to edit.
3. On opened page go to “Custom styles” tab on left panel and write custom CSS code in opened text field.

Changes made here stick with theme. When you switch to other theme this custom CSS will not be used.

If you want to use custom CSS across all themes then add it in one of these places.

Examples

These are CSS examples that answer some user questions.

How to change background color in theme? which files to edit?

To change background color of main content you can add custom CSS code to theme. For this task you need to have some CSS knowledge. To do this go to perform following steps:

1. Go to "Appearance" → "Themes" in admin panel
2. Click “Customize” button for theme you want to edit
3. On opened page go to “Custom styles” tab on left panel and write custom CSS code in opened text field
4. For Mukuzik theme to change background color of main content add .content{background-color:#600;}

To find which HTML element to change use “Element Inspector” on Google Chrome. Right click on element you want to add custom CSS and click on “Inspect Element” context menu. From opened element inspector select html element and related CSS styles will be displayed on right.

Change "Post ad" button style

Hi CB,
This is different Request, How Can I size the “Post your item” button color frame? For the text on it is standard size, not customizable i think, How could I access this button size, color, line or other options scripts to make it little more thinner vertically. Thank you.

Using chrome on windows right click on “Post ad” button and select “Inspect element” from opened menu. This will show which class and styles used to render button. For example on Base theme it is:

.button.post_listing {
font-size: 16px;
padding: 10px 20px;
}

You can override this and define extra CSS properties by clicking customize your theme in “Appearance” → “Themes”. When you click “Customize” on new page you will see “Custom styles” section, put your custom CSS code there.

View screenshot above.

Other places in Classibase that you can add custom CSS

• Custom CSS can be added inside text/HTML widget. It is useful to add styles related to that widget. So widget code and style remain in same widget. These changes will remain even if you switch to other theme.
• You can also add custom CSS in "Settings" → "Header / Footer" page, "Code inside <style> tags" field. These changes will also remain even if you switch to other theme.

What is next:

• Add custom JavaScript to classibase website.
• Text widget also can be used to add custom HTML/CSS code.
• Install theme in ClassiBase.
• Create your own theme.