Jump to content
Sign in to follow this  
eiresnet

Changing carousel width and size of thumbnails

Recommended Posts

eiresnet

Hi there. I am making a website for a conference that we are holding and I would like to have home page with carousel images on it. The webpage is: www.assisi2012.com Its still under development so you need to login to be able to see it: http://www.assisi2012.com/wp-login.php Username: guest Password: guest Basically what I would like to achieve the page that looks exactly like this: http://www.housefish.com/shop/key-modular-storage/ So my questions are: 1. How do I make carousel to be stretched over the entire page as on that page example I gave? I tried setting Carousel Page-FullWidth option, but that didn't worked. 2. How can I change the footer colour and width so that it looks the same as on that page? 3. How can I change size of thumbnails displayed in carousel? Sorry for all these questions. I searched forum thoroughly but couldn't find the answer. Tx for help!

Share this post


Link to post
Share on other sites
Kate

Hi Gerard - Because of the styles that are already in place on your site, it'll take some CSS tweaking to accomplish it. Add this to your CSS:

#site{position:relative;}
	#carouselwrap{background:#444444;min-height:100px !important;position:absolute;width:100%;z-index:3;margin:0px;left:0;text-align:center !important;}
	.carouselcontainer{text-align:center !important;width:824px;margin:0 auto;background:#444444;border:0px;}
	.home #contentcontainer{margin-top:123px !important;}

I only tested that in FF, so if you have issues in the other browsers, give us a shout. EDIT: Almost forgot about the thumbnail size. I'll have to double check on that in WHP... I know it PP it's an option under "Settings".

Share this post


Link to post
Share on other sites
eiresnet

Ok I added the code but now there is a big black box in the middle of carousel. It is as if he ignores the .carouselcontainer colour part. I must figure out how to do the same for the main menu now, since it is not the same width as the carousel now. And thanks for the help btw. I was so angry on myself for not being able to do these css customising things myself that I ordered CSS Web design for dummies :) Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime. (Chinese Proverb)

Share this post


Link to post
Share on other sites
Kate

Hey Gerard - No problem. And, I'm sure the book will be good for reference ;) For the background color: Try adding the "!important" declaration:

.carouselcontainer{text-align:center !important;width:824px;margin:0 auto;background:#444444 !important;border:0px;}

Share this post


Link to post
Share on other sites
eiresnet

That solved it! I still have two small black borders on the left and right but I think I know how to solve it. Thank you again!

Share this post


Link to post
Share on other sites
Kate

No problem. The "border:0px" should have solved that, but you may need to add the "!important" declaration to that as well.

Share this post


Link to post
Share on other sites
eiresnet

That did it! Here is the entire code if someone else ever needs it:

#site{position:relative;}
	#carouselwrap{background:#444444;min-height:100px !important;position:absolute;width:100%;z-index:3;margin:0px;left:0;text-align:center !important;}
	.carouselcontainer{text-align:center !important;width:824px;margin:0 auto;background:#444444 !important;border:0px !important;}
	.home #contentcontainer{margin-top:123px !important;}
	#footer{background:#444444;}

Share this post


Link to post
Share on other sites
eiresnet

I am sorry for asking additional question, but I cant solve it myself. I need my navigation bar to follow the width of the carousel (to be stretched just as carousel over entire page). How do I do this? And I need to change thumbnail size of carousel pictures. I cant find any settings for that.

Share this post


Link to post
Share on other sites
Kate

For the nav, you can add this:

#sitenav{width:100%;background-color:#072A5A;background-image:url("../images/nav-blue.png");position:absolute;left:0px;top:130px;}
	#nav{width:900px;margin:0 auto;}
Also, change the ".home #contentcontainer" line to this:
.home #contentcontainer{margin-top:157px !important;}
	#footer{background:#303030;}

For the thumbs: You're using NextGen, correct? I believe you can changing the thumbnail size directly through their settings will change the carousel thumb size too.

Share this post


Link to post
Share on other sites
eiresnet

That actually made carousel to go below the place where it was. Here is how my entire CCS looks like:

body{background:#F7F7F7;}
	.headline .home img{margin-left: 30px}
	#site{position:relative;}
	#carouselwrap{background:#303030;min-height:100px !important;position:absolute;width:100%;z-index:3;margin:0px;left:0;text-align:center !important;}
	.carouselcontainer{text-align:center !important;width:824px;margin:0 auto;background:#303030 !important;border:0px !important;}
	.home #contentcontainer{margin-top:157px !important;}
	#footer{background:#303030;}
	#sitenav{width:100%;background-color:#072A5A;background-image:url("../images/nav-blue.png");position:absolute;left:0px;top:130px;}
	#nav{width:900px;margin:0 auto;}

Share this post


Link to post
Share on other sites
cmunns

padding and margin work differently. This is what I find works for your site ` .home #contentcontainer { margin-top:35px !important; padding-top:124px; } ` Also, you will need to test in multiple browsers since this is an odd CSS positioning game that you're playing although necessary to get this result without editing HTML/PHP. You will also need this to remove the effect of the margin on the footer area. ` #footer { margin-bottom:-110px; overflow:hidden; } `

Share this post


Link to post
Share on other sites
eiresnet
For the thumbs: You're using NextGen, correct? I believe you can changing the thumbnail size directly through their settings will change the carousel thumb size too.
I tried this but it didn't affect the carousel thumb size.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×