Support » Plugin: WordPress Gallery Plugin - NextGEN Gallery » Gallery Columns are displayed in 1 column

  • Resolved jonasdh

    (@jonasdh)


    Hello,

    I have an issue occuring on my website and was wondering if anyone can help me with this.
    So the issue is that the next gen galleries are showing in 1 long column instead of 5 like how it used to be (didn’t change anything)

    Has anyone had this problem before?

    nggallery.css:

    /*
    CSS Name: Default Styles
    Description: NextGEN Default Gallery Stylesheet
    Author: Alex Rabe
    Version: 1.50
    
    This is a template stylesheet that can be used with NextGEN Gallery. I tested the
    styles with a default theme Kubrick. Modify it when your theme struggle with it,
    it's only a template design
    
    */
    
    /* ----------- Album Styles Extend -------------*/
    
    .ngg-albumoverview {
    	margin-top: 10px;
    	width: 100%;
    	clear:both; 
    	display:block !important;
    }
    
    .ngg-album {
        height: 100%;
        padding: 5px;
        margin-bottom: 5px;
        /*border: 1px solid #fff;*/
    }
    
    /* IE6 will ignore this , again I hate IE6 */
    /* See also http://www.sitepoint.com/article/browser-specific-css-hacks */
    html>body .ngg-album {
        overflow:hidden;
        padding: 5px;
        margin-bottom: 5px;
        /*border: 1px solid #cccccc;*/
    } 
    
    .ngg-album {
    	overflow: hidden;
    	padding: 5px;
    	margin-bottom: 5px;
    	/*border: 1px solid #cccccc;*/
    }
    
    .ngg-albumtitle {
    	text-align: left;
     	font-weight: bold;
    	margin:0px;
    	padding:0px;
    	font-size: 1.4em;
    	margin-bottom: 10px;
    }
    
    .ngg-thumbnail {
    	float: left;
    	margin-right: 12px;
    }
    
    .ngg-thumbnail img {
    	background-color:#FFFFFF;
    	/*border:1px solid #A9A9A9;*/
    	margin:4px 0px 4px 5px;
    	padding:4px;
    	position:relative;
    }
    
    .ngg-thumbnail img:hover {
    	background-color: #A9A9A9;
    }
    
    .ngg-description {
    	text-align: left;
    }
    
    /* ----------- Album Styles Compact -------------*/
    
    .ngg-album-compact {
    	float:left;
    	height:180px;
    	padding-right:6px !important;
    	margin:0px !important; 
    	text-align:left;
    	width:120px;	
    }
    
    .ngg-album-compactbox {
    	/*background:transparent url(albumset.gif) no-repeat scroll 0%;*/
    	height:86px;
    	margin:0pt 0pt 6px !important;
    	padding:12px 0pt 0pt 7px !important;
    	width:1200px;
    }
    
    .ngg-album-compactbox .Thumb {
    	/*border:1px solid #000000;*/
    	margin:0px !important;
    	padding:0px !important;
    	width:910px; 
    	height:68px;
    }
    
    .ngg-album-compact h4 {
    	font-size:15px;
    	font-weight:bold;
    	margin-bottom:0px;
    	margin-top:0px;
    	width:110px;
    }
    
    .ngg-album-compact p {
    	font-size:11px;
    	margin-top:2px;
    }
    
    /* ----------- Gallery style -------------*/
    
    /* .ngg-galleryoverview {
    	overflow: hidden;
    	margin-top: 10px;
    	width: 100%;
    	clear:both; 
    	display:block !important;
            width: auto !important;
            float: none !important; */
    }
    
    .ngg-galleryoverview .desc {
    /* required for description */
       margin:0px 10px 10px 0px;
       padding:5px;
    }
    
    .ngg-gallery-thumbnail-box {
    	float: left;
    }
    
    .ngg-gallery-thumbnail {
    	float: left;
    	margin-right: 5px;
    	text-align: center;
    }
    
    .ngg-gallery-thumbnail img {
    	background-color:#FFFFFF;
    	/*border:1px solid #A9A9A9;*/
    	display:block;  
    	margin:4px 0px 4px 5px;
    	padding:4px;
    	position:relative;
    }
    
    .ngg-gallery-thumbnail img:hover {
    	background-color: #A9A9A9;
    } 
    
    .ngg-gallery-thumbnail span {
    	/* Images description */
    	font-size:90%;
    	padding-left:5px;
    	display:block; 
    } 
    
    .ngg-clear {
    	clear: both;
    }
    
    /* ----------- Gallery navigation -------------*/
    
    .ngg-navigation {
    	font-size:0.9em !important;
    	clear:both !important;
    	display:block !important;
    	padding-top:15px;
    	text-align:center;
    	
    }
    
    .ngg-navigation span {
    	font-weight:bold;
    	margin:0pt 6px;
    }
    
    .ngg-navigation a.page-numbers,
    .ngg-navigation a.next,
    .ngg-navigation a.prev, 
    .ngg-navigation span.page-numbers,
    .ngg-navigation span.next,
    .ngg-navigation span.prev {
    	border:1px solid #DDDDDD;
    	margin-right:3px;
    	padding:3px 7px;
    }
    
    .ngg-navigation a.page-numbers:hover,
    .ngg-navigation a.next:hover,
    .ngg-navigation a.prev:hover, 
    .ngg-navigation span.page-numbers:hover,
    .ngg-navigation span.next:hover,
    .ngg-navigation span.prev:hover {
    	background-color: #0066CC;
    	color: #FFFFFF !important;
    	text-decoration: none !important;
    }
    
    /* ----------- Image browser style -------------*/
    
    .ngg-imagebrowser {
    
    }
    
    .ngg-imagebrowser h3 {
    	text-align:center;
    }
    
    .ngg-imagebrowser img {
    	/*border:1px solid #A9A9A9;*/
            /*position:relative;*/
    	text-align:center;
            margin-top: 10px; 
    	margin-bottom: 10px; 
    	/*width: 100%;*/
    	display:block !important;
    	padding:5px;
    }
    
    .ngg-imagebrowser-nav {
    	
    	
    }
    
    .ngg-imagebrowser-nav img {
    	margin:0px;	
    }
    
    .ngg-imagebrowser-nav .back {
    	float:left;
    	margin-right:3px;
    	position:relative;
    	top:-10px;
    	/*width:30px;
    	height:30px;
    	border:1px solid #6e6e6e;  
    	padding:3px 7px;*/
    }
    
    .ngg-imagebrowser-nav .next {
    	float:right;
    	position:relative;
    	top:-10px;
    	/*width:30px;
    	height:30px;
    	border:1px solid #6e6e6e;  
    	padding:3px 7px;*/
    }
    
    .ngg-imagebrowser-nav .counter {
    	text-align:center;
    	font-size:0.9em !important;
    }
    
    .exif-data {
      	margin-left: auto !important;
            margin-right: auto !important;	
    }
    
    /* ----------- Slideshow -------------*/
    .slideshow {
    	margin-left: auto; 
    	margin-right: auto;
    	text-align:center;
    	outline: none;	
    }
    
    .slideshowlink {
    	
    }
    
    /* ----------- Single picture -------------*/
    .ngg-singlepic {
    	background-color:#FFFFFF;
    	display:block;  
    	padding:4px;
    }
    
    .ngg-left {
    	float: left;
    	margin-right:10px;
    }
    
    .ngg-right {
    	float: right;
    	margin-left:10px;
    }
    
    .ngg-center {
      	margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* ----------- Sidebar widget -------------*/
    .ngg-widget,
    .ngg-widget-slideshow {
    	overflow: hidden;
    	margin:0pt;
    	padding:5px 0px 0px 0pt;
    	text-align:left;
    }
    
    .ngg-widget img {
    	border:2px solid #A9A9A9;
    	margin:0pt 2px 2px 0px; 
    	padding:1px; 
    }
    
    /* ----------- Related images -------------*/
    .ngg-related-gallery {
    	background:#F9F9F9;
    	/*border:1px solid #E0E0E0;*/
    	overflow:hidden;
    	margin-bottom:1em;
    	margin-top:1em;
    	padding:5px;
    }
    .ngg-related-gallery img {
    	/*border: 1px solid #DDDDDD;*/
    	float: left;
    	margin: 0pt 3px;
    	padding: 2px;
    	height: 50px;
    	width:  50px;
    }
    
    .ngg-related-gallery img:hover {
    	/*border: 1px solid #000000;*/
    } 
    
    /* ----------- Gallery list -------------*/
    
    .ngg-galleryoverview ul li:before {
    	content: '' !important;
    }
    
    .ngg-gallery-list {
    	list-style-type:none;
    	padding: 0px !important;
    	text-indent:0px !important;	
    }
    
    .ngg-galleryoverview div.pic img{
    	width: 100%;	
    }
    
    .ngg-gallery-list li {
    	float:left;
    	margin:0 2px 0px 2px !important;
    	overflow:hidden;
    }
    
    .ngg-gallery-list li a {
    	/*border:1px solid #CCCCCC;*/
    	display:block;
    	padding:2px;
    }
    
    .ngg-gallery-list li.selected a{
    	-moz-background-clip:border;
    	-moz-background-inline-policy:continuous;
    	-moz-background-origin:padding;
    	background:#000000 none repeat scroll 0 0;
    }
    
    .ngg-gallery-list li img {
    	height:40px;
    	width:40px;	
    }
    
    li.ngg-next, li.ngg-prev {
    	height:40px;
    	width:40px;	
    	font-size:3.5em;
    }
    
    li.ngg-next a, li.ngg-prev a  {
    	padding-top: 10px;
    	border: none;
    	text-decoration: none;
    }
    
    .ngg-imagebrowser-desc {
            margin-top: 5px;
            font-size: 12px;
    }
    

    Please let me know if you would require other css in order to assist me a bit i am out of ideas and been searching for a long time already, thanks!

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter jonasdh

    (@jonasdh)

    code of theme CSS

    /*
    Theme Name: Ministry Free
    Theme URI: http://www.egracecreative.com/2008/09/26/ministry-free-wordpress-theme/
    Description: A minimalist theme, great for a portfolio or blog, designed with a whole lot of whitespace and no images other than the logo and rss icon.
    Author: Brandon Cox
    Author URI: http://www.egracecreative.com
    Tags: white, two columns, minimalist, valid, widget ready, simple, clean
    Version: 1.1
    License: This theme is released under GPL (http://www.opensource.org/licenses/gpl-3.0.html)
    
    This theme was adapted by Sven Smets
    */
    
    body { margin: 0px; padding: 0px; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 85%; color: #555; ) repeat-y center; }
    
    a img { border: none; }
    p, h1, h2, h3, h4, h5, h6, h7, ul, small, blockquote { margin-top: 0px; margin-bottom: 10px; }
    p, li, li li { line-height: 100%; }
    h1 { font-size: 2.4em; padding-bottom: 5px; border-bottom: 1px #ccc solid; }
    h1 a { color: #666; text-decoration: none; }
    h2 { font-size: 1.8em; color: #666; }
    small { font-size: 0.9em; line-height: 140%; }
    a { color: #666; }
    a:hover { color: #999; }
    
    #container {  margin: 0px auto; margin-left:0px; width:80%;} /* width: 80%;*/
    
    #search-subscribe { width: 940px; margin: 0px 10px; height: 36px; }
    #search-subscribe .search { float: right; display: inline; background: #ededdc; padding: 10px; height: 20px; }
    #search-subscribe .subscribe { float: right; display: inline; background: #ededdc; padding: 12px; height: 16px;  }
    #search-subscribe a { text-decoration: none; }
    #search-subscribe img { vertical-align: top; }
    
    #header { width: 100%; float: left; display: inline; overflow: hidden; margin: 0px;}
    p.site-title { font-size: 2.6em; margin: 25px 0px 0px; font-weight: bold; }
    p.site-title a { color: #666; text-decoration: none; }
    p.site-title a:hover { color: #999; }
    p.description { margin-bottom: 0px; }
    #logo { overflow: hidden; width: 300px; padding: 1px 0px; margin: 0px 10px; float: left; }
    #nav { width: 100%; padding: 96px 0px 10px 0px; margin: 0px 10px; float: right; border-bottom: 6px #030 solid; height: 20px; }
    #nav ul { margin: 0px; padding: 0px; list-style: none; }
    #nav li { float: left; margin-right: 15px; text-transform: lowercase; }
    #nav li a { color: #666; font-weight: bold; text-decoration: none; }
    #nav li a:hover, #nav li a.active { color: #999; text-decoration: overline; }
    
    #wrapper { float: left; display: inline;  padding-bottom: 20px; } /* width: 90%; */
    div.float-left { float: left; display: inline; overflow: hidden; }
    div.float-right { float: right; display: inline; overflow: hidden;  }
    div.one-column { width: 200px; padding: 10px; }
    div.two-column { width:1000px; padding: 10px; } /* width: 65%;  */
    div.three-column { width: 85%; padding: 10px; }
    div.widget { margin-bottom: 20px; }
    
    #sidebar, #content { overflow: hidden; }
    
    #content { position:relative; top:-35px; left:10px; width:500px; !important }
    
    #sidebar ul { margin: 0px 0px 5px 0px; padding: 0px; list-style: none; }
    #sidebar li { margin: 0px; padding: 4px 0px 1px; border-bottom: width: 300px; }
    #sidebar li a { display: block; text-decoration: none; padding: 3px 15px; }
    #sidebar ul.highlight li a { background: #ededdc; }
    #sidebar li a:hover { background: #666; color: #fff;}
    #sidebar ul.highlight li a:hover { background: #333; color: #fff; }
    
    #content .post { margin-bottom: 20px; width:100%; }
    #content .post h1 { margin-bottom: 5px; }
    #content .post h2 { text-transform: uppercase; font-size: 1.2em; font-weight: normal; }
    #content p.premeta { font-size: 90%; color: #999; margin-bottom: 20px; }
    #content .postmeta { color: #999; font-size: 90%; border-top: 2px #ccc solid; padding: 4px 0px; margin-bottom: 20px; }
    #content .videos { list-style-type:none; }
    #content .videos li { float:left; margin:0 25px 25px 0;}
    
    /* Comments */
    #content .comments { font-size: 90%; margin: 20px 0px; }
    #content .comments ul { margin: 10px 20px; padding: 0px 20px; list-style: none; border-left: 5px #ccc solid; border-right: 5px #ccc solid; }
    #content .comments li { margin: 0px 0px 10px 0px; padding: 0px 0px 10px 0px; border-bottom: 1px solid #ccc; list-style-type: none; }
    #content .comments img { padding: 0px; margin: 0px 0px 10px 10px; float: right; }
    
    #footer-wrapper { float: left; display: inline; width: 100%; }
    #footer { margin: 0px auto; width: 960px; overflow: hidden; padding: 10px 10px 30px; background: #ededdc; font-size: 90%; }
    #footer ul { margin: 0px 0px 20px 0px; padding: 0px; list-style: none; border-top: 1px #ccc solid; }
    #footer li { margin: 0px; padding: 1px 0px 1px; border-bottom: 1px #ccc solid; width: 300px; }
    #footer li a { display: block; text-decoration: none; padding: 1px 0px; }
    #footer h2 { font-size: 1.3em; }
    
    /* WordPress Images and Captions */
    #content .post p.wp-caption-text { text-align: center; font-size: 0.8em; line-height: 135%; margin: 0px; padding: 3px 0px; }
    #content img.alignnone { margin: 0px 10px 10px 0px; }
    #content .post div.alignleft, #content .post img.alignleft { float: left; margin: 0px 10px 10px 0px; }
    #content .post div.aligncenter, #content .post img.aligncenter { display: block; margin-left: auto; margin-right: auto; margin-bottom: 10px; clear: both; }
    #content .post div.alignright, #content .post img.alignright { float: right; margin: 0px 0px 10px 10px; }
    Plugin Author Imagely

    (@imagely)

    Hi @jonasdh,

    Its apparently related with a stylesheet file of NGG that’s failing to load because of the CORS policy.

    Let’s make sure that you are using HTTPS for both WordPress Address (URL) and Site Address (URL).

    Alternately, you can try using Really Simple SSL plugin that’s forcing all the links to load over HTTPS.

    • This reply was modified 1 month, 3 weeks ago by Imagely.
Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.