Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
  • #5543


    No matter what I try, I can’t seem to get he border to not show up on my Avia Slider install. Here is my page:

    I am using the UL Class, but I can’t seem to figure out the Div Class. When I use that syntax it won’t slide for me.

    Can someone help me with this?





    try to add following codeto one of your stylesheets:

    .aviaslider img, .aviaslider a img, .aviaslider a{
    color: #fff !important;



    Thanks for the prompt response. For some reason, now the images don’t load, here is the code I have on the page now:

    <div class=’aviaslider’ id=”frontpage-slider”>

    <div class=”featured”></div>

    <div class=”featured”></div>

    <div class=”featured”></div>


    Here is the Stylesheet:


    -) Slider: only the following lines are necceassary for slider styling,

    rest of the css file styles the demo page



    height:200px; /*this changes the height of the image slider*/


    overflow: hidden;

    position: relative;

    background: #fff url(../images/layout/preload.gif) center center no-repeat;


    .aviaslider img, .aviaslider a img, .aviaslider a{

    color: #fff !important;


    .aviaslider li, .aviaslider .featured{

    display: block;



    position: absolute;



    z-index: 1;


    .js_active .aviaslider li, .js_active .aviaslider .featured{



    .aviaslider img, .aviaslider a img, .aviaslider a{


    text-decoration: none;


    Is there something I am missing?





    I got the opening image to display, but it doesn’t slide:

    <div class='aviaslider' id="diagonal-blocks">
    <div class=".featured"><a href="images/slides/slide1.jpg" title=""><img src="images/slides/slide1.jpg" alt="" /></a></div>
    <div class=".featured"><a href="images/slides/slide2.jpg" title=""><img src="images/slides/slide2.jpg" alt="" /></a></div>
    <div class=".featured"><a href="images/slides/slide3.jpg" title=""><img src="images/slides/slide3.jpg" alt="" /></a></div>
    <div class=".featured"><a href="images/slides/slide4.jpg" title=""><img src="images/slides/slide4.jpg" alt="" /></a></div>

    The URL is at:




    Open up the custom.js file, delete the whole content and insert following code instead:


    //activate the lightbox
    jQuery('a[href$=jpg], a[href$=png], a[href$=gif], a[href$=jpeg]').prettyPhoto({theme: "light_square"});

    blockSize: {height: 80, width:80},
    transition: 'slide',
    display: 'diagonaltop',
    switchMovement: true


    You can add, remove or change the parameters (transition, etc.) if you like :)


    Sorry, this also didn’t work. I tried replacing the entire file as well as adding it into the custom.js file and nothing. Only the first image appears and then it never transitions.

    To be clear, all I want is the image to transition with no border around it or no space.




    Can you send me the ftp login data to: (Email address hidden if logged out) – I’ll install the modified custom.js file.



    Did you get my last response? I e-mailed it, basically check out this site, I want there to be no space around the image:

    FTP is the same if you want to go in and check it out.





    Dude is currently away for 9 more days, if you just want to remove the border you can just change:

    <table width="1200" height="200" cellspacing="0" cellpadding="0" border="1">


    <table width="1200" height="200" cellspacing="0" cellpadding="0" border="0">

    I’m uncertain if it is as easy as this since I don’t know how the code is output, I don’t have these files. I’ll ask Kriesi.



    I can wait, it’s not just removing the table border. When I use the

      it will slide as it should but unfortunately it leaves an open space. I can’t make it to work with just using the <div> tags.

    Anyway, please let him know when he gets back and if he can help me.

    Thank you!



    I created an example with a div. I’m not familiar with table coding :)


    Can you send it to me please?




    The example code is:

    <div style="margin:auto; border: 1px solid #000;width:1200px;height:200px;">
    <ul class='aviaslider' id="diagonal-blocks" style="margin:0;">
    <li class="featured"><img src="images/slides/slide1.jpg" alt="" /></li>
    <li class="featured"><img src="images/slides/slide2.jpg" alt="" /></li>
    <li class="featured"><img src="images/slides/slide3.jpg" alt="" /></li>
    <li class="featured"><img src="images/slides/slide4.jpg" alt="" /></li>

    (of course css styles would be better than inline styles). I added the code to:


    Thank you very much… Looks great! Let me try it out for sure…

    Thanks again,



    Glad that I could help you :)

Viewing 15 posts - 1 through 15 (of 15 total)

The topic ‘Avia Slider No Border’ is closed to new replies.