top_en
Log In
Your Bitrix24
Authorize to enter
your company's Bitrix24.
Log In

Bitrix24Care

Add custom CSS to a website or online store

Rating:

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:

.landing-block-node-price-button
{
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.
This helped Thanks :) This didn't help Sorry :(
Could you please tell us why:
It's not what I'm looking for
It's too complicated

Did not find an answer to your question?

Send your question to the Bitrix24Care team
Access to technical support specialists requires commercial plan subscription and is not available to free account users. Free accounts are limited to self-support resources such as product manuals, helpdesk articles, video tutorials, and free webinars. Technical assistance, training, setup, customization and other value added services can also be purchased directly from local Bitrix24 partners