WordPress.com

1. boles
   Member
   Dec 1, 2006, 3:51 PM

   I want to add vspace and hspace around my images for Cutline and trying to add those numbers via the Visual Editor edit window for images doesn't seem to do anything.

   I did a search on "vspace" and "hspace" and Cutline here but didn't find anything that I understood to be a permanent solution. Do those terms even apply to that theme?

   I don't want image borders -- and that is thankfully "off" by default -- but how can I permanently add a little space around my images using Cutline and my Custom CSS setup while right and left aligning?

   I visited the Cutline tutorial site but that seems to mainly focus on WordPress.org type of installations.

   Thanks!

2. timethief
   Member
   Dec 1, 2006, 4:26 PM

   Hi I believe you'll find engtech provided your answer in this thread from the forum search box. Whenever you add an image, click on it, then click on the image icon in the toolbar and set border to 1, vspace and hspace to 10-15 or something. Becomes habit after a while. If you set the attributes on the image then you aren't locked into a particular theme. http://wordpress.com/forums/topic.php?id=4384&replies=9#post-28551

3. boles
   Member
   Dec 1, 2006, 5:05 PM

   timetheif --

   Right, as I said in my post, I tried adding those tags via the visual editor and "vspace" and "hspace" do not work in the Cutline theme.

   You can visit my post today about Disbelief and Evolution and see the added spaces are not working.

   Those spaces work using K2-Lite, but not Cutline.

   I'm asking if I can fix the spacing problem using Cutline and Custom CSS.

4. timethief
   Member
   Dec 1, 2006, 5:13 PM

   Ahhh ... I see she said wiping sleep out of the corners of her eyes ... and reaching for coffee. Then I cannot offer any help. You'll have to wait for wank, sunburntkamel or ? to answer you because there is no direct wordpress staff support for the css customization forum.

   Posted: 2006-08-04 17:21:24 #podz
   keymaster said:
   There is no support from myself for CSS issues.
   Any feedbacks / support requests will be directed to the forum.
   This is not because I do not want to help but because the issue is huge and to do so would adversely affect the support I do give already.
   There are many many resources for CSS and very soon people will start to showcase their efforts and hopefully share their code here. Answers are also better given in a public arena where more people can benefit.
   Additional support is not part of the upgrade.

   http://wordpress.com/forums/topic.php?id=3239&replies=36#post-20608
   Maybe one of the css resource materials listed in this thread will contain the information you need. :) http://wordpress.com/forums/topic.php?id=3241&replies=18

5. timethief
   Member
   Dec 2, 2006, 12:49 AM

   If these css resource material threads were not helpful when it came to locating answers then perhaps after he eats his dinner sunburntkamel may be available and may be able to help.

6. sunburntkamel
   Member
   Dec 2, 2006, 9:07 PM

   i'm not sure why cutline would break that, you might want to send in feedback for that.

   as far as a css workaround, you can use a custom class and padding to do what you want. instead of adding hspace and vspace, just add class="floatimg" to the img tag.

   then just add
   img.floatimg {<br /> padding: 1em;<br /> }

   obviously, .floatimg can be anything you want. you might want to have a couple different classes for left or right floated images, or whathaveyou.

7. boles
   Member
   Dec 2, 2006, 9:45 PM

   Hi Adam!

   Thanks for the reply. So I am hand-coding that floating class in the raw HTML for a post, right and I'm not using the Visual image insertion interface?

   So img.floating is for centered images only or any image?

   What code would I add for left and right images?

   My research here and abroad indicated the Cutline template here purposefully does not support vspace or hspace or any other native padding for images against text.

8. sunburntkamel
   Member
   Dec 2, 2006, 10:20 PM

   yes, you're hand coding that into the img tag, the same way you added vspace. personally, i just switch to the code tab, and switch back to visual when i'm done.

   the floatimg code up there just gives you space around the image. you could use it for anything. here are some samples for left, right and center:

   img.imgleft {<br /> padding: 1em 1em 1em 0;<br /> float: left;<br /> }<br /> img.imgright {<br /> padding: 1em 0 1em 1em;<br /> float: right;<br /> }<br /> img.center {<br /> padding: 1em;<br /> clear: both;<br /> text-align: center;<br /> }

9. boles
   Member
   Dec 2, 2006, 11:20 PM

   Adam --

   Thanks for the help! I added the code to my custom CSS and I went back and added the code for my Richard Dawkins article (Wonder and Evolution) and my original Lindsay Lohan article and it worked great!

   Those images now look on purpose now instead of like a mistake!

   Thank you!

   Here are a few more questions while I have your eye:

   1. The only way to get that space back around images using the current Cutline is to open all my old articles and re-code the image tags by hand, right? There's no way to use the Custom CSS to tell it that if if finds an image to then float it, right?

   2. If I change templates in the future is adding the float class to my images going to mess up those template image calls?

   3. I read somewhere while trying to figure this out (I think it was on the Cutline tutor site) if you want to use side-by-side images using Cutline, you need to use the "Stack" class if I am remembering right. Any idea what that means and how to implement it?

   I thank you again and again and again!

10. sunburntkamel
    Member
    Dec 2, 2006, 11:43 PM

    yeah, cutline has some default styling, i should have looked at that first. here's the explanation:
    http://cutline.tubetorial.com/image-handling-with-cutline/

    you could style all your images like this:

    .entry img {<br /> padding: 1em;<br /> }

    that would only catch the images inside posts.

    as far as stacking images, wordpress.com stripped out some of the original default styling, so you can just insert the images normally. unless, of course, you want extra padding. then you should probably use class="stack". (although adding padding to all posted images would work as well)

11. boles
    Member
    Dec 2, 2006, 11:58 PM

    Now I'm confused, Adam.

    Are you telling me to not use the previous CSS stuff I added to the Custom CSS and just add this new bit instead?

    Do I still use the floatimg tag or isn't that necessary now?

    If I don't need it, should I go back and delete it?

    I read that tutorial page. Didn't make much sense to me as a CSS newbie. Thanks for figuring it out for me.

    Thanks also for the stack explanation. I'm used to just hand-coding images to appear side-by-side but sometimes there's a lot of white space between images. They want to line up vertically and not horizontally side-by-side.

    UPDATE:

    Okay, Adam, I get it now. I reversed everything I did previously and then just added the new CSS code and it all works and looks great for all images everywhere. Now that is SUPER SLICK! Thanks again, my friend!

12. sunburntkamel
    Member
    Dec 3, 2006, 12:09 AM

    it's actually either/or. you don't have to use the built in CSS if you don't want to. but they do almost the same thing.

    if you use your own classes, you can decide how much padding they get.

    if you use the built in classes, and ever decide to change themes, you'll have to add those classes to the new theme.

    i've got a cold today, so i'm sorry if i'm less than clear.

13. boles
    Member
    Dec 3, 2006, 12:12 AM

    Thanks for the help, Adam. I edited my last comment and I think what I said there is the best way for now.

    The changes I made the first time around look the same with this new code.

    The new code is shorter, simpler, and universal for all images so I guess that's the best method to use for now with Cutline.

    I hope you feel better soon!

Topic Closed

This topic has been closed to new replies.