XF 1.3 Prefix styles

drastic

Well-known member
Anyone have a css code I can borrow to make my prefixes have a flat look...and change some colors?

I want to make them match my style a bit more.

thanks!
 
upload_2014-5-18_19-27-16.webp

Code:
.suggestion {
    background-color: #1381BE;
    border: 1px solid #278EDF !important;
    border-radius: 3px !important;
    box-shadow: 0 0 1px #F9F9F9 inset;
    color: #FFFFFF;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    padding: 0 4px;
    vertical-align: middle;
}

With Font Awesome icon before title.

Code:
.suggestion:before
{
    content: "\f0eb";
    font-family: FontAwesome;
    margin-right: 5px;
    font-weight: normal;
    font-size: 110%;
}
 
View attachment 73911

Code:
.suggestion {
    background-color: #1381BE;
    border: 1px solid #278EDF !important;
    border-radius: 3px !important;
    box-shadow: 0 0 1px #F9F9F9 inset;
    color: #FFFFFF;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    padding: 0 4px;
    vertical-align: middle;
}

With Font Awesome icon before title.

Code:
.suggestion:before
{
    content: "\f0eb";
    font-family: FontAwesome;
    margin-right: 5px;
    font-weight: normal;
    font-size: 110%;
}

I'm not sure if there is a website, a database or whatever for prefixes, I couldn't find one. So I hope you don't mind if I borrow this for my board.
One question though, how can I apply Font Awesome icons without havin Xenbase?
 
You're welcome to use it. As for using FA you would just need to include the call to Font Awesome CDN in the <head> section of page_container template. If you have media gallery installed or any other add-on that uses it you won't need the template edit.
 
where do we add this
I'm not sure if there is a website, a database or whatever for prefixes, I couldn't find one. So I hope you don't mind if I borrow this for my board.
One question though, how can I apply Font Awesome icons without havin Xenbase?
where would i add this code?
 
hmm, yes i did that. where would I add a css class?
Simply you create a prefix in your admin control panel.
(ACP -> Applications -> Thread Prefixes -> Create New Thread Prefix ->)
Now choose your options/settings for it (name etc.) and choose the last radio button called "Other, using custom CSS class name:" and give it a css class name. Whatever you want, for example "prefix1".
Now add the css prefix codes from above in your EXTRA.css (ACP->Appearance->Templates->EXTRA.css) template.
Don't forget to write your css class name you have chosen before, for example like I did with "prefix1)
Code:
.prefix1 {
...
}
 
hi @sbj :

I've done in that way to replace existing prefix, but no prefix design appears :

Extra.css :

.kankan {
background-color: #1381BE;
border: 1px solid #278EDF !important;
border-radius: 3px !important;
box-shadow: 0 0 1px #F9F9F9 inset;
color: #FFFFFF;
display: inline-block;
font-size: 12px;
font-weight: bold;
line-height: 18px;
padding: 0 4px;
vertical-align: middle;
}

Prefix page :

capture-3.webp
Rendering :

capture-4.webp

Any idea?

Thanks
 
Hi sbj, thanks for help.
What you are seeing is not prefix but "new message" alert :)

Prefix is here : 'En cours'
as you see, it is not designed.

capture-4-png.101041
 
Top Bottom