Changing Width of Footer Columns

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #353
    Anonymous
    Guest

    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!

    #863
    admin
    Participant

    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!

    #864
    Anonymous
    Guest

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

    #865
    admin
    Participant

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

    #866
    admin
    Participant

    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!

    #867
    Anonymous
    Guest

    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.

    #868
    admin
    Participant

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

    #869
    Anonymous
    Guest

    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

    #870
    admin
    Participant

    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!

    #871
    Anonymous
    Guest

    WOW
    Thx this works great!

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.