Help me to create user-banner-style like this

ArafatVai

Member
Registered
Joined
Jul 27, 2020
Messages
17
Points
23

Reputation:

I have tried almost all available options which present in enxf , if you can do this please help me to modify it like this

I have tried to put some test CSS code in extra.less but facing issue on the theme (getting corrupted) because of mistake

DEMO (Exactly like this):- (Check Comment)

Here is the CSS info I got:-
Screenshot_289.png


looking for help, Thanks in advance

@Soft4Win @DareDevil
 
Last edited:

Gursher

Active member
Registered
Joined
Jun 11, 2020
Messages
38
Points
18

Reputation:

Soft4Win

Developer
Staff member
Moderator
Collaborate
Registered
Joined
Apr 27, 2019
Messages
370
Points
103

Reputation:

new userbanner design.png


If you are looking to achieve something like this than apply this in the userBanner class. However to have different shade for different color I would recommend going for custom classes in username styling or you can either target the userbanner color prefix like :- userBanner--orange for orange colored banner and userBanner--skyBlue for sky blue colored banner and so on.

Just Change the rgb(255,191,0) to the color matching to the color of banner and you should be good to go.

CSS:
box-shadow: rgb(255,191,0) 0px 0px 10px 0px, rgb(0,0,0) 0px 0px 20px 0px inset;
border-radius: 8px;
color: white !important;
text-shadow: rgb(0,0,0) 2px 2px 5px;


Exact Classes I targeted :-

For Orange UserBanner:-

CSS:
.userBanner--orange {
    box-shadow: rgb(255,191,0) 0px 0px 10px 0px, rgb(0,0,0) 0px 0px 20px 0px inset;
    border-radius: 8px;
    color: white !important;
    text-shadow: rgb(0,0,0) 2px 2px 5px;
}

For Sky Blue UserBanner :-
CSS:
.userBanner--skyBlue {
    box-shadow: rgb(0 231 255) 0px 0px 10px 0px, rgb(0,0,0) 0px 0px 20px 0px inset;
    border-radius: 8px;
    color: white !important;
    text-shadow: rgb(0,0,0) 2px 2px 5px;
}

Note:- I was testing it on extra.less, and found out that adding rgb(0 231 255) broke the style, so instead of rgb color, add hex color code #7cc3e0
 
Last edited:
Top