XF 1.3 Prefix styles

drastic · May 19, 2014

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 · May 19, 2014

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 · May 19, 2014

@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!

DEZero · May 19, 2014

Xenbase enables font awesome, you just have to pull them with the right code like this:

content: "\f0eb";
font-family: FontAwesome;

drastic · May 19, 2014

Gotcha! was wondering where the codes came from and I found this!

http://fortawesome.github.io/Font-Awesome/cheatsheet/

thanks!!

sbj · Jan 14, 2015

Steve F said:

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 · Jan 14, 2015

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.

sbj · Jan 14, 2015

Thanks and Thanks.

Steve F · Jan 14, 2015

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.

Market1234 · Feb 16, 2015

where do we add this

sbj said:
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?

Russ · Feb 16, 2015

Market1234 said:
where do we add this

where would i add this code?

Look at the post above yours.

Templates -> page_container

Market1234 · Feb 16, 2015

Russ said:
Look at the post above yours.

Templates -> page_container

hmm, yes i did that. where would I add a css class?

sbj · Feb 16, 2015

Market1234 said:
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 · Mar 13, 2015

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 :

Rendering :

Any idea?

Thanks

sbj · Mar 13, 2015

kankan said:
hi @sbj :

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

Extra.css :

Prefix page :

View attachment 101039
Rendering :

View attachment 101041

Any idea?

Thanks

It should work. When created a thread, did you choose the correct prefix?
I surfed your website and it looks like it is working:

kankan · Mar 13, 2015

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.

sbj · Mar 13, 2015

kankan said:
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.

Hmm, I don't know what the problem is. It should work. Sorry.

Paul B · Mar 13, 2015

Does it work if you move that block of code to the very top of the EXTRA.css template?

kankan · Mar 13, 2015

Hi Brogan,
Yes it does!
Thanks for the idea

sbj · Mar 13, 2015

Brogan said:
Does it work if you move that block of code to the very top of the EXTRA.css template?

What the hell... Can you explain how you knew that and what was the problem here? Wow.

XF 1.3 Prefix styles

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Member

Well-known member

Member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

XenForo moderator

Well-known member

Well-known member

Similar threads

We value your privacy