Read FAQ
NEW
Bitrix24 Support
Registration and Authentication
How to start
My Profile
Feed
Chats and Calls
Calendar
Bitrix24.Docs
Bitrix24.Drive
Bitrix24.Mail
Workgroups
Tasks and Projects
CRM
CoPilot - AI in Bitrix24
Contact Center
Sales Center
CRM Analytics (beta)
BI Builder
Sales Intelligence
Inventory Management
Marketing
Sites
Online Store (beta)
CRM + Online Store
CRM Store (beta)
Bitrix24.Sign
Company
Knowledge base (beta)
Automation
Workflows
Telephony
Market
Subscription
Settings
Enterprise
Mobile App
Desktop App
General questions
Bitrix24 On-Premise

Bitrix24Care

Add custom CSS to website and online store

In Bitrix24, you can always add custom CSS to your website to customize the look of the elements.

Using CSS requires particular skills and experience. We strongly recommend reading CSS tutorials first if you have never used CSS before.

Change element color

You need to publish the page before starting working with custom CSS.

Select a block you need to customize, right-click on it and select Inspect.

To change the font color, you need to use the block ID and class.

 #block3233 .landing-block-node-title 
{
color: #FF6347 ;
}
If you do not specify the block ID, changes are applied to all similar blocks on the page.

To change the background color, you need to select this block, use block ID and class of the whole block. Specify that you need the section tag.

 #block3233.block-27-3-one-col-fix-title section
{
background-color: #00FFFF;
}

Select the Configure site option in the action menu.

Find the Custom CSS section on the Site settings page.

Enable this option and paste the codes to the text box. Click Save.

You do not need to publish your website again, just refresh the page. Font color and background color will be changed in the block.

You can also use the !important directive. This directive affects the way in which your CSS cascades while following the rules you feel are most crucial and should be applied. The !important directive overrides the normal rules of the cascade and gives that style very high specificity (e.g., color: FF6347 !important;).

Hiding block elements

If you want to hide some elements of the block, you can also use custom CSS.

To do that, you need to get the block class.

Don't forget to publish site before opening Developers Tools interface.

Then add the code to the CSS code text box on the site settings page.

.landing-block-node-price-button
{
display: none;
}

Save changes and refresh the page.

Custom CSS in Bitrix24 On-Premise version can be used from Sites module version 18.5.8. Check in advance if your Bitrix24 is up-to-date and, if necessary, update your account.
Was this information helpful?
Integration specialist assistance
That's not what I'm looking for
Complicated and incomprehensible text
The information is outdated
It's too short. I need more information
I don't like the way this tool works
Go to Bitrix24
Don't have an account? Create for free