Viewing 1 replies (of 1 total)
  • Thread Starter IvyL

    (@ivyl)

    I read about a workaround by j david ingram here:

    http://wordpress.org/support/topic/39-update-how-to-add-padding-and-border-to-images-now/page/2?replies=50

    However i when i add the img.pad class in “appearance>editor>Stylesheet.css (style.css)” of my theme it does not seem to work. Do i have to put the css snippet into another file???

    There is a fairly easy fix to this that doesn’t involve editing the html code directly every time using the text editor. Essentially you need to design a simple (or as complex as you want) bit of CSS one time and then use the “Image Class CSS” field in the image details window (accessed by clicking on the pencil icon in the top left corner of your image in the post. In my case I created a class called pad – might be a good idea to give it a generic name since you can change the value later on. When I insert an image into a post I add the class pad in the Image Class CSS field.

    Back in the Dashboard I selected Appearance>Edit CSS and then added the following code below the notes:

    img.pad {
    padding: 5px;
    }

    This adds padding of 5 px around the image. If I want to change it in the future, I just have to go in and change the padding number. If I want to add a border or a margin I just enter the css required.

    The only quirk is that .pad doesn’t seem to be enough, img.pad is required to define the class in the Edit CSS module. You’ll see the class added to your images in posts going forward if you add it in post and view the source code when previewing the page.

    I liked the old method of adding padding, but this new method gives you a lot more power to change how images are displayed site wide.

Viewing 1 replies (of 1 total)
  • The topic ‘Not compatible with "Black Studio TinyMCE Widget"’ is closed to new replies.