WordPress.org

Ready to get started?Download WordPress

Forums

NextGEN Gallery
[resolved] CSS customization with NGG 2.0 (23 posts)

  1. fredMCCR
    Member
    Posted 11 months ago #

    Hi,

    With NGG 1.8 I added the following code:

    .ngg-border {
        border:#aaaaaa 1px solid;
        padding:7px;
    }

    to wp-content/plugins/nextgen-gallery/css/nggallery.css
    in order to create a custom css class that I called "ngg-border", allowing my single pictures to have a border frame when needed.

    Now that I upgraded to version 2.0, I don't see any "css" directory anymore ... I still wish to be able to use this class in my pages. I tried to add the same code to:
    wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/nextgen_basic_singlepic/static/nextgen_basic_singlepic.css

    which looked to be the closest css to the previous one but the border is not applied. I scrolled through all the new tree folders but cannot find where I could add the code.

    Could you help me ?

    Thank you
    ;)

    http://wordpress.org/plugins/nextgen-gallery/

  2. nix255
    Member
    Posted 11 months ago #

    I am having the same problem. Is nextgen no longer loading this file from the theme folder? Does it perhaps need a name change?
    I have looked at the documentation on the nextgen website (http://www.nextgen-gallery.com/?s=nggallery.css) and it is still saying that this file should work for customizations.
    Is there a new option somewhere that needs to be enabled?

  3. nix255
    Member
    Posted 11 months ago #

    I have found a way around the css problem.

    In the nextgen options there is a place to add custom css. I have copied the entire nggallery.css file contents and pasted it into the custom css field and saved. This loads the correct css and now the galleries are looking correct.

    In the wordpress dashboard go to Gallery->other options then choose the styles tab. Click the little link for '(Show Customization Options)' which makes the css field visible. Now paste your code from the nggallery.css file here. This will overide the defaults and should put everything back to how it was.

    Hope this helps someone.

  4. fredMCCR
    Member
    Posted 11 months ago #

    Thank you for the tip !

    BUT the following sentence is displayed there:
    "This stylesheet is provided to allow users the ability of overriding the default styles for all display types".
    With NGG 1.8, I used to choose which picture I wanted the code to be applied to by editing the picture properties and writing "ngg-border" beside the other parameters in the "CSS class" field.
    Now it seems to be always or never ... (for the time being, it's more never than always in my case !).

  5. DownHouse00
    Member
    Posted 11 months ago #

    You must place your css file here: \wp-content\plugins\nextgen-gallery/products/photocrati_nextgen/modules/ngglegacy/css
    And all stylesheets must contain a file header

    /*
    CSS Name: Example
    Description: This is an example stylesheet
    Author: John Smith
    Version: 1.0
    */

    Then this style was available in select in Gallery->other options -> styles.
    But i dont know,what will be with this css after next update.

    It's very unusefull vs old versions when css must be place in theme folder.

  6. fredMCCR
    Member
    Posted 11 months ago #

    Sorry, still not ok for me ...
    Here is the custom code I used:

    /*
    CSS Name: ngg-border
    Description: Borders on single pictures
    Author: FredMCCR
    Version: 1.0
    */
    
    .ngg-border {
        border:#aaaaaa 1px solid;
        padding:7px;
    }

    and selected ngg-border in Gallery->other options -> styles.
    No change either on all the pictures or on those where "ngg-border" is filled in "CSS class" field.

  7. nix255
    Member
    Posted 11 months ago #

    I am giving up on this and rolling back to a previous version as no amount of tinkering with styles and stylesheets will get my galleries back to how they were. Whilst my original post sorts out the styling on the sidebar widgets, the main albums and galleries are still displaying incorrectly. And in actual fact when you click on a gallery nothing happens and I have no idea how to fix that.

    There needs to be a tutorial that explains what has changed with the css that renders the custom nggallery.css file useless, and how we overcome this. I have wasted a whole afternoon on this now and I'm not happy. There are now too many options to choose from, and I have spent too much time trying this and trying that.

    Very disappointed.

  8. DownHouse00
    Member
    Posted 11 months ago #

    No change either on all the pictures or on those where "ngg-border" is filled in "CSS class" field.

    Are you shore that element .ngg-border exists in DOM? NGG 2.0 has changed the output code.

    There needs to be a tutorial that explains what has changed with the css that renders the custom nggallery.css file useless, and how we overcome this.

    It say in Gallery->other options -> styles

    But 2.0 update is ugly.

  9. rgb_freak
    Member
    Posted 11 months ago #

    in my case, the custom css under
    gallery -> other options -> styles -> File Content

    will be ignored by the ngg :(
    how can i roll back to the previous version?

  10. nix255
    Member
    Posted 11 months ago #

    I have also tried the gallery->other options->styles but the files I put in the folder don't seem to come up in the list, and the styles added in the field are ignored.

    @rgb_freak you can roll back to a previous version by following the instructions here: http://www.nextgen-gallery.com/how-to-rollback-a-version/

  11. wmokrynski
    Member
    Posted 11 months ago #

    Simply adding the URL for external stylesheets in the "Stylesheet URL" field under
    Gallery>Other Options>Lightbox Effects>Advanced Settings

    This CSS file actually overrides the new CSS "Style" >advanced customization area.

    My external CSS is now working as it was before the upgrade.

  12. VesaT
    Member
    Posted 11 months ago #

    There are now several CSS files within /modules subfolders, so a quick fix is to place your CSS edits into those folders. Some of the most basic CSS files are within:
    .../wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/nextgen_basic_gallery/static/ --> subfolder /slideshow holds the basic CSS for slideshows and /thumbnails the CSS for displaying gallery as thumbnails. The latter is for many modifications NGG-GAllery.com has suggested (e.g. changing to black&white for hovered thumbnails).

    I have no clue how the suggested general CSS edits (above) should be made to have a real effect :(

  13. Jaiji
    Member
    Posted 11 months ago #

    Could anyone clarify please: is custom CSS added via Options safe when upgrading in the future? Is there any way to use the same procedure as with earlier versions and copy a 'master' CSS file to the theme directory to future-proof it? Otherwise won't the edits be overwritten during future upgrades?

  14. KevinLycett
    Member
    Posted 11 months ago #

    This looks like a very big issue. Of course we need to edit the css and need one central place to do this. NextGen's out of the box styling is really poor. Even if this was better you clearly still need to style it to match your site. And, as jajii says, we need to know if any amends to all those css files scattered through a tangle of folders will be future-proof.
    This is a major headache and I'm looking for another gallery plugin already.
    NextGen please let us know what's going on!

  15. photocrati
    Member
    Plugin Author

    Posted 11 months ago #

    Hey everyone,

    We have a solution for this, that should be update & future proof. In our next update we'll be moving the nggallery.css file to it's own folder outside of the plugin file, under /wp-content/ngg_styles/nggallery.css. Your current CSS should carry over, but just in case it would be best to make a backup of your CSS before updating.

    Moving forward, this way you won't have to worry about putting anything in your theme folder, or creating any new files. You also won't have to worry about losing your NextGEN Custom CSS in future updates to your plugin or Theme (but, always best practice to make a full backup of your site on a regular basis, esp. before making any major changes to your site).

    You'll still just go to Gallery >> Other Options > Styles and edit your CSS there.

    I hope that helps. We are planning to release the next update very soon.

    --Becky

    Hopefully this simplified solution will work out better for you all.

  16. DownHouse00
    Member
    Posted 11 months ago #

    Return it as it was.
    What prevents to search for the file in the folder with the theme?

  17. KevinLycett
    Member
    Posted 11 months ago #

    Wow thanks for such a swift response.

  18. nix255
    Member
    Posted 11 months ago #

    It's great to hear that the next update to nextgen will hopefully fix the css issues. I will tentatively try the upgrade on the website I tried it before and see if it helps.

    I am dubious about the whole nextgen update as I have a number of websites that use nextgen and so far every one has had issues upgrading to the new version. I am tempted to leave websites that already have nextgen working with the previous version as they are and not upgrade them. It is quite ridiculous to have thumbnails changing size and images moving and far to time consuming to find fixes for everything.

  19. KevinLycett
    Member
    Posted 11 months ago #

    Hi Becky
    I'm using NGG 2.0 with WP 3.5.2
    It's very slow to use Gallery >> Other Options > Styles to edit CSS, especially when doing a lot of changes. So I put a copy of nggallery.css in the place you recommend in your article NextGen Templates 14th Jan:
    "Go to /wp-content/plugins/nextgen-gallery/css and make a copy of the nggallery.css file
    Place a copy of your nggallery.css file in your themes folder: /wp-content/themes/[theme you have activated]/nggallery.css"
    I copied nggallery.css to this location:
    wp-content/themes/twentytwelve_child/nggallery.css
    It is not picking up the css from this file.
    (I am also very nervous about using Gallery >> Other Options > Styles as I worry it will be overwritten on the next upgrade.)
    Thanks
    Kevin

  20. steckinsights
    Member
    Posted 7 months ago #

    @photocrati, thanks for the update. However, while the custom stylesheet is loading, it is loading outside the iframe of the slideshow, thus it's not effecting the content of the iframe. Any suggestions?

  21. tizz
    Member
    Posted 7 months ago #

    @steckinsights Posting in a *long* 3 months old topic you are forcing those who want to help you to a huge waste of time reading everything, and most likely it has nothing to do with your problem.
    If you want my advice, to get help open your own topic explaining your issue and give other info as the link to the problem.

  22. steckinsights
    Member
    Posted 7 months ago #

    @tizz, point taken. However, I was specifically referring to @photocrati's post -- it doesn't seem that the update they initiated has solved the issue:

    We have a solution for this, that should be update & future proof. In our next update we'll be moving the nggallery.css file to it's own folder outside of the plugin file, under /wp-content/ngg_styles/nggallery.css.

    The update includes the new folder to place custom stylesheets, but because these stylesheets are loaded outside of the NextGen Gallery iframe, they are unable to effect the content.

    I also try to do homework before posting, if I'm not mistaken, it is poor forum etiquette to open up a new support request about an existing topic. Or is that just me?

    Since this IS a "resolved" thread, I'm going to refer to this post and wait for a resolution.

  23. tizz
    Member
    Posted 7 months ago #

    @steckinsights, /wp-content/ngg_styles/nggallery.css works great, maybe you just need permission on folder (e.g., 755), or you should explain better what you would to achieve and what you do to achieve it in *your own new topic*.
    You have chosen again to append your request to another user's topic (the one you have linked), a pro user who will never get answer here because this forum does not support the commercial products.

    http://codex.wordpress.org/Forum_Welcome
    http://wordpress.org/support/topic/read-this-before-you-open-a-new-thread-14?replies=2

Reply

You must log in to post.

About this Plugin

About this Topic

Tags