Positioning and customizing images

Hi Daseastman, you’re on the right path. You will need to make the change in your style.css file or a css plugin. It’s a pretty easy effect you want to add, but you’ll need a little more information. Essentially the code will look something like like;

img.alignnone.wp-image-66.size-full {
*(Add box shadow or border code here)
}

But what you need to find out is the number of the image and if there is any alignment property.

You can find this 50 different ways, but the most straight forward is by opening the post or page, then go into the editor. From there click on the tab on the top right that says “Text”. then copy and past all the text for the image in the forum.

After that information is available, I or someone can help further, but without access to the site, that is the information that needs to be provided.

Thank you for your help, sorry for the delay getting back to you–was out of town.

Here’s what I found:

<img class=”alignnone wp-image-80 size-medium” src=”https://localhost:8888/wp-content/uploads/2014/09/D***-W******-cover-Cruise-231×300.jpg&#8221; alt=”D***-W******-cover-Cruise” width=”231″ height=”300″ />

How can I take that image, add effects like dropshadow. Any suggestions about the place to go on the web for listings of other css effects? Would also like to crop it and re-position it.

Thanks you for your help : )

No worries. All you’ll have to do is take this code;

img.alignnone.size-medium.wp-image-88 {

}

and add some of the following code where the empty line is;

/* boarder */
border: 1px solid #000000;
padding: 2px;

/* box shadow */
-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    7px 7px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow:         7px 7px 5px 0px rgba(50, 50, 50, 0.75);

/* position */
position: relative;
top: 20px;
right: 20px;

If you want to change the box shadow, go here:
https://css3gen.com/box-shadow/

Colors, here;
https://www.w3schools.com/tags/ref_colorpicker.asp

So, if you wanted to do everything you mentioned to your image, it will look like this;

img.alignnone.wp-image-80.size-full {?
        border: 1px solid #000000;
	padding: 2px;
	position: relative;
	top: 20px;
	right: 20px;
	-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow:         7px 7px 5px 0px rgba(50, 50, 50, 0.75);
}

If you play around with the numbers you’ll quickly see what they do. So, just add what ever code you need to you child style.css, or download a custom css plugin.

Let me know how it goes.