change theme for a block
eggthing - May 24, 2007 - 22:26
I'd like to make the background of just one block invisible. I am using the default tangy theme with vbdrupal and vbulletin templates. I looked at the section module, but this module changes the theme for the entire page rather than just for the block. Any ideas?
Look at the source code and
Look at the source code and grab the unique ID for the block eg:
<div class="block block-block" id="block-block-14">Or something like that depending on the block type - since it's only the one block you want to re-style, you need the block ID. In the above example that is id="block-block-14
In your CSS file (usually called styes.css) you need to define attributes (styles) for this ID selector, eg:
#block-block-14 {background: transparent;}Have fun!
www.sitespring.eu
does this really work?
I spent four hours today trying to figure this out!
Yes it 'really' works
Yes it 'really' works
You're probably going wrong with your CSS...
It's pretty hard to help when you havent pasted any of your code, css or given us a link to your output. Contrary to popular belief we forum helpers do not have ESP... lol:)
At least paste your code, then we can really see where you are going wrong, or contact me directly and I'll take a quick look at your files.
www.sitespring.eu
Here's my source code
Here's my source code:
<tbody id="collapseobj_block-block-1" style="">
<tr>
<td class="alt1"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="100%" height="440" id="drupaltellygray" align="right">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="drupaltellygray.swf" /><param name="quality" value="high" /><param name="scale" value="exactfit" /><param name="wmode" value="transparent" /><param name="bgcolor" value="#999999" /><embed src="/forum/drupaltellygray.swf" quality="high" scale="exactfit" wmode="transparent" bgcolor="#999999" width="100%" height="440" name="drupaltellygray" align="right" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object></td>
</tr>
</tbody>
I tried adding this code to the bottom of my css:
block-block-1 background: transparent;collapseobj_block-block-1 background: transparent;
I'm pretty sure it's the right css file, I was able to change other values and see changes.
But it didn't work. Did I use the right syntax?
Meg Lee Chin
http://megleechin.com
bg is in the flash
Ok, the background is being set in the flash, so my above advice is redundant, you have to modify the flash params..
param name="bgcolor" value="#999999"
&
bgcolor="#999999"
I take the background you are seeing is dark grey?
btw this is not quite right:
block-block-1 background: transparent;collapseobj_block-block-1 background: transparent;
For future reference your css should look like this:
#block-block-1 {background: transparent;}#collapseobj_block-block-1 {background: transparent;}
But of course even that won't work with your particular block, as stated, you need to change the param values in the flash object & embed code.
www.sitespring.eu
Tried that...no luck.
I tried changing the flash parameters to "transparent" . No luck. Here's some more of the code:
<table class="tborder" cellpadding="3" cellspacing="0" border="0" width="100%" id="block-block-1">
<thead>
<tr>
<td class="thead">
<a style="float:right" href="#top" onclick="return toggle_collapse('block-block-1')"><img id="collapseimg_block-block-1" src="/forum/capsule_x/buttons/collapse_thead.gif" alt="" border="0" /></a>
Anonymity is the New Rock & Roll
</td>
</tr>
</thead>
<tbody id="collapseobj_block-block-1" style="">
<tr>
<td class="alt1"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="100%" height="440" id="drupaltellygray" align="right">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="drupaltellygray.swf" /><param name="quality" value="high" /><param name="scale" value="exactfit" /><param name="wmode" value="transparent" /><param name="bgcolor" value="#999999" /><embed src="/forum/drupaltellygray.swf" quality="high" scale="exactfit" wmode="transparent" bgcolor="#999999" width="100%" height="440" name="drupaltellygray" align="right" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object></td>
</tr>
</tbody>
</table>
I was also able to make all the tables transparent by changing this:
.tborder{
background: #a0a7a7;
color: #455507;
}
But no luck just changing block-block-1
You're changing the wmode
You're changing the wmode param, that's not what sets the background colour, that is something totally different...
As previoulsy stated, you need to change:
On the OBJECT tag:
param name="bgcolor" value="#999999" - this is the DARK GREY colour you are seeing in the background!
You'll want to change it on the EMBED tag also:
bgcolor="#999999"
those are what you need to change, not the wmode param.
Change both of them to #FFFFFF and see the amazing changing background colour (assuming the actual background of the flash is not a solid image! he he...)
Hmmm... I DID change it on
Hmmm... I DID change it on the bgcolor, but looking at the source, somehow the browser has changed it back. There must be some css somewhere else over-riding my changed parameter. I'm using a mode to block module with the flash code entered directly into the text box of the node form. But no matter what I change it to, the source code continues to show it as #999999.
Very confusing...
BTW thanks for helping!
Any idea where I should look now for that annoyingly mysterious code? Like I siad, I was able to change ALL the blocks to transparent using the class .tborder on the stylesheet.
Meg Lee Chin
http://megleechin.com
Take a look at Firebug
One tool that's really helpful in resolving these types of issues is the FireFox plugin called Firebug. It will let you take a look at exactly which CSS rules are being applied to each element on a page, and actually dynamically edit them, so you can see how changes would look without a lot of mucking around with reloads and such.
It's completely changed the way I and so many others develop CSS and JScript these days... You can grab it here:
http://www.getfirebug.com/
Eric
Paste your original code
Paste your original code here, the whole lot, everything you are pasting into the node form.
If this is running live on the web, consider giving me your URL and a login to take a look for you:) You can contact me via drupal if that suits.
<object
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="100%" height="440" id="drupaltellygray" align="right"><param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="drupaltellygray.swf" /><param name="quality" value="high" /><param name="scale" value="exactfit" /><param name="wmode" value="transparent" /><param name="bgcolor" value="transparent" /><embed src="drupaltellygray.swf" quality="high" scale="exactfit" wmode="transparent" bgcolor="transparent" width="100%" height="440" name="drupaltellygray" align="right" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
The input is "flashnode" not "flashfilter"
I'm using wamp on localhost so am unable to post the link.
Meg Lee Chin
http://megleechin.com