Changing Width of Footer Columns

[Anonymous]

Elsewhere you explained to me that it is possible to change the width of the three footer columns as follows:

“Contango is based on Skeleton 16 Columns Grid.

You have made some changes at code level to attain your required result. Currently Contango is using three columns with the following layout,

five columns
five columns
six columns

You may change it to

one-third column
one-third column
one-third column

Code will find in the file contango/lib/utils.php

* Don’t forget to backup your original file.

Enjoy!”

It is very helpful to know this can be changed. Forgive me but I’m a total novice with website design. I know what I want, but mastering the technical aspects of creating it is a very long learning curve for me.

Will I be modifying this with the Editor in the Contango Pro theme? Up to this point I’ve been working with a child theme of the original. Or to do this, do I need to go to my hosting site and make the changes there? Sorry, but I don’t yet have a full grasp of the process. If you are able, please provide a more detailed explanation of the process to switch to one-third columns. Thank you!

[admin]

Hi Lotus,

Will I be modifying this with the Editor in the Contango Pro theme?

We usually recommend to use any good editor like Dreamweaver to edit such big changes.

Up to this point I’ve been working with a child theme of the original. Or to do this, do I need to go to my hosting site and make the changes there?

Working on Child Theme is recommended at Development server before deploying your final changes to the Production environment.

Sorry, but I don’t yet have a full grasp of the process. If you are able, please provide a more detailed explanation of the process to switch to one-third columns. Thank you!

I have forwarded this question to our developers and requested to implement one-third column (if possible easily). I will give you the exact code to avoid any confusion. I hope, thread will be updated within next 24 hours.

Thanks!

[Anonymous]

Thank you. I really look forward to seeing and implementing this update!

[admin]

Hi Lotus,
Developer is working on it and i will guide you today.
Thanks for your patience.

[admin]

Hello Lotus,
Here is the guide to make Contango Footer Columns with Equal Width,

– Open “contango/lib/utils.php” in your favorite editor.
– Search for id=”footer_sidebars” ~ Line Number: 578
– Find these classes,

class=”five columns”
class=”five columns”
class=”six columns”
[/CODE]

– Replace with,

[CODE]class=”one-third column”
class=”one-third column”
class=”one-third column”[/CODE]

It will give you three equal footer columns with 300px width.

Enjoy![CODE]class=”five columns”
class=”five columns”
class=”six columns”
[/CODE]

– Replace with,

class=”one-third column”
class=”one-third column”
class=”one-third column”[/CODE]

It will give you three equal footer columns with 300px width.

Enjoy![CODE]class=”one-third column”
class=”one-third column”
class=”one-third column”[/CODE]

It will give you three equal footer columns with 300px width.

Enjoy!

[Anonymous]

That worked! Each footer column is now equal in width which, for my purposes, looks much better. Again, thanks very much!

For other novice website creators who are using a child theme, note that it was necessary to go into the original theme Editor as the files that need to be modified are not available in my child theme. To quickly find what you want to change, remember to use Control-F (Find) which is very helpful when looking for something in many lines of code. The original theme dictates how my child theme appears although minor changes can be made directly to the child theme.

For those new to the Child Theme concept, I use a plug-in called One-Click Child Theme which allows one to easily create a child theme from a theme. Using a child theme can be huge time saver when making and reversing changes that don’t work. I could even figure out how it worked when I knew almost nothing.

[admin]

Hi Lotus,
Thanks a lot for your feedback and sharing your experience with DesignOrbital community.
Take Care

[Anonymous]

Another question:
I’ve changed the footer column in 4 columns but where can i change it on the WP widget page. so i can put widget on it
Thx

[admin]

Hi Natascha,

I’ve changed the footer column in 4 columns

That’s great.

but where can i change it on the WP widget page. so i can put widget on it

Please follow the simple steps.

– Open “contango/lib/modules.php” in your favorite editor.
– Search for “kamn-footer-sidebar-3” ~ Line Number: 73
– Enter the following code at the end of “kamn-footer-sidebar-3” array

[PHP]’kamn-footer-sidebar-4′ => array(
‘name’ => __( ‘Footer Column 4’, ‘kamn’ ),
‘id’ => ‘kamn-footer-sidebar-4’,
‘description’ => __( ‘Widget area for footer column 4.’, ‘kamn’ )
)[/PHP]

So the final code of $sidebars array will be,

[PHP]/** Sidebars (Built-in) */
$sidebars = array(

‘kamn-primary-sidebar’ => array(
‘name’ => __( ‘Primary Sidebar’, ‘kamn’ ),
‘id’ => ‘kamn-primary-sidebar’,
‘description’ => __( ‘The main (primary) widget area used as a sidebar.’, ‘kamn’ )
),

‘kamn-front-page-sidebar’ => array(
‘name’ => __( ‘Front Page’, ‘kamn’ ),
‘id’ => ‘kamn-front-page-sidebar’,
‘description’ => __( ‘The front page widget area used as a sidebar.’, ‘kamn’ )
),

‘kamn-page-sidebar’ => array(
‘name’ => __( ‘Page Sidebar’, ‘kamn’ ),
‘id’ => ‘kamn-page-sidebar’,
‘description’ => __( ‘The page widget area used as a sidebar.’, ‘kamn’ )
),

‘kamn-footer-sidebar-1’ => array(
‘name’ => __( ‘Footer Column 1’, ‘kamn’ ),
‘id’ => ‘kamn-footer-sidebar-1’,
‘description’ => __( ‘Widget area for footer column 1.’, ‘kamn’ )
),

‘kamn-footer-sidebar-2’ => array(
‘name’ => __( ‘Footer Column 2’, ‘kamn’ ),
‘id’ => ‘kamn-footer-sidebar-2’,
‘description’ => __( ‘Widget area for footer column 2.’, ‘kamn’ )
),

‘kamn-footer-sidebar-3’ => array(
‘name’ => __( ‘Footer Column 3’, ‘kamn’ ),
‘id’ => ‘kamn-footer-sidebar-3’,
‘description’ => __( ‘Widget area for footer column 3.’, ‘kamn’ )
),

‘kamn-footer-sidebar-4’ => array(
‘name’ => __( ‘Footer Column 4’, ‘kamn’ ),
‘id’ => ‘kamn-footer-sidebar-4’,
‘description’ => __( ‘Widget area for footer column 4.’, ‘kamn’ )
)

);[/PHP]

Reverify your footer columns

Your newly added forth footer (lib/utils.php) should have following condition,

[PHP][/PHP]

Enjoy!

[Anonymous]

WOW
Thx this works great!

[Author]

Posts