It depends on which images you want to alter; but you can specify some custom CSS on the “Other Options” page, in the Styles accordion. The following should do the trick for basic thumbnails:
.ngg-gallery-thumbnail img {
border: none;
}
this is all I see …under styles
What stylesheet would you like to use? Default Styles
Place any custom stylesheets in wp-content/ngg_styles
All stylesheets must contain a file header
(Show Customization Options
SO WHEN I CLICK ON show customization options I get a style sheet like the follwooing…is this where you mean I should put that code?
/*
CSS Name: Default Styles
Description: NextGEN Default Gallery Stylesheet
Author: Photocrati Media
Version: 2.12
This stylesheet is provided to allow users the ability of overriding the default styles for all display types
*/.ngg-gallery-thumbnail img {
border: none;
}
YOU CAN SEE I PLACED THE CODE HERE BUT THIS DOES NOT TAKE THE BORDER OUT OF MY IMAGES IN ANY OF MY GALLERIES..I TRIED TO CREATE NEW GALLERIES WITH NEW UPLOADED IMAGES AND IT DOES NOT TAKE THE BORDER OFF THE IMAGES….WHAT AM I DOING WRONG? IS THERE ANOTHER STYLE SHEET?
Please do not post in all caps – it’s considered yelling. It’s likely that borders are being added by your theme’s CSS – try using a browser tool like Firebug to look at the images to see where the border styles are coming from.
I tried a bunch of different themes and the borders still appear when I use the gallery from this plugin. so I am thinking it is not the theme itself…but I don’t know..im not a wordpress theme expert. I tried altering the code like I said because that is the only place they give you in the light version to change the css…that I can see. is there more options for changing code if you buy the pro version?
If your site is the one in your profile, it IS the theme.
cathyee, you are saying “to get rid of the borders around the images”. What image displays are you talking about here – gallery thumbnails, single pictures, slideshow…?
You can tailor about all aspects of each of those image displays using Other Options / Styles like you have already tried for just removing borders, you only need to know the correct names for the elements you are changing. Some themes may override even NGG’s style settings even though that is highly unlikely (according to tests I’ve made with NGG).
You also need to know what parts of the image display you really want to change; for example NGG’s default display of gallery thumbnails has actually two different attributes that may look like a border: the actual border (by default thumbnails it is 1px wide and grey) and the padding around image showing the background of the thumbnail element (by default padding is 5px and background is white so there seems to be a 5px white border around the thumbnail).
If you want to remove these two “borders” around the thumbnails you also need at least to remove them from the image’s hover (mouse-over) state as otherwise the whole thumbnail grid will move as you move your mouse over one of the images.
Below is an example I’ve used e.g. at my NGG testsite to change the css using NGG’s Styles option; it removes basically the white padding area and also margins around the thumbnails and changes the image opacity on hover using different browsers.
Hope this helps going forward 🙂
/*
CSS Name: Vesa's NGG Testbed Styles
Description: NextGEN Default Gallery Stylesheet
Author: Vesa
Version: 2.30
*/
.ngg-galleryoverview .desc {
/* required for description */
margin:0px 10px 10px 0px;
padding:5px;
}
.ngg-gallery-thumbnail-box {
float: left;
margin: 0px;
padding: 0px;
}
.ngg-gallery-thumbnail {
float: left;
margin-right: 0px;
text-align: center;
}
.ngg-gallery-thumbnail img {
background-color: #FFFFFF;
border: 1px solid #A9A9A9;
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
display:block;
margin:0;
padding:0;
position:relative;
}
.ngg-gallery-thumbnail img:hover {
background-color:#FFFFFF;
border:1px solid #A9A9A9;
display: block;
-webkit-opacity: 0.40;
-moz-opacity: 0.40;
opacity: 0.40;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
The sequence as the css files are loaded is not good. nggallery.css will not load as the last file. For that reason in some cases only the following code works:
.ngg-gallery-thumbnail img {
background-color:transparent!important;
border:none!important;
}
Thank you w.bear!! That worked beautifully for me.
