Jump to content
Sign in to follow this  
MissT

Feature Slider in content area but image alignment now wrong!

Recommended Posts

MissT

Can anyone please tell me how to control the aligment of the images within my feature slider? I have managed (after a lot of trial and error!) to add code to get a feature slider in the content area aligned to the right with a side bar on the left containing the menu. The only problem is the images within the slider are now off centre and are further to the right so the right hand part of the image is cut off. I'm new to Platform Pro and CSS but have tried removing the 'float right' from various parts of the following code but with no luck. I'm almost there with it so if someone could help with this that would be great :) I've been playing with the slider on 2 different pages: http://www.simondesign.co.uk/blog/newsite/ http://www.simondesign.co.uk/blog/newsite/print/ The offending code: #feature_slider.page-id-14 div{width: 590px;float:right} .page-id-14 #feature-footer.dots{width: 590px;float:right} .page-id-14 #feature-footer{width: 590px;float:right} .page-id-14 #feature_slider{width: 590px;float:right} .page-id-14 #sidebar-wrap{margin-top:-440px;} .page-id-14 #feature-area{width: 590px;float:right} .page-id-14 #feature-wrap{width: 590px;float:right} #feature_slider.page-id-106 div{width: 590px;float:right} .page-id-106 feature-footer.dots{width: 590px;float:right} .page-id-106 #feature-footer{width:590px;float:right} .page-id-106 #feature_slider{width:590px;float:right} .page-id-106 #sidebar-wrap{margin-top:-440px;} .page-id-106 #feature-area{width: 590px;float:right} .page-id-106 #feature-wrap{width: 590px;float:right} Thanks in advance, Tracy.

Share this post


Link to post
Share on other sites
MrFent
Trying adding the following code to your custom CSS: .feature-wrap {background-position: left !important}

Share this post


Link to post
Share on other sites
MissT
Thanks, that hasn't worked though sadly.

Share this post


Link to post
Share on other sites
kastelic
Do you need text on those features? Because it looks like you have the text-on-left layout enabled for those and if you don't need that, you should switch it to full-width image - no text. This would be in each individual features settings.

Share this post


Link to post
Share on other sites
MissT
I've checked each feature post settings and text is not enabled, all are already set to 'full width image no text'. Thanks anyway, was worth checking.

Share this post


Link to post
Share on other sites
amah_lafabriquedustyle
Hello, I rebound on this, not to help (sorry), but to ask a precison on what you achieved: could you please tell me how you integrated the features slider into the content zone?

Share this post


Link to post
Share on other sites
MissT
Hi there, The best I've managed with the feature slider is on this page with code as follows below: http://www.simondesign.co.uk/blog/newsite/print/ #feature_slider.page-id-106 div{width: 590px;float:right} .page-id-106 feature-footer.dots{width: 590px;float:right} .page-id-106 #feature-footer{width:590px;float:right} .page-id-106 #feature_slider{width:590px;float:right} .page-id-106 #sidebar-wrap{margin-top:-440px;} .page-id-106 #feature-area{width: 590px;float:right} .page-id-106 #feature-wrap{width: 590px;float:right} As you can see i still need to fix the image alignment within the slider. I've even tried removing the float right on everything and the slider moves back to the left covering the menu but the image is still aligned to the right within the slider which I don't quite understand. However, the good news is I've had more success using the Meteor-slides plugin, it's pretty simple to use and worked straight away so might be worth a try for you too. I've got it working on the following test page: http://www.simondesign.co.uk/blog/newsite/print-slide/ You can easily set the width and height within the settings for the plugin and it looks like you can have more than one and different sized sliders also although I've not tried that yet. http://wordpress.org/extend/plugins/meteor-slides/ Good luck!

Share this post


Link to post
Share on other sites
kastelic
Hi there are some elements which still are the default width which is causing you the problem. This should fix it: [code] #feature .wcontent {width:589px !important;} [/code]

Share this post


Link to post
Share on other sites
MissT
Thanks for the reply but that has made no difference, its still lining up wrong. Cheers, Tracy.

Share this post


Link to post
Share on other sites
Kate
Hi Tracy, I believe it's because you didn't change the width of the interior elements. Please try this: [code]#feature-area, #cycle, .fcontainer, .feature-wrap{width:580px !important;}[/code]

Share this post


Link to post
Share on other sites
MissT
Thanks very much Kate - that fixed it! :) For anyone else who is following this and may want to do this... The feature slider is now working on this page: http://www.simondesign.co.uk/blog/newsite/print/ The alternative Meteor Slides plugin is working on this page: http://www.simondesign.co.uk/blog/newsite/projects/print/print-detail/ I now have another issue that I will raise another discussion on which is 'Can you set where a feature slider starts? i.e. can you make its start on the 3rd feature when someone clicks a certain link and from another feature when you click a different link?' i think I can do this with the Meteor Slides plugin using an additional JQuery plugin but would prefer to use the Feature Slider if its possible to do this with it. Thanks again Kate, Tracy

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  

×