Column help

[Kenya Fever]

Hi,

Couple related questions:

1) I’m having a very hard time figuring out how the columns work. For my ‘Features’ page, I’m trying to make 3 columns, 2 rows of features. I can’t seem to make it work. I get three columns on the first line, then all kinds of weird stuff happens. I read a previous post that said to “try using last=”1″ on each column” but that doesn’t work for me.

I’m also open to doing 2 columns, 3 rows, but I don’t understand the logic of the columns. It’s unlike others I’ve used. Saying “1-3” doesn’t mean anything to me yet. Neither does “last”.

I also tried looking through the manual, but didn’t see anything.

2) I’m trying to use some icons, and the manual (on page 13) says there are icons available. When following these instructions

“Textures and icon packs: the theme package includes a wide selection of textures and icons to use in customizing your website, found in the „Resources“ folder of the ThemeForest archive „Kanso_WP_Theme_Package“.”

I actually find no such file in that location.

Would appreciate a little clarification.

Thanks!!!

KF

• This topic was modified 10 years, 9 months ago by satori.

[satori]

Hey KF,

I will answer the questions in the same order:

1). The column shortcode contains two parameters: the width of the column, and its position:
– the width is a fraction, written with a hyphen, e.g. a 1/2 column would mean [column size=”1-2″]Content[/column] shortcode, and 2/5 column would imply a [column size=”2-5″]Content[/column] shortcode.
– the position parameter is only needed to “tell” the column that it is the last one in a row, e.g. if I want two columns 1/2 width each in one row, I would use this: [column size=”1-2″]Content[/column][column size=”1-2″ last=”1″]Content[/column].
More information on column shortcode usage is available on page 18 of the theme manual.

2). My apologies, this paragraph on page 13 of the manual is outdated – thanks for reporting! I will correct it and update the theme. The textures pack is indeed inside the Resources folder, yet the icons have been replaced by an icon Font called Font Awesome (see the “Font Awesome Integration” subsection in the same section). Icon fonts are a more modern solution to using icons, they are scalable, formattable via CSS, and can be used on retina screens as well.

Please let me know if something is still unclear.

Sincerely,
Andrii / Satori Studio

[Kenya Fever]

Sorry. I’ve tried reading and re-reading your column explanation, but I can’t figure it out.

I’m trying to make 3 columns. I’m using the 1-3 column size option in the short code. No matter what I do (I’ve tried changing lots of things, including the “last=” part, but in every case it’s not even and it’s not correct.

Perhaps you can tell me specifically what I need to to. Again, I’m looking for 2 columns:

1st column across: Responsive / Modern / Easy
2nd column across: E-Commerce / Customizable / Affordable

Here’s what I have right now (again, I’ve tried many, many variations of this…)

[column size=”1-3″ last=”0″ style=”0″]RESPONSIVE[/column]

[column size=”1-3″ last=”0″ style=”0″]MODERN[/column]

[column size=”1-3″ last=”0″ style=”0″]EASY[/column]

[column size=”2-3″ last=”0″ style=”0″]E-COMMERCE[/column]

[column size=”2-3″ last=”0″ style=”0″]CUSTOMIZABLE[/column]

[column size=”2-3″ last=”1″ style=”0″]AFFORDABLE[/column]

I will try font awesome next. Hopefully it’s easy to understand.

Cheers.

KF

[Kenya Fever]

I’ll definitely need help with using Font Awesome too. If it’s a font, how to I utilize it? I can see on the site what the icons are, but no indication on how to implement them. Are they already loaded? If so, how do I find them?

[Kenya Fever]

Quick update on Font Awesome. I tried putting the code snippet into the wysiwyg editor, no luck, then I added it to the text editor, and while I was able to make the icon appear, it rendered the font below it all wrong.

Need detailed instructions, please.

Thanks!!

[satori]

Hi KF,

1). Regarding the shortcodes: if I understood you correctly, you’d like to have three rows with two columns each, the first column being 1/3 of the width and the second being 2/3 of the width. Please try this code:

[column size=”1-3″ last=”0″ style=”0″]RESPONSIVE[/column][column size=”2-3″ last=”1″ style=”0″]E-COMMERCE[/column]

[column size=”1-3″ last=”0″ style=”0″]MODERN[/column]
[column size=”2-3″ last=”1″ style=”0″]CUSTOMIZABLE[/column]

[column size=”1-3″ last=”0″ style=”0″]EASY[/column]
[column size=”2-3″ last=”1″ style=”0″]AFFORDABLE[/column]

The shortcode is organized by rows – so that the two columns (1/3 and 2/3) that appear in the same row should follow each other in the shortcode notation. In general, I would highly recommend using the built-in shortcode generator (see page 11 of the Manual) instead of writing the code by hand, since it is quite easy to make a typo in this case, which would prevent the entire thing from rendering correctly.

2). Concerning Font Awesome: the theme contains the source, the icons should be inserted using notations set forth by the designers of the font. As mentioned on page 14 of the theme manual, please see Font Awesome’s short instruction on how to insert the icons.

Sincerely,
Andrii / Satori Studio

[Kenya Fever]

Ugh. I’ve tried this so many times. And although I’m able to make the columns now, they never align. They’re all staggered. If you go to my site:
http://sitetomorrow.com/home/, and go to ‘New Features’ you can see what I mean.

On a related note, I’d love to make the features a full-width page, meaning instead of the header in left column, it would actually be above the content so that I can have, say, three columns go the width of the site. in the manual it says this: “The single-page layout is an aggregate of one or several individual pages, each of which can be of any available layout (e.g. „portfolio“, „blog posts“, „right-sidebar“, etc)…” (page 4). But, even when I select page template for full width, or with sidebar, or whatever, it always renders the same, no matter what. So, is it possible to have a page in the one-page configuration actually go full width?

Please let me know how to fix the columns if possible, and whether full-width is possible.

Thanks!

KF

[satori]

Hey KF,

to align the columns, please try removing any spaces or new lines between the column codes, i.e. instead of

[column size="1-2"]Content[/column][column size="1-2" last="1"]
[column size="1-2"]Content[/column][column size="1-2" last="1"]

try making it:

[column size="1-2"]Content[/column][column size="1-2" last="1"][column size="1-2"]Content[/column][column size="1-2" last="1"]

Regarding the full-width pages: Kanso’s one-page mode has been specifically designed to have headings in the left as a distinctive theme design feature; there’s no back-end way of making a full-width page in the current version of the theme. However, it can be done with a few lines of additional code:

#page-holder-195 .page-title { float: none; }
#page-holder-195 .content-container-inner { float: none; width: 100% }

(this is a code specifically for the last section of your front page; in order to make other sections full-width, I’d need to insert the same lines for each of them, replacing the “195” with the ID of the page that holds the respective content.

Please let me know if the above information is helpful in your situation!

Sincerely,
Andrii / Satori Studio

[Kenya Fever]

Thanks.

Re: columns…How would I then make the font awesome icon go above the column title? And how would I think have the column title above the column description? Are you saying they all have to be on the same line? That’s not how it is on the demo…

I’ll look into the full-width page fix. You see that it’s confusing because the manual says it can ‘be any available layout.’

Appreciate your help.

KF

[satori]

Hey KF,

regarding the columns: the point is not to merge the content of the column, but to remove spaces between the shortcode itself – between the last “]” of one shortcode and the first “[” of the next one, as shown in the example in my previous post; at the same time, the content of each shortcode can be anything and have any number of lines, I’ve used a single word just for illustration purposes.

Sincerely,
Andrii / Satori Studio

[Author]

Posts