In Bitrix24, you can always add custom CSS to your website to customize the look of the elements.
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.
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 ;
}
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.
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.
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:
