Migrating from 1.9.0 to 2.1.62 css help needed

  • Resolved DoubleSixx

    (@doublesixx)


    8 years, 2 months ago

    Hello,

    Happy New Year.

    OK I have the latest version of WordPress and nggallery.

    I pushed 1.9.0 to the breaking point. Over 50k pix, and I could no longer edit galleries so I finally upgraded.

    Currently experiencing some difficulties with the css. I dunno css at all, the changes I had made were thanx to the help from the people of this very forum.

    I would like to get my galleries looking like the following :

    The link was for a legacy gallery using the 2.1.62, meaning it already existed.

    Since the update there’s been a few times where the galleries get screwed up :

    You will notice the last thumbnail gets stuck at the end of the row.

    Enclosed is the original css I used on the site :

    /*
    CSS Name: Default Styles
    Description: NextGEN Default Gallery Stylesheet
    Author: Alex Rabe
    Version: 1.43
    Hacked to pieces by: DoubleSixx
    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;
    }
    // sixx--
    //are both these needed ?
    //.ngg-album {
    // height: 100%;
    // padding: 5px;
    // margin-bottom: 5px;
    // border: 1px solid #fff;
    //}
    // --sixx
    /* IE6 will ignore this , again I hate IE6 */
    /* See also https://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; // -sixx- thin boarder around extended gallery
    }

    .ngg-albumtitle {
    // sixx--
    //text-align: left;
    //font-weight: bold;
    //margin:0px;
    //padding:0px;
    //font-size: 1.4em;
    //margin-bottom: 10px;
    display:none;
    // --sixx
    }

    .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:110px; // -sixx- 180px;
    padding-right:6px !important;
    margin:0px !important;
    text-align:center; // -sixx- (#photos) left;
    width:120px;
    }

    .ngg-album-compactbox {

    // -sixx- background:transparent url(albumset.gif) no-repeat scroll 0%;
    height:86px;
    margin:0pt 0pt 6px !important;
    padding:0px 0pt 0pt 0px; // -sixx- 12px 0pt 0pt 7px !important;
    width:120px;
    }

    .ngg-album-compactbox .Thumb {

    background-color:#FFFFFF; // -sixx-
    border:1px solid #000000;
    margin:4px !important; // -sixx- 0px !important;
    padding:4px !important; // -sixx- 0px !important;
    // -sixx- width:91px;
    // -sixx- height:68px;
    }

    .ngg-album-compact h4 {
    // sixx--
    //font-size:15px;
    //font-weight:bold;
    //margin-bottom:0px;
    //margin-top:0px;
    //width:110px;
    display:none;
    // --sixx
    }

    .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;
    }

    .ngg-gallery-thumbnail-box {
    float: left;
    }

    .ngg-gallery-thumbnail {
    /* float: left; sixx */
    /* margin-right: 5px; sixx */
    /* padding-top:10px; -sixx- row space in gallery */

    height:86px;
    margin:0pt 0pt 6px !important;
    padding:0px 0pt 0pt 0px; /* -sixx- 12px 0pt 0pt 7px !important; */
    padding-top:10px;
    padding-bottom: 5px; /* -sixx- */
    width:120px;
    }

    .ngg-gallery-thumbnail img {
    background-color:#FFFFFF;
    border:1px solid #A9A9A9;
    display:block;
    /* -sixx margin:4px 0px 4px 5px; */
    margin-left: auto; /* -sixx- */
    margin-right: auto; /* -sixx- */
    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, a.next, a.prev,
    span.page-numbers, span.next, span.prev {
    border:1px solid #DDDDDD;
    margin-right:3px;
    padding:3px 7px;
    }

    .ngg-navigation a.page-numbers:hover, a.next:hover, a.prev:hover,
    span.page-numbers:hover, span.next:hover, 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;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
    display:block !important;
    padding:5px;
    }

    .ngg-imagebrowser-nav {
    padding:5px;
    margin-left:10px;
    }

    .ngg-imagebrowser-nav .back {
    float:left;
    border:1px solid #DDDDDD;
    margin-right:3px;
    padding:3px 7px;
    }

    .ngg-imagebrowser-nav .next {
    float:right;
    border:1px solid #DDDDDD;
    margin-right:3px;
    padding:3px 7px;
    }

    .ngg-imagebrowser-nav .counter {
    text-align:center;
    font-size:0.9em !important;
    }

    /* ----------- Slideshow -------------*/
    .slideshow {
    margin-left: auto;
    margin-right: auto;
    text-align:center;
    }

    .slideshowlink {

    }

    /* ----------- Single picture -------------*/
    .ngg-singlepic {
    background-color:#FFFFFF;
    border:1px solid #A9A9A9;
    display:block;
    margin:4px 0px 4px 5px;
    padding:4px;
    position:relative;
    }

    .ngg-left {
    float: left;
    padding-right:10px;
    }

    .ngg-right {
    float: right;
    padding-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;
    }

    .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;
    }

    Hopefully someone guide me down the right path. Thanx in advance.

    =)

