Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #236795

    Hello guys,

    I have the Replete theme and I use a non-boxed layout with sidebars on the right of the screen, I know that this theme doesn’t support 2 sidebars on the same page (one on each side) but I would like to know if there is a way to eliminate the margin on the left side of the main content (opposite side of the sidebar), and only on some selected pages, not all of them. As the margin on the rest of pages is fine for me, but I would really like to be able to eliminate the margin to fit the whole screen for some pages due to the structure of those pages.

    Please help out!

    Thanks,
    Barry

    #236858

    Hi alloro16!

    If i understood you correctly, you would like to change the container size. If that so, please go to wp-content\themes\replete\css folder and edit Grid.css file.
    If this is not what you meant, please post a screenshot and show the changes you would like to make

    Regards,
    Yigit

    #236868

    Hi Yigit,

    Thanks for your reply!

    I think that is the same as what I am saying and you understood, I will try that in a few hours. But I want this to apply only on some selected pages and not all…I think it would apply to all if I change the grid.css.file. Is it possible only on selected pages?

    Regards,
    Barry

    #237707

    Hi!

    It is possible but you are going to need to hire a freelance developer on Microlancer or Codeable for that kind of customization as it is beyond the scope of support we can provide. You can also request quote here.

    Cheers!
    Yigit

    #241707

    Hi Yigit,

    Ok, thanks for the clarification, but I have been thinking that maybe modifying every page would not be a bad option, just making the main content container wider by changing lines in the grid.css file.

    I have a NON responsive layout (desktop mode for tablet and mobile) and I am not sure what lines I have to tweak to make the main content container wider, and also take off margins on the side of the sidebar and main content.

    This is the grid file I have:

    /*
    * Based on Skeleton by Dave Gamache (www.getskeleton.com)
    * modified by kriesi as part of the wordpress avia framework
    */

    /* Table of Contents
    ==================================================
    #Base 960 Grid
    #Tablet (Portrait)
    #Mobile (Portrait)
    #Mobile (Landscape)
    #Clearing */

    /* #Base 960 Grid
    ================================================== */
    #wrap_all { margin: 8px auto 0 auto; position:relative; z-index: 3; }
    .container { position: relative; width: 930px; margin: 0 auto; padding: 0px; clear:both; }
    .container_wrap { clear:both; position: relative; z-index: 1;}
    #main .container_wrap:hover {z-index:2;}
    .unit, .units { float: left; display: inline; margin-left: 30px; position:relative; z-index:1; min-height:1px;}
    .row { position:relative; margin-bottom: 20px; clear:both; }

    .boxed .container .stretch_full { position:relative; left:-30px; }
    .boxed #wrap_all { margin: 0 auto; width: 990px; }
    .boxed .container { margin: 0px 30px; }
    /* Nested Column Classes */
    body .unit.alpha, body .units.alpha, body div .first { margin-left: 0; clear: left;}
    body .unit.alpha, body .units.alpha{width: 100%;}

    /* Base Grid */
    .container .one.unit, .container .one.units { width: 50px; }
    .container .two.units { width: 130px; }
    .container .three.units { width: 210px; }
    .container .four.units { width: 290px; }
    .container .five.units { width: 370px; }
    .container .six.units { width: 450px; }
    .container .seven.units { width: 530px; }
    .container .eight.units { width: 610px; }
    .container .nine.units { width: 690px; }
    .container .ten.units { width: 770px; }
    .container .eleven.units { width: 850px; }
    .container .twelve.units { width: 930px; margin-left:0}
    #top.boxed .stretch_full { width: 990px;}

    /* Offsets */
    #top .offset-by-one { padding-left: 80px; }
    #top .offset-by-two { padding-left: 160px; }
    #top .offset-by-three { padding-left: 240px; }
    #top .offset-by-four { padding-left: 320px; }
    #top .offset-by-five { padding-left: 400px; }
    #top .offset-by-six { padding-left: 480px; }
    #top .offset-by-seven { padding-left: 560px; }
    #top .offset-by-eight { padding-left: 620px; }
    #top .offset-by-nine { padding-left: 700px; }
    #top .offset-by-ten { padding-left: 780px; }
    #top .offset-by-eleven { padding-left: 860px; }

    /* #Desktop – Extra Large
    ================================================== */

    @media only screen and (min-width: 1140px) {
    .responsive .boxed #wrap_all { width: 1110px; }
    .responsive .container { width: 1050px; }

    .responsive .container .one.unit, .container .one.units { width: 60px; }
    .responsive .container .two.units { width: 150px; }
    .responsive .container .three.units { width: 240px; }
    .responsive .container .four.units { width: 330px; }
    .responsive .container .five.units { width: 420px; }
    .responsive .container .six.units { width: 510px; }
    .responsive .container .seven.units { width: 600px; }
    .responsive .container .eight.units { width: 690px; }
    .responsive .container .nine.units { width: 780px; }
    .responsive .container .ten.units { width: 870px; }
    .responsive .container .eleven.units { width: 960px; }
    .responsive .container .twelve.units { width: 1050px;}
    .responsive #top.boxed .stretch_full { width: 1110px;}

    .responsive #top .offset-by-one { padding-left: 90px; }
    .responsive #top .offset-by-two { padding-left: 180px; }
    .responsive #top .offset-by-three { padding-left: 270px; }
    .responsive #top .offset-by-four { padding-left: 360px; }
    .responsive #top .offset-by-five { padding-left: 450px; }
    .responsive #top .offset-by-six { padding-left: 540px; }
    .responsive #top .offset-by-seven { padding-left: 630px; }
    .responsive #top .offset-by-eight { padding-left: 720px; }
    .responsive #top .offset-by-nine { padding-left: 810px; }
    .responsive #top .offset-by-ten { padding-left: 900px; }
    .responsive #top .offset-by-eleven { padding-left: 990px; }

    }

    /* #Tablet (Portrait)
    ================================================== */

    /* Note: Design for a width of 768px, Gutter: 30px, Unit: 32px */

    @media only screen and (min-width: 768px) and (max-width: 989px) {
    .responsive .boxed #wrap_all { width: 774px; }
    .responsive .container { width: 714px; }

    .responsive .container .one.unit,
    .responsive .container .one.units { width: 32px; }
    .responsive .container .two.units { width: 94px; }
    .responsive .container .three.units { width: 156px; }
    .responsive .container .four.units { width: 218px; }
    .responsive .container .five.units { width: 280px; }
    .responsive .container .six.units { width: 342px; }
    .responsive .container .seven.units { width: 404px; }
    .responsive .container .eight.units { width: 466px; }
    .responsive .container .nine.units { width: 528px; }
    .responsive .container .ten.units { width: 590px; }
    .responsive .container .eleven.units { width: 652px; }
    .responsive .container .twelve.units { width: 714px; }
    .responsive #top.boxed .stretch_full { width: 774px;}

    /* Offsets */
    .responsive #top .offset-by-one { padding-left: 62px; }
    .responsive #top .offset-by-two { padding-left: 124px; }
    .responsive #top .offset-by-three { padding-left: 186px; }
    .responsive #top .offset-by-four { padding-left: 248px; }
    .responsive #top .offset-by-five { padding-left: 310px; }
    .responsive #top .offset-by-six { padding-left: 372px; }
    .responsive #top .offset-by-seven { padding-left: 434px; }
    .responsive #top .offset-by-eight { padding-left: 496px; }
    .responsive #top .offset-by-nine { padding-left: 558px; }
    .responsive #top .offset-by-ten { padding-left: 620px; }
    .responsive #top .offset-by-eleven { padding-left: 682px; }

    }

    /* #Mobile (Portrait)
    ================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 767px) {
    .responsive .boxed #wrap_all { width: 318px; }
    .responsive .container { width: 258px; }
    .responsive .units, .responsive .unit { margin: 0; }

    .responsive .container .one.unit,
    .responsive .container .one.units,
    .responsive .container .two.units,
    .responsive .container .three.units,
    .responsive .container .four.units,
    .responsive .container .five.units,
    .responsive .container .six.units,
    .responsive .container .seven.units,
    .responsive .container .eight.units,
    .responsive .container .nine.units,
    .responsive .container .ten.units,
    .responsive .container .eleven.units,
    .responsive .container .twelve.units,
    .responsive #top .one_fifth,
    .responsive #top .one_fourth,
    .responsive #top .one_third,
    .responsive #top .two_fifth,
    .responsive #top .one_half,
    .responsive #top .three_fifth,
    .responsive #top .two_third,
    .responsive #top .three_fourth,
    .responsive #top .four_fifth { margin: 0; margin-bottom: 10px; width: 258px; }
    .responsive #top.boxed .stretch_full{ width: 318px;}

    /* Offsets */
    .responsive #top .offset-by-one,
    .responsive #top .offset-by-two,
    .responsive #top .offset-by-three,
    .responsive #top .offset-by-four,
    .responsive #top .offset-by-five,
    .responsive #top .offset-by-six,
    .responsive #top .offset-by-seven,
    .responsive #top .offset-by-eight,
    .responsive #top .offset-by-nine,
    .responsive #top .offset-by-ten,
    .responsive #top .offset-by-eleven{ padding-left: 0; }

    }

    /* #Mobile (Landscape)
    ================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {
    .responsive .boxed #wrap_all { width: 478px; }
    .responsive .container { width: 418px; }
    .responsive .units, .responsive .unit { margin: 0; }

    .responsive .container .one.unit,
    .responsive .container .one.units,
    .responsive .container .two.units,
    .responsive .container .three.units,
    .responsive .container .four.units,
    .responsive .container .five.units,
    .responsive .container .six.units,
    .responsive .container .seven.units,
    .responsive .container .eight.units,
    .responsive .container .nine.units,
    .responsive .container .ten.units,
    .responsive .container .eleven.units,
    .responsive .container .twelve.units,
    .responsive #top .one_fifth,
    .responsive #top .one_fourth,
    .responsive #top .one_third,
    .responsive #top .two_fifth,
    .responsive #top .one_half,
    .responsive #top .three_fifth,
    .responsive #top .two_third,
    .responsive #top .three_fourth,
    .responsive #top .four_fifth { width: 418px; margin-left: 0; margin-bottom: 10px; }
    .responsive #top.boxed .stretch_full{ width: 478px;}

    }

    /* #Clearing
    ================================================== */

    /* Self Clearing Goodness */
    .container:after { content: “020″; display: block; height: 0; clear: both; visibility: hidden; }

    /* Use clearfix class on parent to clear nested units,
    or wrap each row of units in a <div class=”row”> */
    .clearfix:before,
    .clearfix:after,
    .row:before,
    .row:after {
    content: ’020′;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0; }
    .row:after,
    .clearfix:after {
    clear: both; }
    .row,
    .clearfix {
    zoom: 1; }

    /* You can also use a <br class=”clear” /> to clear units */
    .clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
    }

    /* Columns for better content separation
    ================================================== */

    div .one_fifth { overflow: hidden; z-index:1; margin-left: 4%; width:16.5%; float:left; position:relative; }
    div .one_fourth { overflow: hidden; z-index:1; margin-left: 4%; width:22%; float:left; position:relative; }
    div .one_third { overflow: hidden; z-index:1; margin-left: 4%; width:30.5%; float:left; position:relative; }
    div .two_fifth { overflow: hidden; z-index:1; margin-left: 4%; width:38.5%; float:left; position:relative; }
    div .one_half { overflow: hidden; z-index:1; margin-left: 4%; width:48%; float:left; position:relative; }
    div .three_fifth { overflow: hidden; z-index:1; margin-left: 4%; width:57%; float:left; position:relative; }
    div .two_third { overflow: hidden; z-index:1; margin-left: 4%; width:65.5%; float:left; position:relative; }
    div .three_fourth { overflow: hidden; z-index:1; margin-left: 4%; width:74%; float:left; position:relative; }
    div .four_fifth { overflow: hidden; z-index:1; margin-left: 4%; width:79%; float:left; position:relative; }
    .msie7 .one_fourth { width:21.5%; }
    .msie7 div, .msie7 li { zoom:1; }

    /* Columns for better content separation (no margin)
    ================================================== */

    body div .no_margin { margin-left:0;}
    .no_margin.one_fifth { width:20%; }
    .no_margin.one_fourth { width:25%; }
    .no_margin.one_third { width:33.3%; }
    .no_margin.two_fifth { width:40%; }
    .no_margin.one_half { width:50%; }
    .no_margin.three_fifth { width:60%; }
    .no_margin.two_third { width:66.6%; }
    .no_margin.three_fourth { width:75%; }
    .no_margin.four_fifth { width:80%; }
    .msie7 .no_margin.one_fourth{ width:24.99%; }

    • This reply was modified 4 months, 1 week ago by  alloro16.
Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Eliminate main content Margin on selected pages’ is closed to new replies.