New Front EN › Support Forums › Kanso Theme Support › 2 Column Page Layout (i.e. Contact in Demo)
- This topic has 7 replies, 2 voices, and was last updated 10 years, 6 months ago by satori.
-
AuthorPosts
-
April 21, 2014 at 2:31 pm #3052LexusaddictedParticipant
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
April 21, 2014 at 3:57 pm #3055satoriKeymasterHey 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 StudioApril 21, 2014 at 5:34 pm #3058LexusaddictedParticipantSatori 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
ThomasApril 22, 2014 at 8:05 am #3063satoriKeymasterHey 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 StudioApril 22, 2014 at 2:44 pm #3073LexusaddictedParticipantSatori 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
ThomasApril 23, 2014 at 7:59 am #3078satoriKeymasterHey 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 StudioJune 9, 2014 at 8:37 am #3450LexusaddictedParticipantKonnichiha 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 TommyP.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 10 years, 6 months ago by Lexusaddicted.
June 10, 2014 at 7:26 am #3460satoriKeymasterHey 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 -
AuthorPosts
- You must be logged in to reply to this topic.