Column Modes – Half and Half Page with a Sidebar to the Right

  • markchoo

    #7365

    Hi Guys,

    I am trying to create an option for a Half and Half 2-Page Column in on a single page with Sidebar to the right.

    So I will end or with more space with a Split Page Half and Half Page with a Sidebar to the right.

    Can this be done? Any help will be appreciated!

    Thank you! Mark

    Luko

    #37945

    Inside your page editor switch to text(html) editing. Create two divisions and assign unique id for each one. After that simply style id through child theme style.css, or custom css.

    HTML:

    <div id="column_left">
    ...left column stuff goes here...
    </div>
    <div id="column_right">
    ...right column stuff goes here...
    <div>

    CSS:

    #column_left {
    float:left;
    }

    Prasanna SP

    #37946

    Or, just the HTML.

    <div class="alignleft" style="width:47%;">
    ...left column stuff goes here...
    </div>
    <div class="alignright" style="width:47%;">
    ...right column stuff goes here...
    </div>

    markchoo

    #37947
    Quote:
    <div class=”alignleft” style=”width:47%;”> …left column stuff goes here… </div> <div class=”alignright” style=”width:47%;”> …right column stuff goes here… </div>

    Hi Luko – If I use this option and there is a Theme Update, will the update delete this code?

    markchoo

    #37948
    Quote:
    Or, just the HTML.

    <div class=”alignleft” style=”width:47%;”>

    …left column stuff goes here…

    </div>

    <div class=”alignright” style=”width:47%;”>

    …right column stuff goes here…

    </div>

    Prasanna – okay just tried this option, seems to work well, but if Luko’s option above will give me a permanent option to add this as a new column mode, and it will not be affected by a theme update, I may opt for that, since i can easily use it again in a GUI Interface.

    Prasanna SP

    #37949

    float: left; is already declared in the theme stylesheet. You just have to use the proper class in your HTML. Unless you’re going for extreme customizations, no need to add extra float left, right elements to the custom CSS

    markchoo

    #37950

    Okay got it, thank you brother!

    Luko

    #37951

    @prasanna – You’re right, no need for floating. I was typing that from head. Although, giving unique id or class name for columns is better option by my opinion.

    @mark – Solutions are (Prasanna and mine) practically the same. Worpdress and Graphene treat that code as content, so it won’t be lost during update. Although I think you misunderstood me, that code wont give you any template for reusing again on next page. For any other page you have to put it in again. 🙂

    Mod

    Kenneth John Odle

    #37952

    Just to muddy the waters, you can also use the multiple columns property. However, it also requires vendor prefixes to work properly.

    Admin
Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.