0
Welcome Guest! Login
0 items Join Now

Remove left and right constraints

Last Post
Search Topic

  • Remove left and right constraints

    Posted 11 years 8 months ago
    • Can changes be made to templates such that modules (and articles) use the entire screen, without having the left and right edges of the template? Some template tools use the entire screen for headers, but I would like to create a template in which the module positions use the entire screen.

      Thanks,
      Gary
    #1016824
    • David Goode's Avatar
    • David Goode
    • Preeminent Rocketeer
    • Posts: 17058
    • Thanks: 890
    • Web Designer and Host

    Re: Remove left and right constraints

    Posted 11 years 8 months ago
    • Hi Gary,

      Depending on template in question it may be a simple case of changing css or you might need to restructure the index.php and change css.

      Hope this helps 8)

    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information
    #1017113

  • Re: Remove left and right constraints

    Posted 11 years 8 months ago
    • The request is basically generic as I would like to understand know how to create this ability to use the entire screen on any on the responsive templates for a new Project I am developing.

      Thanks,
      Gary

      obs: I currently use joomla 3.0...
    #1017197
    • David Goode's Avatar
    • David Goode
    • Preeminent Rocketeer
    • Posts: 17058
    • Thanks: 890
    • Web Designer and Host

    Re: Remove left and right constraints

    Posted 11 years 8 months ago
    • Hi Gary,

      For the restricted areas you will see that the template often uses a div class called rt-container to wrap around other divs or to sit inside the full width divs.

      For example if we look at afterburner2 template we can see the following source code in he browser...
      <div id="rt-top">
    <div class="rt-container">
        <div class="rt-grid-12 rt-alpha rt-omega">
      When viewed on a desktop we see the following css is assigned...
      #rt-top-surround {
    color: #C7C7C7;
}
.rt-container {
    margin: 0 auto;
    position: relative;
    width: 1200px;
}
.rt-grid-12 {
    width: 1200px;
}
      These are the basic css elements and there are other pieces of css for styling that I haven't included here.

      As you can see, there is no width for the rt-top-surround div so it will fill the screen.
      The div class rt-container is set to be relative in position to the other divs and to have a width of 1200px. The margin is set for 0 top and bottom and auto for the sides, which will centre it on the screen.

      Inside the container would be your selected layouts e.g. 1 published item = 12 grid etc. In this example the rt-grid-12 is set to 1200px width. If you published 2 positions with the 6|6 setup then they would be 600px each.

      Hope this helps 8)

    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information
    #1017231

  • Re: Remove left and right constraints

    Posted 11 years 8 months ago
    • Thanks a lot for your help!
    #1017262

Time to create page: 0.084 seconds