Posted by mastermindg on October 3, 2012 at 5:56pm
I have a slideshow running Views 3.x on my Omega 7.x.3.1 sub-theme.
I have created a region called "Slideshow" that uses 100% of the width. I have a view block that is set to the "Slideshow" region.
I am trying to center the image(s) in my slideshow. I have created a new stylesheet (views_slideshows.css) and included in my sub-theme. The image is not centering properly in the region. How can I force center my images in this view?
Comments
CSS
You can try this in your css:
region-slideshow {
}
or
.view-slideshow .views-field-field-image {
text-align: center;
}
Roderick
I tried that as well
I tried that as well as:
#views_slideshow_main {display:block;
margin: 0 auto;
}
.view_slideshow_main .views-field-field-dummy-image {text-align: center;
}
How do I set my custom css to override whatever is causing the image to flush left? The problem is that there are so many div's and so many classes that it's hard to discover what is actually causing this.
@mastermindg, can you post
@mastermindg, can you post the full html of the slideshow?
Sam.
Firebug...?
Have you tried using something like Firebug's "Inspect Elements" feature to determine where the CSS that's styling the slideshow is coming from...?
firebug / web developer
You can use firebug or web developer to check what styles are being applied.
Also, since you are using a custom stylesheet you may need to check the weight it has on your .info file.
Roderick
A good way to also check this
A good way to also check this is to make some really stupid obvious visual changes to your slideshow (like background: red; height: 800px) in your stylesheet to absolutely make sure it is having an effect.
Sam.
I'm using Firebug to inspect
I'm using Firebug to inspect the image. Here's the html:
<div id="zone-slideshow-wrapper" class="zone-wrapper zone-slideshow-wrapper clearfix"><div id="zone-slideshow" class="zone zone-slideshow clearfix container-12">
<div id="region-slideshow" class="grid-12 region region-slideshow">
<div class="region-inner region-slideshow-inner">
<div id="block-views-dummy-slideshow-block" class="block block-views contextual-links-region block-dummy-slideshow-block block-views-dummy-slideshow-block odd block-without-title">
<div class="block-inner clearfix">
<div class="contextual-links-wrapper contextual-links-processed">
<div class="content clearfix">
<div class="view view-dummy-slideshow view-id-dummy_slideshow view-display-id-block view-dom-id-47596ad99d3ab0d6594d837812bbc4e7">
<div class="view-content">
<div class="skin-default">
<div id="views_slideshow_cycle_main_dummy_slideshow-block" class="views_slideshow_cycle_main views_slideshow_main viewsSlideshowCycle-processed">
<div id="views_slideshow_cycle_teaser_section_dummy_slideshow-block" class="views-slideshow-cycle-main-frame views_slideshow_cycle_teaser_section" style="position: relative; width: 220px; height: 220px;">
<div id="views_slideshow_cycle_div_dummy_slideshow-block_0" class="views-slideshow-cycle-main-frame-row views_slideshow_cycle_slide views_slideshow_slide views-row-1 views-row-odd" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 220px; height: 68px;">
<div id="views_slideshow_cycle_div_dummy_slideshow-block_1" class="views-slideshow-cycle-main-frame-row views_slideshow_cycle_slide views_slideshow_slide views-row-2 views_slideshow_cycle_hidden views-row-even" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 220px; height: 108px;">
<div class="views-slideshow-cycle-main-frame-row-item views-row views-row-0 views-row-first views-row-odd">
<div class="views-field views-field-field-dummy-image">
<div class="field-content dummy_aligning">
<img width="220" height="108" title="Autem lucidus neo nisl patria refoveo usitas." alt="Abbas augue dolus pneum." src="http://localhost/sites/default/files/styles/medium/public/imagefield_cmPzDo.png" typeof="foaf:Image">
</div>
</div>
</div>
</div>
<div id="views_slideshow_cycle_div_dummy_slideshow-block_2" class="views-slideshow-cycle-main-frame-row views_slideshow_cycle_slide views_slideshow_slide views-row-3 views_slideshow_cycle_hidden views-row-odd" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 220px; height: 195px;">
<div id="views_slideshow_cycle_div_dummy_slideshow-block_3" class="views-slideshow-cycle-main-frame-row views_slideshow_cycle_slide views_slideshow_slide views-row-4 views_slideshow_cycle_hidden views-row-even" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 194px; height: 220px;">
<div id="views_slideshow_cycle_div_dummy_slideshow-block_4" class="views-slideshow-cycle-main-frame-row views_slideshow_cycle_slide views_slideshow_slide views-row-5 views_slideshow_cycle_hidden views-row-odd" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 6; opacity: 1; width: 220px; height: 167px;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
When I live edit the div with
When I live edit the div with id: views_slideshow_cycle_main_dummy_slideshow and "align=center" the picture centers.
OK..so I assigned a class to
OK..so I assigned a class to the image in views. My problem now is:
How do I fill this div to the size of the slideshow region?
I can center it, but I have to specify a dimension and I'd prefer to have it just fill out the block.
I don't know the specifics,
I don't know the specifics, but my research on theming Views Slideshow suggests that some of these values are determined by the jquery.cycle module settings. Search through the Slideshow issues for more details.
Thanks for posting the
Thanks for posting the html.
Have you also got any screenshots? I'm not 100% I understand what you're trying to achieve.
Sam.