CSS changes in EXTRA.css

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.
 
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*
 
Top Bottom