Home › Forums › Xi Theme Discussion & Support › Shareahollic Plugins: 2 & 3 Column Page Issue
This topic contains 12 replies, has 3 voices, and was last updated by Larry McMahon 9 years, 4 months ago.
-
AuthorPosts
-
December 4, 2011 at 3:31 am #2240
http://wordpress.org/extend/plugins/sexybookmarks/
When using a 2 or 3 Column page layout – http://ucim.org/community/friend-20th-winnipeg-scouts/ – I have had to manually add this code
[ 
 
 
 ]
after the {/div} of the final column, so it looks like this in my html:
{/div}
{/div}[  
 
 ]”
in order to ensure the bar is displayed properly. Hope this makes sense? Note semicolons removed so code is visible.
December 4, 2011 at 3:22 pm #2242In what way does it not display correctly?
If due to floats not clearing, try adding
at the bottom of your content.
December 4, 2011 at 9:59 pm #2247The bar would not display properly until the were added. Only the Google+ button. Does that make sense? Should I revert one page to show you?
December 5, 2011 at 8:05 am #2249Sorry my last note should have been – tray adding:
<div class="clear"></div>
and an example would be helpful if still having problems.
December 5, 2011 at 9:42 am #2251The fact is there are no problems since adding the fix I have identified above. It just requires a manual entry for each page that uses more than one column.
December 5, 2011 at 11:44 am #2253OK, but what happens without your fix? You haven’t really explained.
And my suggestion was to use the above code as a fix instead. this clears floats if that is the issue.
December 7, 2011 at 12:07 am #2259Hi,
How did you get a 3 column layout with Xi?
Larry
December 7, 2011 at 3:28 am #2260On this page I have removed the fix, and you cannot see the bar at all: http://ucim.org/contact-us/
As opposed to here, where the code has been added: http://ucim.org/church/
Does that help demonstrate what I am talking about? Is the code you siggested helpful therefore in this matter?
@ Larry: In your WYSIWYG Editor there should be a green button with three columns that says “Insert Three Columns” – does that make sense?
December 7, 2011 at 8:14 am #2261Larry : see “Creating layout in Codex:” http://themeloom.com/support/framework-codex/creating-layout/
Fionavar: Please try the code I gave you. If this fixes it then it is a clearing issue.
I have already made some improvements to the code here ready for next release. Although this is a common issue when creating content in any system like WordPress.
In fact you will probably get the same effect if you just use standard WordPress features like inserting an image and making it left or right align. this ‘floats’ the image and you need something the clear it afterwards. The same is true for the column layout.
Inserting an element with class=”clear” forces the clearing.
But as I said we have put another tweak in the code ready for the next release that does help with this issue. Providing of course that this is what is causing the plugin to behave like this.
December 7, 2011 at 8:18 am #2262I will let you know. I hope to get to this this week – thanks!
December 7, 2011 at 8:20 am #2263Update: http://ucim.org/contact-us/
That seems to have worked. Should I do that for all of the affected pages then? Can you share why this happened in away a a lay person like me can understand? Regardless – cool!
December 7, 2011 at 9:26 am #2265Its all about CSS and floats. Not sure this can be put a lay language but is essential knowledge if you ever want to do CSS.
When laying out elements with CSS the common practice is to float elements left or right. When you insert and image in WP for example and make it left aligned, css is being applied to float it left. (the css is float:left;). If you look at any css stylesheet, your layout is full of such statements.
The problem is your next non-floated element can have problems displaying if there is nothing to clear the floats (a kind of reset to the layout).
While this all can seem a bit complicated, it is an issue you will face a lot and depending on your theme or plugins and their combinations, you will now and then need to insert something to clear floats.
So in all our themes adding class=”clear” to any element will do that for you. You can just as easily add style=”clear:both;” to any element and it will have the same effect.
Now having said all that there will be a tweak in the next versions of our themes that trys to make the columns clear themselves automatically.
But for now, and probably in a lot of other cases where this kind of thing occurs (even in other themes) you need to add something to clear the floats. So yes add the code to each effected page.
December 7, 2011 at 4:01 pm #2273Hi,
Ah, three column page or post. I was thinking 3 column theme, but clearly that is not what you wrote, so my bad.
Thanks
Larry -
AuthorPosts
You must be logged in to reply to this topic.