How to make full image sliders?

Discussion in 'Poloray WordPress Theme' started by deveshd, Feb 20, 2013.

  1. deveshd

    deveshd Member

    Joined:
    Jul 21, 2012
    Messages:
    282
    Likes Received:
    4
    I need to customize the slider in Poloray theme. I prefer something like Dzonia theme slider, where the full slide is image with transparent text over. How can I customize me slider in poloray? Please help.
     
  2. Piyush

    Piyush Support Staff

    Joined:
    Dec 8, 2012
    Messages:
    4,745
    Likes Received:
    107
  3. deveshd

    deveshd Member

    Joined:
    Jul 21, 2012
    Messages:
    282
    Likes Received:
    4
    Piyush: Can you help me customize?

    1. is there some code I can can copy from my DZonia theme and paste in the Poloray?
    OR
    2. get a slider plugin to add a slider in Poloray. How do I replace the existing slider with plugin slider though?
     
  4. Gourav

    Gourav Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    7,728
    Likes Received:
    207
    Every theme have different design, feature and functionality, therefore it is not possible to add one theme feature into another theme, You can find slider plugin from Wordpress.org, But it wont work on the front page of the theme
     
  5. deveshd

    deveshd Member

    Joined:
    Jul 21, 2012
    Messages:
    282
    Likes Received:
    4
    Thanks Gourav! How do I customize the homepage slider then? Please help. Thanks!
     
  6. Piyush

    Piyush Support Staff

    Joined:
    Dec 8, 2012
    Messages:
    4,745
    Likes Received:
    107
    You can customize the slider of this theme by pasting the following code in your custom css
    Appearance -> Theme Options -> Styling Options -> Custom CSS
    Code:
    .slides {
    width: 950px;
    }
    .flexslider .slides img {
    width: 950px;
    }
    .flex-direction-nav li .next {
    right: -563px;
    }
    .flexslider .slides {
    background-color: white;
    }
    .flexslider {
    margin-left: -490px;
    }
    .slider_wrapper {
    display:none;
    }
    .flex-control-nav {
    width: 580px;
    }
    .slider_info {
    margin-top: 294px;
    width: 960px;
    }
    Adjust the values as per your requirement.
     
  7. deveshd

    deveshd Member

    Joined:
    Jul 21, 2012
    Messages:
    282
    Likes Received:
    4
    Where do I increase the height of the slider, if I need bigger pictures?
     
  8. Piyush

    Piyush Support Staff

    Joined:
    Dec 8, 2012
    Messages:
    4,745
    Likes Received:
    107
    Hello Deveshd,
    Paste the following code in your custom css
    Appearance -> Theme Options -> Styling Options -> Custom CSS
    Code:
    .slider_info {
    margin-top: 350px;
    }
    .flexslider .slides {
    height: 300px;
    }
    .flexslider .slides img {
    height: 300px;
    }
    
    Adjust the value of 'margin-top' and 'height' as per your requirement.
     
  9. fbckeller

    fbckeller Guest

    Joined:
    Apr 10, 2013
    Messages:
    1
    Likes Received:
    0
    This thread has helped me quite a bit, but now I'm stuck trying to locate one piece that needs adjusting: the white "trim" around the slide image. Notice on the lower right corner, it is absent. I imagine the source image just needs to be enlarged to fit, but I can't seem to find where to do that. Can someone help?
    Screen Shot 2013-04-11 at 1.21.34 PM.png
     
  10. Gourav

    Gourav Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    7,728
    Likes Received:
    207
    Undo your old customization
    and
    Paste this code in Custom CSS
    Appearance > Theme Option > Styling Option > Custom CSS


    Code:
    .slides {
    width: 950px;
    height:350px;
    }
    .flexslider .slides img {
    width: 950px;
    height:350px;
    }
    .flex-direction-nav li .next {
    right: -563px;
    }
    .flexslider .slides {
    background-color: white;
    }
    .flexslider {
    margin-left: -490px;
    }
    .slider_wrapper {
    display:none;
    }
    .flex-control-nav {
    width: 580px;
    }
    .slider_info {
    margin-top:320px;
    width: 960px;
    }

    This will solve your issue.
     

Share This Page