WordPress.com

1. megumihaggerty
   Member
   Mar 7, 2012, 6:47 PM

   I recently changed themes from Twenty Ten to Suburbia and am having one little problem. As I write a post, the font is Times New Roman, but once published it is correctly formatted to Droid Serif. I would like to change the font in the creation of a post to Droid Serif so that I can properly align photos in the post and know how it will look pre-publication. As it is now, (in Times New Roman), the photos do not properly align and the format is mixed up, making creating a post almost like guesswork.

   I have looked up several forums that had CSS coding, but all of them pertained to changing the font on the website, rather than in dashboard post editor.

   Please help! Here is my site: http://megumihaggerty.com/

   Thank you.

   The blog I need help with is megumihaggerty.com.

2. justpi
   Member
   Mar 7, 2012, 7:03 PM

   You can't change the font of the editor, except if you're using Firefox and install the right add-on and the right script. And your problem isn't the font, it's the fact that the editor is the same no matter what the theme while the width of each theme is different. Proper alignment depends on the width of the inserted images in relation to the width of the theme, on whether you're talking about single images or groups of images, and on what you want to do in relation to the text. Please link to posts you're having problems with, and describe what exactly you'd like to do, so we can tell you how it's done.

3. megumihaggerty
   Member
   Mar 7, 2012, 7:36 PM

   Thank you for your message. The fact that the width is different for each theme is a good thing to learn and I will change the size of the images for the posts that I want.

   I am using Firefox and am interested in the the add-on and the script you mentioned. I guess I'm a little confused because when I used the Twenty Ten theme, the post pre-publication looked exactly the same as when it was published afterwards. This made creating the layout for the post must easier and neater.

   Here is an example of a post: http://megumihaggerty.com/2012/03/06/my-demo-reel/ I am happy with the placement of the photos & text. However, if you open this post in the post editor, the second photo is practically in the middle of the screen, with the text on its right. I can decipher what's going on, but was just hoping for a cleaner layout.

4. megumihaggerty
   Member
   Mar 7, 2012, 8:48 PM

   This is the exact layout I wanted: http://megumihaggerty.com/2010/02/20/tokyo-fashion-festa-nyc-runway-show-2010/

   However in the post editor, the photos are tiered (going from left to right, top to bottom) and the text follows it. If I wanted to add new photos, etc, I would not know how to do it as the layout in the editor is confusing.

   Any help?

5. justpi
   Member
   Mar 7, 2012, 9:54 PM

   a) When you use Twenty Ten, the visual editor mimics the width of the theme (leaving the rightmost part of the edit field empty). Unfortunately that's a luxury available only for Twenty Ten.

   b) The tiered effect is due to the alignment of the images. Setting the alignment of an image to left means that the rest of the content will wrap around, that is, start next to the image instead of below it. When the paragraph you want next to the image is shorter than the image, then rest of content includes next image as well. You're not seeing that in the actual posts, because the main column in Suburbia is a lot narrower than the edit field. If at some point you decide to change to a wider theme, the posts will look like they do in the editor.

   For a post like the first one you linked to, the correct solution is to switch the editor to HTML and paste this at the point where you want the wrap-around to end:
   <br style="clear:both;" />

   For a post like the second one you linked to, the correct solution is to make the whole group of images left aligned, again using some coding in the HTML editor:
   

   <div style="float:left;width:230px;">
   IMAGE1 CODE HERE
   IMAGE2 CODE HERE
   IMAGE3 CODE HERE
   </div>
   TEXT HERE

6. megumihaggerty
   Member
   Mar 7, 2012, 10:10 PM

   Thanks for all the info. I really appreciate it! I will try both solutions.

7. justpi
   Member
   Mar 7, 2012, 11:00 PM

   You're welcome. Note that in the second case you won't have to worry where to insert each image: for a new post, you'll first insert all the images then enter all the text (or vv). Also note that the appropriate width number in the code will naturally depend on the width of the inserted images: it needs to be a little larger, to leave some space between the image column and the text.

Topic Closed

This topic has been closed to new replies.