Education theme– sidebar wider?

Community Forums Forums General Discussion Education theme– sidebar wider?

This topic is: not resolved

Tagged: ,

This topic contains 1 reply, has 2 voices, and was last updated by  rfmeier 1 year, 6 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #45694

    mpeik
    Participant
    Post count: 18

    I am sure there is a way– but I can’t seem to figure it out… how do I make the blue sidebar on my website wider. I would like the calendar info more easily readable. Thank you!!

     

    http://www.rlschristianday.org

    http://www.rlschristianday.org
    #45699

    rfmeier
    Participant
    Post count: 603

    Hello,

    You sidebar and content are limited to a width of 1140px by this css rule;

    [css]
    /* line ~539 */
    #inner .wrap {
    margin: 0 auto;
    width: 1140px;
    }[/css]

    Your sidebar and content must share this 1140px. If you are going to increase your sidebar, you must take from your content (to keep the styling of the page). Lets say we make a 100px adjustment to the content and sidebar;

    [css]
    /* line ~757 */
    #content-sidebar-wrap {
    -moz-border-radius: 5px;
    -moz-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);
    -webkit-border-radius: 5px;
    -webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);
    background: #fff;
    border-radius: 5px;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);
    float: left;
    position: relative;
    width: 880px; /* subtracted 100px. Was 980px, now 880px */
    z-index: 999;
    }

    /* line ~1384 */
    #sidebar-alt {
    -webkit-border-radius: 5px;
    -webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);
    -moz-border-radius: 5px;
    -moz-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);
    background: #254c67 url(images/bg-sidebar.jpg);
    border-radius: 5px;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);
    color: #aec6d7;
    float: left;
    font-size: 12px;
    margin: 15px -5px 15px 0;
    position: relative;
    text-shadow: none;
    text-shadow: #0d1a23 -1px -1px;
    width: 265px; /* added 100px. Was 165px, now 265px */
    z-index: 0;
    }[/css]

    If you do make a change like this, please check your site thoroughly to make sure it did not affect anything else.

    Here is a preview: https://www.diigo.com/item/image/40chg/imga

    I hope this gives you a start.


Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.