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