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

CSS changes in EXTRA.css

Discussion in 'XenForo Questions and Support' started by Ryan Kent, Mar 14, 2011.

  1. Ryan Kent

    Ryan Kent Well-Known Member

    I have that "so close yet so far away" feeling.

    I am trying to make the background-color transparent for my (ln)blog and (XenCarta) Wiki pages. The source code is located in the sidebar.css template.
    Code:
        .mainContent
         {
             margin-right: {xen:calc '@sidebar.width + 15'}px;
             background-color: @contentBackground;
             border: 1px solid @lightMonochrome;
             border-radius: 6px;
             box-shadow: 0 0 12px rgba(0,0,0,.1);
             padding: 0 20px;
         }
    Since I only wish to make the changes for a couple pages, not my whole site, I decided to try and make the changes in EXTRA.css. I have tried adding what seems to be good CSS code into the EXTRA.css but it isn't working.
    Code:
    #content.lnblog_index .pageContent
    {
        background-color: transparent !important;
        border: 0px;
        border-radius: 0px;
        box-shadow: none !important;
        -moz-box-shadow: none !important;
        padding: 0px;
    }
    
    #content.EWRcarta_PageView .pageContent
    {
        background-color: transparent !important;
        border: 0px;
        border-radius: 0px;
        box-shadow: none !important;
        -moz-box-shadow: none !important;
        padding: 0px;
    } 
    After studying similar code I really felt that should have worked. When it didn't, I decided to go directly to sidebar.css keeping in mind I only want to modify these properties for these two specific areas, not the whole site. I tried:
    Code:
    <!-- Modified by Ryan.  Remove page container look from Wiki pages.  Below is default .mainContent code, above is modified -->
    <xen:if is="!in_array({$contentTemplate}, array('EWRcarta_PageView','lnblog_index'))">
                                       
        .mainContent
        {
            margin-right: {xen:calc '@sidebar.width + 15'}px;
            background-color: @contentBackground;
            border: 1px solid @lightMonochrome;
            border-radius: 6px;
            box-shadow: 0 0 12px rgba(0,0,0,.1);
            padding: 0 20px;
        }
    <xen:else />
    .mainContent
         {
             margin-right: {xen:calc '@sidebar.width + 15'}px;
             background-color: transparent;
             border: medium none;
             border-radius: 6px;
             box-shadow: 0 0 0px rgba(0,0,0,.1);
             padding: 0 0px;
         }
    </xen:if> 
    I've learned a fair amount of CSS working with XF this past month and spending hours studying changes in FF Firebug. I am just missing something key here. If anyone can help me past this bump, I would appreciate it.
     
  2. Russ

    Russ Well-Known Member

    I'm a little tipsy right now so not sure if this will work... (y)

    Code:
    .EWRcarta_PageView .mainContent {
        background-color: transparent !important;
    }
    
    Try that, for the wiki at least*
     
    Oracle likes this.
  3. Ryan Kent

    Ryan Kent Well-Known Member

    THAT's IT! Thx so much Russ. Dang, just needed to remove #content....so close!
     

Share This Page