Add custom CSS to a website or 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've never used CSS before.

Let's consider some basic examples of using custom CSS in Bitrix24.

Changing color of elements

For example, your company uses only certain colors. Use custom CSS to change colors of elements.

There is a block with text. We need to change the font color and background color.

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

Open Developers Tools interface in your browser  > click Inspect > select a block that you need to customize.

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

 #block1682 .landing-block-node-title 
color: #FF6347 ;
If you don't specify the block ID, changes are applied to all the 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.

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

Open your Bitrix24 Account > Sites > select this site > Settings > Page preferences > Custom HTML and CSS > activate this option > paste these codes to the CSS code text box > click Save.

You don't need to publish your website again, just refresh the page. Font color and background color will be changed in this 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 it gives that style very high specificity (e.g., color: FF6347 !important;).

Hiding block's elements

If you want to hide some elements of the block, you can also use custom CSS. To do that, you need to get this block class. For example, let's hide buttons on the price list block.

Don't forget to click Publish before opening Developers Tools interface.

Then add the code to the CSS code text box in the page preferences section:

display: none;

Save changes and refresh the page:

Custom CSS in Bitrix24.On-Premise 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?
Article feedback
Could you please tell us why:
Article feedback
Integration specialist assistance
Go to Bitrix24
Don't have an account? Create for free