• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.3 Prefix styles

drastic

Well-known member
#1
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!
 

Steve F

Well-known member
#2
upload_2014-5-18_19-27-16.png

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%;
}
 

drastic

Well-known member
#3
@Steve F - Do I have these FA icons uploaded with the Adara style? Or do I have to upload? Or pull them from another source?

Appreciate it!
 
Last edited:

sbj

Well-known member
#6
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?
 

Steve F

Well-known member
#7
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.
 

Steve F

Well-known member
#9
Code:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
That is what is needed in the page_container template in the <head> section.
 
#10
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?
 

sbj

Well-known member
#13
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 {
...
}
 

kankan

Active member
#14
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.png
Rendering :

capture-4.png

Any idea?

Thanks
 

kankan

Active member
#16
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.