This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Tagged: , ,

Sliders on 'builder' pages

  • Creator
    Topic
  • #7868
    peterdwdc
    Participant

    Hi there,
    I’m having a couple of issues with sliders inserted into columns on ‘builder’ pages.
    I’ve created a test slider using images from elsewhere on the site which are all in the 960 x 540 pro which will match the static images on the page. When activated, they default to the main slider pro of 950 x 350 and sit inside the column area by a fair amount.

    You can view here: http://79.170.44.120/tnielsen.co.uk/skills/

    I found your post relating to changing the main and featured slider height with CSS

    #featured .element-slider .standard-slider-wrapper li.slide { height: auto; }

    which I have added to the custom CSS, but it hasn’t affected the ‘builder’ page sliders.

    So, basically I need 1] to get the slider to the full column width and 2] the slider to match the proportions of the image it contains, and not crop to the shallower depth.

    Thanks in advance

Viewing 7 replies - 1 through 7 (of 7 total)
  • Author
    Replies
  • #7872
    eklyx
    Member

    Have you tried changing the default image sizes?

    Jason pointed me to:
    http://wordpress.org/extend/plugins/theme-blvd-image-sizes/
    and together with the custom CSS it fixed the problem.

    (You might also need to regenerate the thumbnails but there’s a ThemeBlvd plugin for that too!)

    All the best…Rob.

    #7874
    peterdwdc
    Participant

    Thanks Rob,

    Have just tried the image size plugin and reset the ‘Staged Slide Images’ to my desired pro, deleted and uploaded a new image, but it’s still the same.

    Seems to be defaulting to the standard large-slider pro, which is what I’m using on the landing page.

    Hopefully there will be a relatively simple solution…

    #7890
    Jason Bobich
    Keymaster

    Hello,

    I found your post relating to changing the main and featured slider height with CSS …

    It’s only when the slider is in the “Featured Area” of a custom layout that it has this 350px CSS height restriction. Other wise, it’s always going to be the height (or more accurately, the aspect ratio) of the image crop size that determines the dimensions of the slider.

    And so that is where this plugin comes in, as you’ve found already: http://wordpress.org/extend/plugins/theme-blvd-image-sizes/

    Have just tried the image size plugin and reset the ‘Staged Slide Images’ to my desired pro, deleted and uploaded a new image, but it’s still the same.

    The “Staged Slide Images” size has nothing to do with how you’re using the slider. This crop size is for when you’re setting up a slide, and you select for the image to be aligned to the left or right, with a text block to the other side.

    Seems to be defaulting to the standard large-slider pro, which is what I’m using on the landing page.

    There is no feature in the theme unfortunately to have multiple crop sizes for “Full Width” slides. You essentially have this one “slider-large” size that is going to be used throughout the your site wherever you put a full-width slider.

    However, there is a trick. — WordPress can only make the crop size if the image you upload is large enough to be that size. If there is no slider-large crop size to pull from, then we can only pull the default image you uploaded. And so since the area you’re trying to put the slider into is only about 625px wide, you don’t need a full 960px wide image anyway.

    So the trick is to size your image before uploading it and make it smaller than 960×350. Then the raw image you uploaded will get used as a fallback.

    #7906
    peterdwdc
    Participant

    Thanks Jason – will give that a go on Monday as I don’t have the image files with me at the moment – and report back.

    #7936
    peterdwdc
    Participant

    Hi Jason,

    Have made the slider images smaller (700px width) and adjusted the slider depth through the plugin to accommodate my proportionally deeper images and that’s solved the crop issue on the page sliders – with no size specified on the image when source code is viewed. Landing page slider is still good as those images are sized to fit 960px x 350px.

    Referring back to my original post, the sliders are still not making the column width – which I guess is a CSS issue. I’ve looked at the CSS, but for the life of me can’t see where the margin/padding is coming from which is stopping the images filling the whole column width.

    View at same address: http://79.170.44.120/tnielsen.co.uk/skills/

    Thanks in advance.

    #7950
    Jason Bobich
    Keymaster

    For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme or in the “Custom CSS” option on your theme options page.

    #content .element-slider { margin: 0 0 10px 0 !important; }

    Click to enlarge

    Also, here’s a helpful tutorial on how to use Firebug – http://vimeo.com/20917974. The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files.

    #7981
    peterdwdc
    Participant

    Hi Jason, thanks for the CSS, works a treat! 🙂

    I actually use Firebug, and can usually see where to alter the CSS, but that one had me stumped. All CSS changes have been put into the “Custom CSS”area on this theme – but where themes don’t have the built-in facility, I add the Jetpack plugin which gives the same functionality.

    Thanks for the video link, I’ll have a look as I’m almost certainly not using Firebug effectively!!!!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The forum ‘Akita Responsive WordPress Theme’ is closed to new topics and replies.