Jump to content
Sign in to follow this  

Better Carousel Customized for iBlogPro5

Recommended Posts


Hi Nick,

want to share my customization work for wonderful Better-Carousel to integrate beautifully into iBlogPro5 plus adding two suggestions and wishes for the product to make the better even better ;)

First of all: unfortunately out of the box iBlogPro5 will overwrite Better-Carousel if you have an activated iAccordion-Section because of a jQuery-conflict! Using the Framework only - no problem.
This was reported and solved in the following topic:




Better-Carousel needs a proper working jQuery for its responsive design! For a shortcut I pasted the solution part of the threat in here:



* * *


»To be more specific:  jQuery UI 1.8.16 - from iAccordion seems to be causing a conflict with jQuery FlexSlider v2.1 in Better-Carousel.


My solution was: erasing  jQuery UI 1.8.16 in pagelines-iblogpro5 > sections > iaccordion > jquery.ui.accordion.js

And don't touch the parts: jQuery UI Widget 1.8.16 and jQuery UI Accordion 1.8.16 ! They seem to be responsible to have a working accordion widget in the sidebar.


I'm not a pro and I was just playing around with that, but this gave me a working Accordion-Widget + the Better-Carousel working like default and untouched.

Please note: Editing directly in the core will be overwritten with future updates - so whenever you install a iBlogPro5-Update - you might have to redo this work! «


* * *


1. Suggestion - images should not be cut scrolling to the next set of images - two screenshots show what I mean:


1st screenshot shows the layout and design of the first set of images in the carousel - perfectly fitting into the box.


2nd screenshot shows the images being cut after scrolling to the next image sets. I would prefer they would neatly fill the space and not be cutted - behaving like in the pagelines carousel!

2. Suggestion - It would be nice if you could add the text-blend-in effect on <hover> like in the pagelines carousel as an option. Would look great, I think.

So here is my Customization-CSS from the screenshots above for anybody who wants to add Better Carousel to iBlogPro5 and play around with it - enjoy:

/* BETTER CAROUSEL (Margins, Shadows etc.) */

.better-carousel .slides li, .better-carousel.better-clone .slides li {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    margin: 1px 0px 3px 1px; 
    padding: 3px;

#better-carousel li {
    margin-right: 14px;

/* BETTER CAROUSEL (Box etc.) */   
.better-carousel, .better-carousel.better-clone {
    background-color: #FAFAFA;
    background-image: -moz-linear-gradient(center top , #FFFFFF, #F2F2F2);
    background-repeat: repeat-x;
    border: 1px solid #FFFFFF;
    border-radius: 4px 4px 4px 4px;
    padding: 20px 20px 5px;
    text-shadow: 0 1px 0 #FFFFFF;
    border-color: #E4E4E4 #CCCCCC #BBBBBB;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 #CCCCCC;

.better-control-nav {
    margin-top: 5px;

/* BETTER CAROUSEL (Navigation Buttons) */   

.better-control-paging li a {
    -moz-box-sizing: border-box;
    background: none repeat scroll 0 0 #E7E9EC;
    border-radius: 12px 12px 12px 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset, 0 1px 0 rgba(255, 255, 255, 0.2);
    color: rgba(0, 0, 0, 0.4);
    display: inline-block;
    font-size: 12px;
    line-height: 20px;

/* BETTER CAROUSEL (Titelbox Adjustments) */

.better-carousel-item-title {
    height: 65px;
    margin-right: : -4px;   
    padding: 5px;
    background: none;
    box-shadow: inherit;
    line-height: 15px;

/* BETTER CAROUSEL (Text istance to image (-) values bringing text into the image and overlay) */

.better-carousel .slides li img, .better-carousel.better-clone .slides li img {
    display: block;
    margin-bottom: 0px;

Aloha - Tang

Share this post

Link to post
Share on other sites



So what do you think of my suggestions? Any plans to integrate them into Better Carousel? Or could you eventually provide a solution for me to put into Custom-CSS.


The thumbs beeing cut when scrolling are hard to accept, specially if they provide text information, which is also sliced in pieces. When you scroll on you can try to put the puzzle pieces together in your mind - not the best solution. As I can see, you also have this in your demo. I think this is a top priority for the design of better-carousel!

Share this post

Link to post
Share on other sites

Nick, I did a modification editing underlying Flexslider2 parameters in the corresponding better-carousel > section.php adding values for: minItems: 2, + maxItems: 7

<script type="text/javascript">
            jQuery(window).load(function() {
              jQuery('.better-carousel.<?php echo $clone_class;?>').flexslider({
                animation: "slide",
                controlNav: <?php echo $better_carousel_show_ctrlnav;?>,
                animationLoop: true,
                slideshow: <?php echo $better_carousel_slideshow;?>,
                slideshowSpeed: <?php echo $better_carousel_ss_speed;?>,
                itemWidth: <?php echo $better_carousel_item_width;?>,
                itemMargin: 5,
                 minItems: 2,
                 maxItems: 7,
                namespace: "better-",

That did the trick and works to adjust better-carousel behavior without cutting off images! But careful - the Margin-Right has to be properly adjusted to get a proper scrolling! Mismatch leads to cutoff again. I haven't found out how to autospace the thumbs …having  that feature would be great and making this much easier. In my case with the 7 Items I used this setting in Custom-CSS:

#better-carousel li {
    margin-right: 4px;

Aloha - Tang  :)

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  

  • Similar Content

    • dawsonbarber
      By dawsonbarber+
      Scratch this topic: the usual way does work. I think I need sleep.
      (Couldn't prefix the topic with iblogpro6 because it's not in the topic prefix dropdown).
      Anyway, I've tried the usual way, with Danny's Skeleton theme, but it's not working.
      Could someone let me know what I need to do?
    • darcythe2nd
      By darcythe2nd
      I don't want to keep the pagelines, html5, or css3 icons in the solid footer. I don't see how to get rid of them. They're there even if I leave the website address blank. How to get rid of them??
    • darcythe2nd
      By darcythe2nd
      I installed this but am unable to find where I can change the color of the solidfooter to anything other than the original white! Please help!
    • hypman
      By hypman
      I thought i had installed this properly a few days ago but now im not sure as i ve seen 2 versions of frameowrk in my themes. (see image)
      if i activate the multi coloured fromawork theme i see no error messages, but when i activate the other framework theme i see this again:
      Install Error!
      PageLines Framework must be installed in a folder called 'pagelines' to work with child themes and extensions.

      Current path: /home/stopsmok/public_html/ripley-hypnotherapy.co.uk/wp-content/themes/PageLines
      Will the ilblog not run correctly if i ignore this? i cant see nay issues with the theme?
      ps the site is ripley-hypnotherapy.co.uk
    • hypman
      By hypman
      Hi guys
      Ive just installed framework then i added iblog pro 5 and the site seems ok but i ve got an error message:
      Install Error! PageLines Framework must be installed in a folder called 'pagelines' to work with child themes and extensions.

      Current path: /home/warringt/public_html/wp-content/themes/PageLines-Framework-master
      Im not sure how to correct this, but as i say the site looks ok anyway
      Any ideas? ive read a little but im still confused lol