Help: Pagelines box CSS overwriting CSS of a plug-in

[danielfinn 1]

I am using the vSlider image slider for wordpress and when I place the slider shortcode into a box a solid black line appears on top of the slider's caption. This does not happen when I place the shortcode into the body of a page - only if it is placed in a box. I emailed the developer and he told me that the theme CSS was overwritting that of the plug-in. Could someone help me? I have included a page link to the slider I am referring to on my website http://www.danielfinn.co.uk/danielfinn/?page_id=867 (it is still under development).

[Stefan 6]

Hey Daniel, Is this the slider you are referring to? http://screencast.com/t/OHQgKZnWl89 If so, the caption doesn't seem to be displaying properly... it is definitely not centered and needs some readjustments. If that is the issue, let us know and we will try to help you out. Have you tried using one of the sliders available in the PageLines Store? They were developed exclusively for the Framework and have no functional issues whatsoever :)

[danielfinn 1]

Thanks for the reply. That is the slider I am talking about. The black line only shows up when the slider is placed one of the boxes - and does not show when it is placed in the page body. I am using that slider as I want to be able to place it in any page, box or post with a shortcode and then float it. Can you do this with any of the ones in the page lines store? If you can I will switch to that right away!

[Rob 547]

Daniel, I don't see any sliders on that page. To answer.. try the shortcode slider here: http://demo.pagelines.com/framework/tools/

[danielfinn 1]

Sorry I have removed the slider as I am planning on trying somehting different. If I was to use that slider how would I insert it into a page? Would I just insert the followig code into pageline customise [code][pl_carousel name="PageLinesCarousel"] [pl_carouselimage first="yes" title="Slide 1" imageurl="" ] Here is the first slide and it's caption. [/pl_carouselimage] [pl_carouselimage title="Slide 2" imageurl=""] Here is the second slide, in all its glory. [/pl_carouselimage] [pl_carouselimage title="Slide 3" imageurl=""] You can have as many slides as you can create. [/pl_carouselimage] [/pl_carousel][/code] and then reference the CSS class / carousel name in the body of the page using html? If so, what would the html be? Also, How would I add or modify the margin or add padding to carousel slider?

[beardedavenger 158]

That is a shortcode, introduced with Wordpress 2.5 over 4 years ago. Shortcodes go into any post or page, not the customize plugin. Where did you see that this code needs to be put into the customize plugin? The carousel comes already built, and all the css is already there for you. All you need to do is put that shortcode onto a page (since you have the images on separate lines, you need to wrap the entire sc in [pl_raw] to prevent Wordpress from inserting line breaks).

[danielfinn 1]

Thanks for the help. I did not read the customize thing anywhere, I had just presumed - am quite new to wordpress and pagelines. If I wanted to edit the margin of the carousel in the shorcode, as reducing the overal size of the slider and floating it in amongst a body of text do you know what I would do? is there some thing I could include in the code or do I need to modify something esle? Do you know if there are any materials available on this?

[danielfinn 1]

I have attempted to do by combining two dived columns using the following code. Is this code correct? Is there a better way of doing it? [code]

[pl_carousel name="PageLinesCarousel"] [pl_carouselimage first="yes" title="Slide 1" imageurl="" ] Here is the first slide and it's caption. [/pl_carouselimage] [/pl_carousel]

text for column two

[/code] Is this suitable? Is there an easier way to do this?

[beardedavenger 158]

Ah yes, ok the overall size. Yes the overall size, or width of the carousel, will fill the parent div that it sits in. So one way to shrink the overall width is to either put it in a column like you have which is cool, or you can do some minor inline styling (if you dont mind that sort of thing as it's not exactly best practice) like [code]

[your shortcode]

[/code] This would give you a carousel approximately 75% width, and centered. Hope this helps, Nick

[danielfinn 1]

Thanks for the help! Do you know how I would go about altering other styling aspects of the carousel? Is there a CSS tag for it, after which I just reference the name given to the slider and custom code? For example, I would like to... alter the time period between each slide remove the navigation controls or alter their opacity stop slideshow on mouse hover allow user to click on a slide and be directed to a URL

[Jenny 33]

You can learn how to change CSS on anything! http://www.pagelines.com/wiki/Custom_CSS