Early Bird Registration for DrupalCon Portland 2024 is open! Register by 23:59 PST on 31 March 2024, to get $100 off your ticket.
By UMG on
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
...
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.
Thank you!
Thank you! That line of CSS was exactly what I needed!
Style in CSS, not HTML
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:
...should become:
...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
This worked for
This worked for me:
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
thanks for that clues
hi,
thanks for that clues, i've solved my problems. this what i do to my slideshow, almost every page has slideshow.
best regards
www.dhafy.com