Home Forums Xi Theme Discussion & Support Shareahollic Plugins: 2 & 3 Column Page Issue

This topic is: not a support question

This topic contains 12 replies, has 3 voices, and was last updated by  Larry McMahon 5 years ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #2240

    Richard
    Participant
    Post count: 181

    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

    [&nbsp

    &nbsp

    &nbsp

    &nbsp]

    after the {/div} of the final column, so it looks like this in my html:

    {/div}
    {/div}[&nbsp

    &nbsp

    &nbsp

    &nbsp]”

    in order to ensure the bar is displayed properly. Hope this makes sense? Note semicolons removed so code is visible.

    #2242

    themeweaver
    Keymaster
    Post count: 730

    In what way does it not display correctly?

    If due to floats not clearing, try adding

    at the bottom of your content.

    #2247

    Richard
    Participant
    Post count: 181

    The 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?

    #2249

    themeweaver
    Keymaster
    Post count: 730

    Sorry my last note should have been – tray adding:


    <div class="clear"></div>

    and an example would be helpful if still having problems.

    #2251

    Richard
    Participant
    Post count: 181

    The 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.

    #2253

    themeweaver
    Keymaster
    Post count: 730

    OK, 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.

    #2259

    Larry McMahon
    Participant

    Hi,

    How did you get a 3 column layout with Xi?

    Larry

    #2260

    Richard
    Participant
    Post count: 181

    On 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?

    #2261

    themeweaver
    Keymaster
    Post count: 730

    Larry : 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.

    #2262

    Richard
    Participant
    Post count: 181

    I will let you know. I hope to get to this this week – thanks!

    #2263

    Richard
    Participant
    Post count: 181

    Update: 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!

    #2265

    themeweaver
    Keymaster
    Post count: 730

    Its 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.

    #2273

    Larry McMahon
    Participant

    Hi,

    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

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.