Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    How do I remove the black border around the thumbnails???

    Just wondering if someone could help me out. Galleria is really excellent but the thumbnails have a black border around each of them, and I can't get rid of them. Could someone tell me how?

    Here is my code...

    Code:
    <html>
    <head>
    <meta content="text/html; charset=iso-8859-1"
    http-equiv="Content-Type">
    <title>Raspberries Cupcakes: Home</title>
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    <script src="galleria/galleria-1.2.6.min.js"></script>
    <style type="text/css">
    body,td,th {
    font-size: 12px;
    color: #000;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    }
    body {
    background-color: #FFF;
    }
    .galleria-container{
    background: #CC0066}​;
    }
    .white {
    color: #FFF;
    }
    .copyright {
    font-family: "Lucida Console", Monaco, monospace;
    font-size: 12px;
    color: #000;
    }
    .main {
    font-family: "Lucida Console", Monaco, monospace;
    font-size: 18px;
    color: #000;
    }
    .main {
    font-family: Verdana, Geneva, sans-serif;
    }
    .main {
    font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
    }
    </style>
    </head>
    <body
    style="background-image: url(background.jpg); color: rgb(229, 52, 174); background-color: rgb(255, 255, 255);"
    alink="#000099" link="#000099" vlink="#990099">
    <div style="text-align: center;">
    <p><img src="raspberrieslogo.gif" height="63" width="387"><img
    style="width: 151px; height: 151px; color: rgb(239, 76, 218);"
    alt="HeartLogo" src="heartlogotiny.jpg"><img src="cupcakeslogo.gif"
    alt="CupcakesLogo" height="64" width="302"></p>
    <p><img src="menu.gif" alt="Menu" usemap="#Map" border="0" height="43"
    width="895"> <map name="Map">
    <area shape="rect" coords="17,7,79,29" href="index.html">
    <area shape="rect" coords="106,12,211,29" href="contactus.html">
    <area shape="rect" coords="223,11,251,30" href="contactus.html">
    <area shape="rect" coords="299,12,357,28" href="menu.html">
    <area shape="rect" coords="403,12,488,31" href="prices.html">
    <area shape="rect" coords="521,11,640,34" href="delivery.html">
    <area shape="rect" coords="678,9,749,30" href="order.html">
    <area shape="rect" coords="782,11,884,35" href="gallery.html">
    </map>
    </p>
    </div>
    <table
    style="width: 1127px; text-align: left; margin-left: auto; margin-right: auto;"
    border="0" cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
    <td style="width: 200px;"><br>
    &nbsp; </td>
    <td width="810">
    <div id="gallery"> <img src="cupcake.jpg"
    alt=" Chocolate Cupcake"
    title="Chocolate sponge with cream cheese frosting and sprinkles"
    align="left"> <img src="211.jpg" align="left"><img src="img0192ob.jpg"
    alt="Raspberry Cupcakes"
    title="Chocolate sponge with cream cheese frosting with a raspberry on top"
    align="left"><img src="209ea.jpg" align="left"> <img src="202.jpg"
    alt="Cherry Cupcake"
    title="Chocolate sponge with cream cheese frosting" align="left"> <img
    src="208.jpg" alt="Cherry Cupcakes"
    title="Chocolate sponge with cream cheese frosting" align="left"><img
    src="img0190.jpg" alt="Chocolate Cupcake"
    title="Chocolate sponge with cream cheese frosting" align="left"></div>
    <script>
    Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
    $("#gallery").galleria({
    
    autoplay: 5000, // will move forward every 5 seconds
    pauseOnInteraction: false,
    transition: 'fade',
    width: 500,
    height: 500,
    outline: 0
    });
    </script></td>
    <td width="117">
    <p class="main"><span class="main"><strong><br>
    </strong></span></p>
    <p class="main"><span class="main"><strong><br>
    </strong></span></p>
    <p class="main"><span class="main"><strong>Any time is</strong></span>
    <span class="main"><strong>CUPCAKE</strong></span><strong> time.</strong></p>
    <p class="main" align="justify">Welcome to Raspberries Cupcakes,
    we are an internet only cupcake company. We are based in Manchester,
    UK. All our cupcakes are made to order just for you. So if you want to
    treat yourself or show some love for any occasion say it with our
    cupcakes. Contact us on either  or  or by e-mail
    at </p>
    <p class="main" align="justify"><a href="order.html">Order here</a></p>
    <p><img src="spacer.gif" alt="spacer" height="56" width="200"></p>
    <p><img src="facebookicon.gif" alt="facebook" height="74"
    width="69"><img src="twitterlogo.gif" alt="twitter" height="78"
    width="73"></p>
    <p>&nbsp;</p>
    <p class="main" align="justify">&nbsp;</p>
    </td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td> <br>
    </td>
    </tr>
    </tbody>
    </table>
    <p align="center"><span class="copyright">© Raspberries Cupcakes 2012.
    This website was created by <span style="background-color: white;"></span>. Brushes by <a
    href="http://creativesplash.deviantart.com/art/ps-floral-brushes-111118326">Daily
    Flower</a>.</span></p>
    </body>
    </html>
    Last edited by Halcyon1967; 03-06-2012 at 09:21 PM. Reason: To remove personal info

  • #2
    New Coder
    Join Date
    Dec 2011
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Sorry I forgot to say please.

    I would really appreciate any help.

    Thanks

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Nothing to do with JavaScript.

    Just use CSS to specify no border.

    Old fashioned way:
    Code:
    <img ... border="0" /?
    More modern way:
    Code:
    <img ... style="border: none;" />
    And of course you could put it in a style sheet in such a way that it applies to all images in a <div> or other container:
    Code:
    <style type="text/css">
    div#images img, img.noborder { border: none; }
    </style>
    
    ...
    <img ... /><!-- this one will have a brder -->
    
    <div id="images">
       <img ... /><!-- no border -->
       <img ... /><!-- no border -->
       <img ... /><!-- no border -->
       <img ... /><!-- no border -->
    </div>
    
    <img class="noborder" ... /><!-- another with no border -->
    
    ...
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Halcyon1967 (03-07-2012)

  • #4
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    [ot]

    Quote Originally Posted by Old Pedant View Post
    More modern way:
    Code:
    <img ... style="border: none;" />
    Inline styles, as above, are largely frowned upon nowadays and so I wouldn't call it "Modern way" of styling elements.

    Best practice nowadays is to keep content, styling and functionality as separate as possible and so css styling should be kept in separate stylesheets.


    [/ot]

  • #5
    New Coder
    Join Date
    Dec 2011
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you so much for the reply, I've tried using your advice but the black borders aren't gone, not sure what to do.

  • #6
    New Coder
    Join Date
    Dec 2011
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Its OK I've found the code to remove the black borders. Just in case anyone wants to know, you just add this...
    Code:
    .galleria-thumbnails .galleria-image { border:0px; }
    to the CSS.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •