KB User's Guide - SitePref Tab - Manually Adjusting Side Module Widths

NeedAdminPermissions.png

This document describes how to manually modify the widths of the left and right side modules for your KnowledgeBase site while still maintaining a responsive layout. This is useful in cases where you want to make better use of space or prevent excessive text wrapping in these modules.

  1. Log into the KB Admin Tools.

  2. If you have access to multiple KB sites, verify that the correct site is selected in the Group space: dropdown menu found in the upper right corner.

  3. Go to the SitePref tab and select FullView Layout/CSS from the left-hand link navigation.

    • If you are already using custom CSS, the changes described below can be added to the custom CSS field currently in use. If you have been using the default CSS, add the lines below to one of the empty custom CSS fields and choose the appropriate radio button to enable this field.

    • If the changes being made are restricted to one instance of the site (e.g. only the external site), you need only make changes to the appropriate Custom CSS field (e.g. External Custom CSS One). If the changes apply to both your internal and external sites, you will need to enter CSS code in two different fields.

    • Because of the way the CSS is organized, the changes necessary for adjusting the widths of the side modules vary depending on whether you have assigned modules to the side left only, side right only, or both. For this reason, the remaining instructions are divided into the following sections: Left Only, Right Only, and Left and Right. Please follow the appropriate instructions for your site's structure:


Left Only

  1. In one of the Internal Custom CSS or External Custom CSS fields, paste the following:

    .span_middle2_1_of_2 {width:13.5%;}
    .span_middle2_2_of_2 {width:84%;}
  2. The first line controls the left-side column; change width:13.5%; to the desired size, e.g. width:25%;

  3. In the second line, which controls the main content area, adjust the width to compensate for the increased or decreased size of the left column. To achieve a working layout, the widths of both columns should equal 97.5% when totaled.

    So, if you changed the first line to read:

         .span_middle2_1_of_2 {width:25%;}

    The second line would be modified to read:

         .span_middle2_2_of_2 {width:72.5%;}
  4. Verify that the correct menu option has been selected to enable the custom CSS field you are using.

  5. Click the Update button at the top of the section you are editing to save your changes.

  6. Open your live KB site in another browser window to verify the desired widths and spacing has been achieved. If necessary, make adjustments to the same CSS attributes, taking care to update the FullView/Layout CSS page and reload the live site between changes.


Right Only

  1. In one of the Internal Custom CSS or External Custom CSS fields, paste the following:

    .span_middle22_2_of_2 {width:13.5%;}
    .span_middle22_1_of_2 {width:84%;}
  2. The first line controls the right-side column; change width:13.5%; to the desired size, e.g. width:25%;

  3. In the second line, which controls the main content area, adjust the width to compensate for the increased or decreased size of the right column. To achieve a working layout, the widths of both columns should equal 97.5% when totaled.

    So, if you changed the first line to read:

         .span_middle2_2_of_2 {width:25%;}

    The second line would be modified to read:

         .span_middle2_1_of_2 {width:72.5%;}
  4. Verify that the correct menu option has been selected to enable the custom CSS field you are using.

  5. Click the Update button at the top of the section you are editing to save your changes.

  6. Open your live KB site in another browser window to verify the desired widths and spacing has been achieved. If necessary, make adjustments to the same CSS attributes, taking care to update the FullView/Layout CSS page and reload the live site between changes.


Left and Right

  1. In one of the Internal Custom CSS or External Custom CSS fields, paste the following:

    .span_middle3_1_of_3 {width:13.5%;}
    .span_middle3_2_of_3 {width:70.4%;}
    .span_middle3_3_of_3 {width:13.5%;}
  2. Change the appropriate side column width: attribute to the desired size, e.g. width:20%;. Depending on which column(s) you are trying to change the width(s) for, this may involve editing .span_middle3_1_of_3 (left side) and/or .span_middle3_3_of_3 (right side).

  3. In the second line, which controls the main content area, adjust the width to compensate for the increased or decreased size of the side column(s). To achieve a working layout, the widths of all three sections should equal 97.4% when totaled.

    So, if you left the first line (i.e. the left-side column) as is and changed the third line to read:

         .span_middle3_3_of_3 {width:20%;}

    The second line would be modified to read:

         .span_middle3_2_of_3 {width:63.9%; }
  4. Verify that the correct menu option has been selected to enable the custom CSS field you are using.

  5. Click the Update button at the top of the section you are editing to save your changes.

  6. Open your live KB site in another browser window to verify the desired widths and spacing has been achieved. If necessary, make adjustments to the same CSS attributes, taking care to update the FullView/Layout CSS page and reload the live site between changes.

See Also:




Keywords:change changing modify modifying sides modules columns width sitepref "full view" layout css increase decrease sizes right left bigger smaller wider narrower   Doc ID:30020
Owner:Leah S.Group:KB User's Guide
Created:2013-05-06 16:11 CDTUpdated:2016-10-31 15:55 CDT
Sites:KB User's Guide
Feedback:  0   0