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
Related articles
Automatic block change, FAQ block, and GIF images Site and page settings Change design in Sites and Stores Site boost Site access permissions Transfer sites and online stores to another Bitrix24 account Cookie processing Add YouTube videos and Shorts to Bitrix24 Sites Website widget: advanced settings Action on click in site block elements