I've replaced my static banner with a views slideshow, and I'm pretty pleased with it. Except, there is now this large space below the slideshow banner, which is controlled by element.style in Firebug, aka hard coded. I read this post which tells me I can override it will CSS, but I can't seem to figure out how for my particular site.

Here is the "css" portion, which I would like to change to a height of 100px:

element.style  {
height:131px;
position:relative;
width:691px;
}

And here is the html:

<div class="views_slideshow_singleframe_teaser_section" id="views_slideshow_singleframe_teaser_section_1" style="position: relative; height: 131px; width: 691px;">

<div class="views_slideshow_singleframe_slide views-row-odd" id="views_slideshow_singleframe_div_1_0" style="position: absolute; top: 0pt; left: 0pt; display: none; z-index: 2; opacity: 0;">
    
<div class="views-field-body">

<div class="field-content"><p><img alt="" src="/sites/agb.org/files/u3/photobar4.jpg"></p>

</div></div></div><!--close views_slideshow_singleframe_div_1_0-->

Any and all help would be much appreciated!

Comments

tdimg’s picture

the !important is key, you need to address your specific html element - in your case #views_slideshow_singleframe_teaser_section_1 and add !important behind every rule, but before the semicolon.

UMG’s picture

Thank you! That line of CSS was exactly what I needed!

Karlheinz’s picture

If you have access to the HTML code, it would be a good idea to take all the styles out of the HTML, and put them into CSS.

That is:

<div class="views_slideshow_singleframe_teaser_section" id="views_slideshow_singleframe_teaser_section_1" style="position: relative; height: 131px; width: 691px;">

...should become:

<div class="views_slideshow_singleframe_teaser_section" id="views_slideshow_singleframe_teaser_section_1">
<style type="text/css">
<!--
#views_slideshow_singleframe_teaser_section_1 {
  position: relative;
  height: 131px;
  width: 691px;
}
-->
</style>

...except the styles should be in an external stylesheet.

If you didn't code the HTML yourself (the module did), see if there's an override function where you can take that stuff out.

My two cents.

-Karlheinz

9802008’s picture

This worked for me:

#views_slideshow_cycle_teaser_section_rotatingbanner-block_1 {
	width: 963px !important;
}

Inspecting the element showed a width of 968px which added extra white space.

You will need to change #views_slideshow_cycle_teaser_section_rotatingbanner-block_1 to match the name of your rotating banner/block

mbahlol’s picture

hi,

thanks for that clues, i've solved my problems. this what i do to my slideshow, almost every page has slideshow.

.viewsSlideshowSingleFrame-processed, .views_slideshow_singleframe_teaser_section{
height:550px !important;
}

best regards