WordPress.org

Ready to get started?Download WordPress

Forums

WP Photo Album Plus
[resolved] How to add a shadow effect to photos with CSS? (5 posts)

  1. karl-petter
    Member
    Posted 2 years ago #

    Hi again,

    so here comes my second question in a separate thread. In my album I would like to have all photos, both thumbnails and full width photos to have a nice shadow effect. I use to do that by injecting this piece of CSS, for instance where a theme allows to inject html into the header:

    img.size-medium {
    background: url(/images/shadow.gif) no-repeat right bottom;
    padding: 4px 10px 10px 4px;
    border: 0;
    border-top: #EEE 1px solid;
    border-left: #EEE 1px solid;
    }

    Like the photo on this page http://djurklinikenikinna.yelloworb.com/kliniken/

    But the WPPA-plugin puts a "border-width: 0px;" for the thumbnail image in the HTML tag so wherever inject my CSS it wont overide the 0px border. Thus I cannot change the layout of thumbnails by editing or injecting a CSS in the header. Is there any way without changing the plugin code to stop this behaviour?

    What I would like to do is put the following CSS code

    .coverphoto-frame .image {
    background: url(/images/shadow.gif) no-repeat right bottom;
    padding: 4px 10px 10px 4px;
    border: 0;
    border-top: #EEE 1px solid;
    border-left: #EEE 1px solid;
    border-radius: 0px;
    }

    somewhere to change how this is rendered:

    <div id="coverphoto_frame_2_1" class="coverphoto-frame" style="text-align:center;width:194px;">
    	<a href="http://djurklinikenikinna.yelloworb.com/bilder/?wppa-album=2&wppa-slide&wppa-occur=1" title="View the album Kliniken">
    		<img src="http://djurklinikenikinna.yelloworb.com/wp-content/uploads/wppa/thumbs/9.jpg" alt="View the album Kliniken" class="image wppa-img" width="250" height="167" style="background-color:#ffffff;  border-width: 0px; width:250px; height:167px;">
    	</a>
    </div><!-- #coverphoto_frame_2_1 -->

    http://wordpress.org/extend/plugins/wp-photo-album-plus/

  2. Jacob N. Breetvelt
    Member
    Plugin Author

    Posted 2 years ago #

    You will find the css file in .../wp-content/plugins/wp-photo-album-plus/theme/wppa-style.css

    If you want to change anything, make a copy of that file and place it in your theme directory and modify that file. If the copied file exists it will be loaded instead of the standard file in the plugin. This makes it possible to update the plugin without your mods being overwritten.
    As soon as there is a new version of the plugin that comes with changes/additions to the css file, you will get a one time message after updating your plugin in the case you have a copied css file.

    Please - before changing the css - read this topic from my docs and demos site.

    I have seen your example image on your site. I would suggest that you take a look at my Docs & Demos site. The effects there are almost equal to what you want. I did that by specifying background and border colors in Table III-6, and the the addition of:

    box-shadow: 4px 4px 4px #BBDD99;

    to the css file.

    I strongly suggest you to try this method, as the layout might be affected if you change margins and padding sizes outside the program.

    However, if you want to get rid of the border-width:0px; you can safely comment away line # 1200 reading:

    $result['style'] .= ' border-width: 0px;';

    from wppa-functions.php, being the place where your problem happens. Put a double slash: // in front of the line.

    Important Notes:
    1. Do NOT specify a border color in Table III-6 as it will give you a one pixel border on all 4 sides. So leave the input field empty.
    2. If you change the padding: 4px; or the margin: 0; on lines 89-90, you may get layout problems as the program expects those values. If so, try to compensate changed padding values with margin values that work the other way.

  3. karl-petter
    Member
    Posted 2 years ago #

    Thx, to use box-shadow seems smarter eventhough it is not compatible with all old browsers but should be less to load.

    I would still to prefer to use the CSS inject feature of my theme instead of making a copy of the album css since if you make any changes of this in the future my copy will override those and also it's much cleaner and more easily to maintain if I edit all CSS at one place, through the theme. That seems to be the method most modern themes use now. But that should be the same as your suggestion by copying, but if one has that option in the wp-theme there is no need to make the copy.

    Since I want to have a border on the top and to the left but none at bottom and right I guess the only solution is to remove line 1200.

    Thanks for the help!

  4. Jacob N. Breetvelt
    Member
    Plugin Author

    Posted 2 years ago #

    Its up to you how you get that what you want, i just explained how it works inside wppa+.

    I might consider leaving out line 1200 in the future, i have to find out first if i do not mess up things for lots of other users.

  5. karl-petter
    Member
    Posted 2 years ago #

    You should be able to move that into the CSS-files, then it's easy for people like me that want to change the layout to do that without needing to change the code. In general to have all layout design in the CSS-files is a good practice but I guess there might be a lot of changes to achieve that. Anyway thx for all the help!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic