2 Column Page Layout (i.e. Contact in Demo)

Front page Support Forums Kanso Theme Support 2 Column Page Layout (i.e. Contact in Demo)

This topic contains 7 replies, has 2 voices, and was last updated by  satori 3 years, 6 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #3052

    Lexusaddicted
    Participant

    Satori Sensei,
    for my SHIBUMI page http://www.blackstar-design.com/principles/ I would like to adopt the same style as you used in Contact or Team in the demo. There is a H2 Title on the left and the content on the right, looks like divided into two columns. Didn’t figure out how to do this yet.

    Sorry to bother you

    Respectfully Thomas

    #3055

    satori
    Member

    Hey Thomas,

    the layout whereby the title is left-aligned and the content floats to the right is only used on the one-page template in Kanso. To implement it on the page you mention, you’d need some additional CSS (you can insert it into the “Style: Add Custom CSS” tab of the Theme Options panel:

    .page-id-280 .page-content { float: right; width: 66%; }
    .page-id-280 .page-content h1:last-child { margin-left: -52%; width: 40%; float: left; }
    .page-id-280 .page-content h6:last-child { display: none; }
    

    Sincerely,
    Andrii / Satori Studio

    #3058

    Lexusaddicted
    Participant

    Satori Sensei,
    sorry but somehow I can not manage to get the title to be left-aligned?!?
    Would like to have KOKO, KANSO etc.. behave so.

    Respectfully
    Thomas

    #3063

    satori
    Member

    Hey Massaki,

    you do not have any unique wrappers around the subheadings, they are just bold text, which is why they’re not aligning. You can try this:

    .page-id-280 .page-content strong { float: left; margin-left: -52%; }
    

    yet I would recommend wrapping the headings you need left-aligned into divs with unique identifiers (class or id), which would make it easier to add attributes to them.

    Sincerely,
    Andrii / Satori Studio

    #3073

    Lexusaddicted
    Participant

    Satori Sensei,
    obviously it worked perfectly! Thank you very much.
    Unfortunately I have little/no idea what “class” or “id” are and how to deal with them. My weapons are Photoshop and Illustrator ;-)

    When I have set up the rest of the site, I will come back to you as I have someting on my mind.

    Respectfully
    Thomas

    #3078

    satori
    Member

    Hey Thomas,

    the simpler solution in this situation would be to use a “Full-width” page template instead of a “Large Text” template for that particular page – that way there can be the necessary unique elements that we can work with :)

    Sincerely,
    Andrii / Satori Studio

    #3450

    Lexusaddicted
    Participant

    Konnichiha Andrii Sensei,
    is it possible to do the same for the (Standard)-“Project”-Pages?

    Tried to insert the page id of the projects into Custom CSS, but it didn’t work. I am using Full Width for the layout. Can you help me?

    Thank you very much
    Respectfully Tommy

    P.S. Can I update to version 1.5 without problems? I got a CSS-File from you because of the menu

    • This reply was modified 3 years, 6 months ago by  Lexusaddicted.
    #3460

    satori
    Member

    Hey Thomas,

    do you want the above to work for any project or a specific one? If the former, you can try this CSS:

    .single-project .post-header { float: left; width: 27%; margin-left: 6%; }
    .single-project .post-content { float: right; width: 60% !important; margin-right: 6%; }
    

    I would recommend using shortcodes on a “full-width” layout to create columns of content, however (please see Appendix 2 of the theme manual for the description of available shortcodes).

    Regarding your second question – you can update to version 1.5 safely, yet after the update you’ll need to copy over the custom file I’ve provided here in order to get the external menu links to display before the one-page links again.

    Sincerely,
    Andrii / Satori Studio

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

You must be logged in to reply to this topic.