Jump to content
Sign in to follow this  
peterb

Customizing Carousel on Pagelines Frameworks

Recommended Posts

peterb

Hello boys and girls. I'm trying to customize the Carousel on my page for Post Thumbnails. What I've tried to do is pinpoint the carousel with Firebug in Firefox, but that didn't cut it for me. I would like to do the following: 1. Change the background from the current #F2F2F2 (those colors nowhere mentioned in the general style.css or sections/carousel/style.css to the #FFFFFF 2. What I also would like to do is change the text, so it's always displayed, but not only when the mouse is hovering over the carousel images. P.S. Is it normal, that when I set both max image width and height is for post thumbnails as 140 pixels (that is 140x140), that some images, that have 150x150x featured images, are displayed as 150x150x ?

Share this post


Link to post
Share on other sites
peterb
Hi catrina, here's a link to my site: [url="http://einstein.is"]http://einstein.is[/url]

Share this post


Link to post
Share on other sites
kastelic
If you want to display the hover boxes try this: [code].list-title {display: block}[/code] It looks like you already got the background to be white?

Share this post


Link to post
Share on other sites
peterb
@kastelic Damn it. If so I must of forgot to clear caches, both on Hyper Cache and my browsers. Gonna try it again, and see what comes out of it.

Share this post


Link to post
Share on other sites
Danny
Hi Peter, Is this issue resolved ?

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
peterb
Hi Danny, and thank you for your concern, but no the issue isn't resolved. Here's what .thecarousel in secions/carousel/style.css file looks like at the moment: [code]#carousel .thecarousel{ background: #ffffff; position: relative; padding: 30px 67px 25px ; overflow: hidden; display: none; /* Prevents all images from showing on load; must be shown using JS ahead of carousel init. */ }[/code] And for text display, this is what's written in "content ul li [code]#carousel .content ul li{ float: left; text-align: center; position: relative; } #carousel .content ul li img { padding: 3px; } /* for text with hover over effect */ #carousel .content ul li a{ position: relative; display: block;} #carousel .content ul li a span.list-title{ color: #fff; text-shadow: #000 0 -1px 0; background: rgba(0,0,0, .9); font-family: 'calibri', 'lucida grande', arial; font-weight: bold; font-size: 13px; opacity:0.8; line-height: 1.4em; position: absolute; width: 90%; right: 0; bottom: 1px; display: block; }[/code]

Share this post


Link to post
Share on other sites
kastelic
Try this: [code].list-title {display: block !important}[/code]

Share this post


Link to post
Share on other sites
peterb
Thank you kastelic. That came in handy, and works, but it's wider than the image, so I have to customize that when the time comes. BTW the !important part helped a lot, as I used the following code to make the background white: [code].thecarousel {background: white !important}[/code] When I tried skipping the !important part my custom code was ignored.

Share this post


Link to post
Share on other sites
Jenny
I have found that !important is a necessity with most CSS custom code in PageLines 2.0. I have started adding it to all of my custom CSS just in case. :) If you consider this topic resolved, make sure you accept an answer. Thanks!

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
peterb
Aaa... Accepting answers now. This is resolved. Thanks for the reminder :)

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  

×