Viewing 14 replies - 1 through 14 (of 14 total)
  • Plugin Contributor photocrati

    (@photocrati)

    @doublesixx – I’m not seeing anything in your custom CSS (at least at a glance) that would affect anything really specific. Given that you waited as long as you did to update NextGEN Gallery were there any other updates at the same time? Another active plugin, (now updated to current?) may be creating or influencing the issue you are seeing.

    Thanks!

    – Cais.

    Thread Starter DoubleSixx

    (@doublesixx)

    @cais,

    Currently not using the old .css file. Made even more messes. Just upgraded from 1.9.0 to 2.1.62.

    Thank you.

    Thread Starter DoubleSixx

    (@doublesixx)

    @cais

    Looks like my links were removed. No way you could see the problems.

    Thread Starter DoubleSixx

    (@doublesixx)

    @cais,

    I’ll try again. Here’s a link to a problem gallery :


    https://www.doublesixx.com/olivia-munn-late-show-stephen-colbert-december-9-2016/

    Plugin Contributor photocrati

    (@photocrati)

    @doublesixx – Thanks for the link; and I do understand your idea of stuck at the end of the row. The layout itself is actually behaving as one would expect with the HTML / CSS being used for the display. The easiest solution in most cases like this is to make the thumbnails being used more uniform (at least as it related to their specific individual heights).

    You may have to make these changes either in each specific display where you are seeing this issue in the display’s customizations accordion panel; or, you might be better to regenerate the thumbnails for the gallery (or galleries) en masse; then, re-insert the displays so they will be refreshed with the new thumbnail dimensions in play.

    Thanks!

    – Cais.

    Thread Starter DoubleSixx

    (@doublesixx)

    @cais

    Sorry I truly don’t understand your solution.

    The old .css managed all the thumbnails together.

    Currently impossible to go one by one to each gallery.

    Currently 50215 images, 2261 galleries, and 99 albums.

    What can I change or add to resolve the issue ?

    I appreciate you’re replies.

    Thread Starter DoubleSixx

    (@doublesixx)

    @cais

    OK I used my old .css file.

    Seems to be working but now I have an additional border I can’t get rid of, I believe the legacy version also including a border that I removed way back when.

    I dunno where the border is located, I remember just removing the albumset.gif I believe.

    I don’t think the name is the name now, certainly in a different location.

    Please let me know.

    Plugin Contributor photocrati

    (@photocrati)

    @doublesixx – This CSS element in your custom CSS is adding a border:

    .ngg-gallery-thumbnail img { ... }

    … and the following from your theme’s style.css file is also adding a border to the images:

    .article img, img.article { ... }

    I would expect you will need to address the border in both places to insure it is removed.

    Thanks!

    – Cais.

    Thread Starter DoubleSixx

    (@doublesixx)

    @cais

    I wanted one border.

    I got rid of one, but now the border has become whacky.

    Just want a thin border around the picture, while maintaining a space in between, rows and columns.

    Plugin Contributor photocrati

    (@photocrati)

    @doublesixx – It looks like your theme itself is still affecting the images by adding a border to them. Have a look around line 797 in your style.css file for the following element:

    .article img, img.article {
    border: solid 1px #92CEC6;
    margin: 1em;
}

    The margin property is being over-written but the border property is still being applied … you may need to add an appropriate element such as the following as well:

    div.ngg-gallery-thumbnail > a > img {
    border: none !important;
}

    The above is not tested although it will hopefully get you closer to what you are trying to accomplish (provided the “green” border is the concern you are having).

    Thanks!

    – Cais.

    • This reply was modified 8 years, 2 months ago by photocrati.
    Thread Starter DoubleSixx

    (@doublesixx)

    @cais

    Still not working.

    I have the borders back to the legacy days.

    But I still having the original problem.

    Plugin Contributor photocrati

    (@photocrati)

    @doublesixx – Unfortunately you may need to do a thorough review of all of the custom CSS you are applying to insure that it along with your theme’s CSS are not at odds with each other.

    – Cais.

    Thread Starter DoubleSixx

    (@doublesixx)

    @cais

    The issue was caused by nggallery. No issues prior to the migration.

    Plugin Contributor photocrati

    (@photocrati)

    @doublesixx – I can understand how it would look like NextGEN Gallery being updated is causing the issues although moving from NextGEN Legacy to NextGEN Gallery and retaining all of the NextGEN Legacy custom CSS would just as likely be expected to have some concerns that would need to be addressed. This is why I suggested to review all of the custom CSS you are using to insure that it in itself is not creating an unexpected issue such as what you are experiencing now.

    Thanks!

    – Cais.

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Migrating from 1.9.0 to 2.1.62 css help needed’ is closed to new replies.

Tags