Modifying CSS


If you throughly studied the very many settings of the Photo Albums -> Settings admin page and you still can not get the display you want, there are two ways to make your customized CSS.

Method one: Add your wppa+ related css changes in Table IV-A15. This is far most the easyest way to customize your CSS. It is update safe and easy to maintain/alter.

Method two: Modify the wppa+ style sheet wppa-style.css. This method is strongly discouraged, but is still maintained for backward compatibility.
To avoid overwriting your modifications when an upgrade of WPPA+ occurs (to make it update-proof), you should make a copy of .../wordpress/wp-content/plugins/wp-photo-album-plus/theme/wppa-style.css and place it in your Theme directory (for instance: .../wordpress/wp-content/themes/twentyten/ ) and edit that file to make your changes.

To use this file, you have to tick the box in Table IV-A16 first. Now, as soon as the plugin finds a wppa-style.css file in your active theme directory, it will load that one and ignore the original one. This also means that, if you regret your alterations, just delete the copy in the theme directory, and things are back to original.

By modifying this Stylesheet, be aware of the fact that the settings in the Settings admin page have priority over what you put in the css file. So, if you want to set a background color in the css file, make sure the corresponding setting in the Settings screen is left (or made) blank, or add !important to your css specidication.

Also, be aware of the fact that a new version of the plugin may imply changes in the 'official' css file that are vital for the proper functioning of new features of WPPA+ or may have impact on changes in the implementation.

Custom css for theme Twentyseventeen

To compensate for a few odd side-effects of the default css of theme Twentyseventeen, I recommend the following custom css and additionally a regular WPPA setting. You may place the css in Table IV-A15, or in the custom css area of the themes customize area.

  • To prevent navigation, medals, new/modified icons and slides from scrolling over the menu:
    .site-navigation-fixed {
        z-index:100 !important;
  • To hide unwanted white and black lines and borders that show up near photos but not near videos:
    .wppa-container a,
    .wppa-container img,
    .wppa-widget a,
    .wppa-widget img {
        box-shadow:none !important;
  • To fix the layout mis-alignment caused by the sticky header, Set Table IA-11: Sticky header size to 80.