Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Junior Member
    Join Date
    Sep 2013
    Posts
    10
    Member #
    37249

    Gallery Image Border

    Hey guys I have been working on this site and most of it is a template but Ive been tweaking coding here and there ( my knowledge is pretty basic)

    any way I'm trying to get a white border on these images in the gallery.
    Ireland - LEE TAKES PICTURES

    right now it shows up black but just a line and on mobile its solid.
    Im making the site through Weebly and they hide some of their coding in the editor. Im pretty good about finding code and figuring out how to manipulate it but not good at all writing it from scratch.

    any help would be awesome.
    thanks

  2.  

  3. #2
    Senior Member RDesignista's Avatar
    Join Date
    Feb 2012
    Location
    Coconut Tree City
    Posts
    822
    Member #
    30921
    Liked
    123 times
    I think I remember commenting about the white borders a while ago.

    This is your selector:

    html body .galleryImageBorder, html body a .galleryImageBorder

    Right now the border is set to a transparent black. You need it white.

    html body .galleryImageBorder, html body a .galleryImageBorder { border-color:white!Important}

    I wrote !important because it's an override of other conflicting styles.




  4. #3
    Junior Member
    Join Date
    Sep 2013
    Posts
    10
    Member #
    37249
    Quote Originally Posted by RDesignista View Post
    I think I remember commenting about the white borders a while ago.

    This is your selector:

    html body .galleryImageBorder, html body a .galleryImageBorder

    Right now the border is set to a transparent black. You need it white.

    html body .galleryImageBorder, html body a .galleryImageBorder { border-color:white!Important}

    I wrote !important because it's an override of other conflicting styles.




    I think you did too.

    I tried playing with what you gave me and adding it to the css and html editor but i was not able to make it work.

    i assume its CSS and just needs to be copied in. any idea where it needs to pasted into?

  5. #4
    Senior Member RDesignista's Avatar
    Join Date
    Feb 2012
    Location
    Coconut Tree City
    Posts
    822
    Member #
    30921
    Liked
    123 times
    I checked the color. It seems you tried to make it #ddd color, right?

    You need to use !important because it overrides other styles.

    Either that or you can find the original line (search for html body .galleryImageBorder, html body a .galleryImageBorder ) and just replace the color. The color being used now is rgba(0,0,0,.06).

    Or if you can't find it, place the code at the bottom of the stylesheet (.css) because stylesheets are read top to bottom and any similar selectors affecting the same attribute are overwritten.

    TLDR: CSS PRIORITY ORDER CAUSES STYLES TO SOMETIMES NOT WORK - SO REPLACE THE LINE OR USE !important.

  6. #5
    Junior Member
    Join Date
    Sep 2013
    Posts
    10
    Member #
    37249
    Quote Originally Posted by RDesignista View Post
    I checked the color. It seems you tried to make it #ddd color, right?

    You need to use !important because it overrides other styles.

    Either that or you can find the original line (search for html body .galleryImageBorder, html body a .galleryImageBorder ) and just replace the color. The color being used now is rgba(0,0,0,.06).

    Or if you can't find it, place the code at the bottom of the stylesheet (.css) because stylesheets are read top to bottom and any similar selectors affecting the same attribute are overwritten.

    TLDR: CSS PRIORITY ORDER CAUSES STYLES TO SOMETIMES NOT WORK - SO REPLACE THE LINE OR USE !important.
    Thank you thank you thank you.

    After entering your code and adding the following adjustments I now have white borders.

    .galleryImageBorder, html body a .galleryImageBorder
    { border-color:white!Important;
    padding:0px!Important;
    border-width:thick!important;
    }

    Now the only problem I still have is the mobile version seems unaffected by my changes.

  7. #6
    Junior Member
    Join Date
    Jan 2014
    Posts
    5
    Member #
    38175
    I don't know if this would hep, but on Image Galleries CSS Generators is a list of image galleries in CSS and HTML that you are able to generate easily using a GUI where you just enter the url of your image or even upload it directly on the webiste.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:48 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com