XenForo Modify your style css with shadow effects

CR LEAKS

Administrators
Joined
Mar 25, 2022
Messages
1,485
Credits
28,051
Step 1 :

For example i take xnforo.ir ( your css blocks may be different from those present here)

The style Before modification, everyone knows it, I will modify it a little bit quickly with 2 lines of code.



we will modify a bit

Add in your extra.less (the lines comment explains the changes)

CSS:
Code:
.block-container {
color: #646460;
background: #f9f9f9;
border-width: 1px;
border-style: solid;
border-top-color: rgba(170,109,247,0.2);
border-right-color: rgba(162,95,246,0.2)
border-bottom-color: rgba(148,70,245,0.2);
border-left-color: rgba(162,95,246,0.2);
border-radius: 6px;   /*The border-radius CSS property rounds the corners of an element's outer border edge. */
box-shadow: inset 0px 0px 7px 1px #185886; /*The [B]box-shadow[/B] CSS property adds shadow effects around an element's frame. */
}
After




Step 2 :

Another example if you modify this line like this !

CSS:
Code:
box-shadow: 0px 2px 7px 0px #185886;

Do you see the difference with the first image ?





Step 3 :

we also need to modify the css of the footer block




Add in your extral.less (for block-footer modifications)
Less:
Code:
.block-footer {
padding: 6px 10px;
font-size: 13px;
color: #787876;
background: #f0f0f0;
border-top: 1px solid rgba(170,109,247,0.2);
border-radius: 6px;
box-shadow: inset 0px 0px 7px 1px #98999a;
}
final result with 4 lines of code :)



you can change the color, radius, and the values of shadow as you want.
many modifications are possible.

usefull links :

Test yourself on your style .
 
Back
Top Bottom