How to make only one 'HTML Content' feature transparent

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
5/30/2013 10:02:35 AM
Gravatar
Total Posts 83
-- Joe

How to make only one 'HTML Content' feature transparent

I would like to make just 1 of the many "HTML Content" features on a single page have a transparent background and set its margins to zero using the custom class .TransparentModule

I tried to use the "Custom CSS Class" for this but the styles defined there are at the ".art-content" level, but the background is defined at the ".art-post" level (see below)

<div id='ctl00_mainContent_ctl00_pnlOuterWrap' class='art-content clearfix TransparentModule'>
<div id='ctl00_mainContent_ctl00_pnlInnerWrap' class='panelwrapper htmlmodule'>
<div class='art-post art-article'>
<div class='art-postmetadataheader'>....

The CSS for .TransparentModule

.TransparentModule  {
    padding: 0px;
    border-style: none;
    margin: 0;
    background: transparent;  }

The CSS is being applied correctly but the lower level background color is overriding TransparentModule.  Any ideas?

Thanks in advance for any help!

-- Joe Vago

5/30/2013 10:46:27 AM
Gravatar
Total Posts 2169

Re: How to make only one 'HTML Content' feature transparent

In addition to what you have, try this:

.TransparentModule .art-content {
   background: transparent;
}

HTH,
Joe D.

5/30/2013 10:59:29 AM
Gravatar
Total Posts 83
-- Joe

Re: How to make only one 'HTML Content' feature transparent

Thanks for the quick reply.  Unfortunately thta didn't work. 

This CSS is lower and being applied in <div class='art-post art-article'>

.art-post { background: #FFFFFF;   padding: 5px;   margin: 5px;  }

Also I tried - without success - to use the !important keyword

.TransparentModule {   background: transparent !important;   padding: 0px !important;   margin: 0 !important;    }

.TransparentModule .art-content {    background: transparent !important; }

I really expected that to work... but it did not.

To be sure I reset the skin GUID many times but still no luck.

Any other ideas?  -- Joe Vago

5/30/2013 1:59:52 PM
Gravatar
Total Posts 83
-- Joe

Re: How to make only one 'HTML Content' feature transparent

So I tested this a bit more and its now working in a 2nd HTML Content feature but not the one I want (which has some jQuery script in the HTML Content).  

I will continue to test.

Thanks agian -- Joe

5/30/2013 3:42:05 PM
Gravatar
Total Posts 2169

Re: How to make only one 'HTML Content' feature transparent

Sorry, I read your original post incorrectly. The selector should be .TransparentModule .WhateverClassIsOnTheDivWithTheBackgroundColor. So, I think, the selector should be .TransparentModule .art-post. Would be best if I could see the site in question to make sure there aren't other rules applying that would prevent this from working.

.TransparentModule .art-post {
    background-color: transparent;
}

HTH,
Joe D.

5/30/2013 3:50:32 PM
Gravatar
Total Posts 83
-- Joe

Re: How to make only one 'HTML Content' feature transparent

Joe D. you rock.  That did the trick (I should have figured that out myself).

Thank you very much! -- Joe Vago

You must sign in to post in the forums. This thread is closed to new posts.