Problem 2 of 3: Just cannot get text alignment right!

Tagged: 

Author Posts

vargula June 29, 2012 at 9:14 pm

Heads up! this post was created when Microthemer was at version 1. The current version is 7. Some references to the interface may be out of date.

Hi
here is the second prob: in the picture [1] you see a snapshot of an image and some text on my current homepage as it is. I tried a table without success to place the image so it appears as I really want it (I had to do this in a Word document mock-up = image [2].
I could not see any function in Microthemer that allows me to place images and text like [2] so that the text is adjacent to the small image.
Would be really grateful for any tips before this sends me mad!
Ed

[1] https://dl.dropbox.com/u/1129320/downloads/actual-alignment.jpg
[2] https://dl.dropbox.com/u/1129320/downloads/alignment-as-preferred.jpg

Sebastian July 6, 2012 at 9:32 am

Hi Ed,

Yes you can do this. You just need to apply a “Float” value of “left” to the images on the home page (float is in the behaviour group of styling options). Or, in WordPress, when you click on the Edit image icon you should see an option to set the alignment to “Left”. That will essentially do the same thing (make the images float left) but it will do so by giving the images a class that the Twenty Eleven stylesheet already applies “float:left” to.

vargula July 6, 2012 at 10:58 am

Thanks, will try this over next few days.


Sebastian July 6, 2012 at 12:33 pm

OK

vargula July 7, 2012 at 2:45 pm

Well almost there – it worked well on home page i.e. http://miconsent.org/ except it put a strange wrap under standards used – i checked the html and all lines were the same – so don’t know why that single line looks differently just with the changes applied.

The other problem seemed to be consequential -on the contacts page. I couldn’t get back to a straight four photos with centred text underneath – tried for an hour!

any tips v grateful… but the floating image did the trick!

BR

Ed


vargula July 7, 2012 at 2:45 pm

BTW the contacts page one where the above tweak changed is http://miconsent.org/?page_id=58


Sebastian July 7, 2012 at 3:32 pm

Hi Ed,

1. To sort the problem with the horizontal rule you need apply a “clear” style to it. You will need to manually create a selector for this. Open up the “Main Body” section and click the “Add New Selector” button. Enter “hr” into the textarea and “Horizontal Rule” in the label field.Then click the “Add” button. Click the “Edit Styles” link on the selector you just created to open up the style options. Finally, open up the behaviour options and set “Clear” to “left” (that will clear the left float and allow your horizontal rule to display properly).

2. Yes the problem on your contact page is caused by all images now floating left, not just the ones on the home page. To only target images on the home page you could follow my previous advice about page-specific CSS targeting, or you could remove the float left style in Microthemer and use the image alignment option within WordPress.

Hope that helps!

vargula July 9, 2012 at 5:13 am

Thanks for all the above. The best workaround I found by accident was to look at my page-level html and enter class=”alignleft” immediately following every img – and it worked. Is that a good way out or should have I persisted with float?

Sebastian July 9, 2012 at 8:03 am

Hi Ed,

Adding an “alignleft” class to images you want aligned left is fine. The end result is the same. If you look at style.css on line 157 you will see that the Twenty Eleven theme is applying a “float:left” to elements with the class “.alignleft”. So float is actually still being used. You’re just not using it directly in Microthemer.

Cheers,

Sebastian

You must login or register to reply to this topic.