1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. If you want premium products then purchase our VIP or SVIP plans
  3. Dont forget read our rules HERE Also anyone caught Leeching this content or Scamming will be banned on numerous networks.
    Dismiss Notice
  4. Dont forget we do not allow Multiple Accounts, so all of your accounts as well as your IP will be banned.
    Dismiss Notice
  5. Tired of Download Limits ? UPGRADE Today!
    Dismiss Notice

FREE [1.5.x] Creating custom thread and resource prefix CSS

Discussion in 'Xenforo Template Mods & Extras' started by Deviant, May 26, 2016.

  1. Deviant

    Deviant Administrator Staff Member ADMIN

    Likes Received:
    171
    Trophy Points:
    43
    Gender:
    Male
    Compatible XF Versions:
    • 1.2
    • 1.3
    • 1.4
    • 1.5
    This resource is not affiliated with XenForo Ltd.

    I'm sure lots of people will want to create their own thread prefix CSS, so this thread will help you do that.

    The following code should be added to EXTRA.css

    In the example below we're going to create two classes; CTA1 and CTA2.
    Of course you can choose whichever class names you like.

    Code:
    .prefix.prefixCTA1 {
    color: @textCtrlBackground;
    background-color: @primaryDarker;
    border-color: @primaryDark;
    }
    a.prefixLink:hover .prefix.prefixCTA1 {
    color: red;
    background-color: yellow;
    border-color: blue;
    }
    
    .prefix.prefixCTA2 {
    color: @textCtrlBackground;
    background-color: @primaryLightish;
    border-color: @primaryMedium;
    }
    a.prefixLink:hover .prefix.prefixCTA2 {
    color: black;
    background-color: white;
    border-color: red;
    }
    As you can see, the CSS is quite basic consisting of just text, background and border colours.
    You can add whatever additional styling you like.

    Each class also has CSS for hover, so individual prefixes can have different hover effects. Again, the CSS can be expanded to suit.

    Once you've created your CSS, simply choose theOther, using custom CSS class nameoption for the prefix in question, and enter it as follows:prefix prefixCTA1
    Note that there are no . before the class names and they are separated by a space.

    If you have multiple styles installed, you will need to add the code to EXTRA.css in each style.
    It doesn't have to be the same, you can change it to suit each style.
     

Share This Page

Post thread