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

XF 1.2 Xenforo syntax to inherit built-in css class already declared or styled using style properties?

Discussion in 'XenForo Questions and Support' started by RoldanLT, Sep 15, 2013.

  1. RoldanLT

    RoldanLT Well-Known Member

    Like I want to create a new css class but want to inherit some a built-in class.

    Code:
    .CustomCssClassHere{
    @sectionHeaders
    /* my custom css goes here */
    }
    Is it possible?
     
  2. RoldanLT

    RoldanLT Well-Known Member

    Is there something like that?
     
  3. MagnusB

    MagnusB Well-Known Member

    I don't understand what you want to do? Normally, you would just use the original class, then add another custom class and use the custom class to whatever custom css you want to add.
     
  4. RoldanLT

    RoldanLT Well-Known Member

    Let say I have a custom html template.

    Code:
    <div style="CustomCssClassHere">
    Custom Content
    </div>
    But I want to use the properties of the built-in xenforo class .sectionHeaders
    and add some of my custom css style.

    Can I do that?
    Just like xenforo template, if you include it.
    Code:
    <xen:include template="ExistingTemplate" />
     
  5. MagnusB

    MagnusB Well-Known Member

    Just use the class, if it doesn't work, try to include the css file with the class you want to include. Think sectionHeaders is one that is included on most pages though.
     
  6. RoldanLT

    RoldanLT Well-Known Member

    I got what you mean, so I change my html code to.
    Code:
    <div style="CustomCssClassHere sectionHeader">
    Custom Content
    </div>
    :)
     
  7. RoldanLT

    RoldanLT Well-Known Member

    Didn't realize that :D
     
  8. Liam W

    Liam W Well-Known Member

    Yes, as you now know ;)
     
  9. MagnusB

    MagnusB Well-Known Member

    If you want a protip; If you want something to apply to only CustomCssClassHere along with sectionHeader, use:
    Code:
    .CustomCssClassHere.sectionHeader {}
    I usually make a sport out of not using !important with CSS, as they can create unforeseen complications when you depend on inheritance.
     
    RoldanLT likes this.
  10. RoldanLT

    RoldanLT Well-Known Member

    Thanks for the tips.i will try that later on my desktop.
     

Share This Page