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.

How to increase the size of logo on mobile view?

Depending on your theme (Base theme used in current screenshot) find property that is limiting dimension of logo.

1. Right click on logo and select "Inspect" from floating menu in Chrome Browser.
2. Make sure that view is narrow like in mobile view.
3. Check CSS properties and find limiting property. In our case it is  height: 2rem; limits dimension of logo.
4. Change this limiting property with following custom CSS. Append it to "Custom Styles" in your theme as described in current article.

/* increase logo height for mobiles */
@media screen and (max-width: 52em) {
.header h1.logo a {height:5rem;}
}

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.