How to – WP CSS Shapes

In most websites today, we seen content looks like boxes.

By using “WP CSS Shape” plugin, we can create shape for content based on image.

It easy to get started.

add an image using shortcode, with in an inline content,

It makes the content wrap around the image on one side, left or right.

[shape id=44]

---

 

We can customize the image by using shortcode attributes.

Shrotcode Attributes List

Image float

By default the image float to left and the content wrap on right side of the image.

to make the image float to right,  add float=right

[shape id=44 float="right" ]

Margin

To add space between image and content use “margin” attribute.

default space is 1em

add css units as suffix –  px, em, %

[shape id=44 margin="20px" ]

Change Image Width, Height

Its recommend to add Width alone and leave height: auto;

so that image height will change based on width.

if that’s not happen, there is a custom class “auto-h” created to make height: auto. can add that using “class”  attribute, explained later in this page.

[shape id=44 width="500px" ]

Add class names

If the image takes the full screen width, then there is no proper space for the content to wrap around of the image on one side.

to fix that we can change the max width of the image to less than 100% of screen width or with in that block.

For that there are some predefined class to change the max width.

 

so if class “img-80” is added, then image takes 80% of that block, and there is space for the content to wrap the image, and now the content can looks in a shape even in small screens.

If the image height is not change based on the width of the image. then add “auto-h” to class attribute. auto-h or autoh both works.

[shape id=44 class="img-80" ]

using “class” attribute, can add any class name.

if added image using shape attribute, there are some class which add’s by default.

shape, csh-image, wp-image-<image-id>  ( if image id 44, then wp-image-44 class added to that image. )