I am hoping you might be able to help me with some css to increase the width of a zen tools carousel and also to remove as much padding as I can from above and below the Carousel.

Here is the page of the Carousel: apf.cloudaccess.net/dvd

The carousel is in the abovecontent position and I would like to extend the width of the carousel to be 736 pixels wide which is the width of the horizontal rule used on this page.

I would like to get rid of as much white space as I can above the carousel and also below it.

It looks like there might be quite a few places where we need to tweek the css. I will be displaying the module on every page that is under the DVD menu.

Any help will be greatly appreciated!

thank you, Sean Carney

Hi Sean,

To the left and right is where the control for the animation should be so if you add more elements to the carousel that space will be reduced

Other css wise

#abovecontent .moduletable {
margin-bottom: 60px;
}

Are you planning to use this position on every page?

Cheers
Paul

Paul,

I should have realized that space on the sides is for the controls.

I am planning to place this app only on the pages under the DVD menu. Those are my HikaShop pages at this point. So all the urls like:

apf.cloudaccess.net/dvd
apf.cloudaccess.net/dvd/ancient-health
etc...

I have just now placed the following code to reduce the top and bottom margin:
I set up the Carousel with an animated effect to be able to remove the text that was displaying below the images. I would sure like if you could show me how to change the background color (#4a687d) of the animated effect and also let me know if there is a way to round the corners for the animated effect.

The other thing that is a bit problematic with me is that this module does not look very good on the mobile devices because the text is too large for the space it fits in. So, any ideas on how you might deal with this would be greatly appreciated.

Sean

Hi Sean,

A little bit confused on the area you want me to look at - I don't see an animate effect on the first page

"I set up the Carousel with an animated effect to be able to remove the text that was displaying below the images. " - Don't quite follow

Could you elaborate?

Cheers
Paul

Thanks Paul,

At the page at apf.cloudaccess.net/dvd and it's child pages you can see a carousel that is not displaying the titles under the image. That is because I selected the option to have an animated effect in the Carousel settings:

Add an overlay effect? Yes
Animate overlay effect? Yes

So, now the titles are being displayed in an animated effect that covers the image.

Does that make sense now?

Thanks, Sean

Also, if you could help me to make the css changes only apply to the pages within the DVD section I would be very grateful since the changes I put in to make the carousel here look nice have actually broken the home page.

Hi Sean,

It depends how you want to do it really - currently its a background image that is applying

.zentools.overlay .allitems {background: url(../images/blackOverlay.png);}

so you could use an image or use rgba - for example -

body .zentools.overlay .allitems {background: rgba(158, 32, 32, 0.8);}

Cheers
Paul

I used the RGBA. Thank you for that!

Do you think you could look again at my Carousel that is in the DVDs section and help me know what I could add to the css so that only the abovecontent position of the dvds section will be effected. Right now that custom code is breaking my home page.

I know that you must have a good trick to either limit the changes to specific menu pages or specific category ids or some other nice trick! Here is the code again that is changing my DVDs section perfectly but messing up my home page:

#abovecontent .moduletable {
margin-top: -68px;
margin-bottom: -40px;
}

How is the content organised menu link wise?

Is it one blog link for the category or is the content spread across several links?

Cheers
Paul

Also ideally I wouldn't use negative margins - odd things can happen

Where possible I'd target the divs in the site

#abovecontent .moduletable {
margin-bottom: 0px;
}
#abovecontent {
margin-bottom: 0px;
}

.main-content-inner {padding-top: 0px;}

This would affect all pages as the your current styling does but depending on your link structure we may be able to do something about that

Cheers
Paul

That is certainly good enough. I think I will leave it with this new code that you gave me. I like all the pages I have seen so far even though I had thought to reduce the white space a bit more in the DVDs section. But, the fact is some people will probably like it better with the white space.

Thank you for helping me with this.

Sean

No problem

You could add a menu link class if its just a single category link and then use that class in front of the styles

Cheers
Paul