1. 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

Discussion in 'Styling and Customization Questions' started by drastic, May 19, 2014.

  1. drastic

    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.

  2. Steve F

    Steve F Well-Known Member


    .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.

        content: "\f0eb";
        font-family: FontAwesome;
        margin-right: 5px;
        font-weight: normal;
        font-size: 110%;
    rafass, sbj and drastic like this.
  3. drastic

    drastic Well-Known Member

    @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: May 19, 2014
  4. DEZero

    DEZero Well-Known Member

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

    content: "\f0eb";
    font-family: FontAwesome;
    drastic likes this.
  5. drastic

    drastic Well-Known Member

    DEZero likes this.
  6. sbj

    sbj Well-Known Member

    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?
  7. Steve F

    Steve F Well-Known Member

    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.
    melbo and sbj like this.
  8. sbj

    sbj Well-Known Member

    Thanks and Thanks.
  9. Steve F

    Steve F Well-Known Member

    <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.
    asgard and sbj like this.
  10. Market1234

    Market1234 Member

    where do we add this
    where would i add this code?
  11. Russ

    Russ Well-Known Member

    Look at the post above yours.

    Templates -> page_container
  12. Market1234

    Market1234 Member

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

    sbj Well-Known Member

    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)
    .prefix1 {
  14. kankan

    kankan Active Member

    hi @sbj :

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

    Extra.css :

    Prefix page :

    Rendering :


    Any idea?

  15. sbj

    sbj Well-Known Member

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

  16. kankan

    kankan Active Member

    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.

  17. sbj

    sbj Well-Known Member

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

    Brogan XenForo Moderator Staff Member

    Does it work if you move that block of code to the very top of the EXTRA.css template?
    sbj and kankan like this.
  19. kankan

    kankan Active Member

    Hi Brogan,
    Yes it does!
    Thanks for the idea :)
  20. sbj

    sbj Well-Known Member

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

Share This Page