SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Gray borders around controls in Colorbox

    I am using Colorbox 7.x-1.5 module on Drupal site, works fine, but for some reason there are gray borders (angles _| ) near controls buttons(from right side): what cause this borders? How to get rid of these gray angles? See examples.

    sample
    borders

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    Hi,

    This is hard to tell without seeing the page.
    Could you post a link?

  3. #3
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I posted link (first link, sample).

  4. #4
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,824
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Off Topic:

    (Thread moved to CSS)

    The default display for <button> is for it to have those outlines. Try setting button {border:none;} and see how that goes...

  5. #5
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Strange, I had no such issue in previous Colorbox installations I used, I haven't changed anything in original Colorbox styles. And these buttons are not separate images, it's an images from sprite (controls.png)

  6. #6
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,824
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by espring View Post
    Strange, I had no such issue in previous Colorbox installations I used, I haven't changed anything in original Colorbox styles. And these buttons are not separate images, it's an images from sprite (controls.png)
    Doesn't matter whether they are separate images or not, they are called up by the <button> element, and that has a default border. Maybe previous installations of Colorbox used different code or removed that border by default ... or maybe you removed it and forgot that you had done it

  7. #7
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    Doesn't matter whether they are separate images or not, they are called up by the <button> element, and that has a default border. Maybe previous installations of Colorbox used different code or removed that border by default ... or maybe you removed it and forgot that you had done it
    Yes, button {border:none;} should work, I did quick test with Firebug, but where is the proper place to put this code in colorbox_default_style.css?

  8. #8
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,824
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by espring View Post
    Yes, button {border:none;} should work, I did quick test with Firebug, but where is the proper place to put this code in colorbox_default_style.css?
    Anywhere you like ... if there's any other code for button then it would make sense to include it with that, but it doesn't have to go there, it just makes it easier to work with in the future.

  9. #9
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    Anywhere you like ... if there's any other code for button then it would make sense to include it with that, but it doesn't have to go there, it just makes it easier to work with in the future.
    I searched Colorbox CSS for button code but didn't find it at all. Its not in colorbox_default_style.css

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,222
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    espring, you are correct. "button" does not appear on colorbox_default_style.css

    You have to add it anywhere in that file as follows:
    Code:
    #cboxContent button {
        border:none;
    }

  11. #11
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    espring, you are correct. "button" does not appear on colorbox_default_style.css

    You have to add it anywhere in that file as follows:
    Code:
    #cboxContent button {
        border:none;
    }
    Works fine. I tried also this
    Code:
    #cboxPrevious, #cboxNext, #cboxClose {
      border: none;
    }
    which works too, but your is shorter, so I stay with it. Thanks for the help!


Bookmarks

Posting Permissions

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