Announcement

Collapse
No announcement yet.

Changing Grid

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • [CMS] Changing Grid

    Hey,

    is there any way, to create new Grid-Sizes?

    For example i need 3 columns:
    20 / 60 / 20

    That is not available in the Dropdown-List for the grid.. Where can i create it?

    Greetings

  • #2
    Sure, create a grid that is close to what you want (sidebar left at 120px, then the content at 75/25), then flatten it. Create a layout out of it, apply it to a section, view it in firebug, get the name of the class for the left side so you can then change it to 20% and get the name of the class that sets the left-margin for the other div so you can set it to 20% (and probably add some left-padding as well). Then add that style stuff to the top of the grid (Edit grid) like this:
    HTML Code:
    <style type="text/css">
    .yui-tvb-l1 .yui-b {width: 20%;}
    .yui-tvb-l1 #yui-main .yui-b {
    margin-left:20%;
    padding-left: 10px;
    }
    </style>
    Save. And viola!

    Please don't PM or VM me for support - I only help out in the threads.
    vBulletin Manual & vBulletin 4.0 Code Documentation (API)
    Want help modifying your vbulletin forum? Head on over to vbulletin.org
    If I post CSS and you don't know where it goes, throw it into the additional.css template.

    W3Schools &lt;- awesome site for html/css help

    Comment


    • #3
      I seriously dont understand this...

      Here's my grid:

      Code:
      <style type="text/css">
      .yui-u first yui-panel {width: 100px;}
      .yui-u yui-panel {width: 100%;}
      .yui-b yui-sidebar {width: 200px;}
      </style>
      <div id="doc3" class="yui-tvb-r2">
          <div id="bd">
              <div id="yui-main">
                  <div class="yui-b">
                      <div class="yui-gf">
                          <div class="yui-u first yui-panel">
                              <ul class="list_no_decoration widget_list" id="widgetlist_column1">$column[1]</ul>
                          </div>
                          <div class="yui-u yui-panel">
                              <ul class="list_no_decoration widget_list" id="widgetlist_column2">$column[2]</ul>
                          </div>
                      </div>
                  </div>
              </div>
              <div class="yui-b yui-sidebar">
                  <ul class="list_no_decoration widget_list" id="widgetlist_column3">$column[3]</ul>
              </div>
          </div>
      </div>
      No matter what I put in style, nothing happens... Not even an error :/
      www.radiostyrt.no / www.modellflynytt.no

      Comment


      • #4
        Did some more research regarding this YUI-thingy and noticed that they provide a Grid Builder.
        Now that would be something for vB, or even better, full support for the one that already exist.
        www.radiostyrt.no / www.modellflynytt.no

        Comment


        • #5
          Originally posted by Lynne View Post
          Sure, create a grid that is close to what you want (sidebar left at 120px, then the content at 75/25), then flatten it. Create a layout out of it, apply it to a section, view it in firebug, get the name of the class for the left side so you can then change it to 20% and get the name of the class that sets the left-margin for the other div so you can set it to 20% (and probably add some left-padding as well). Then add that style stuff to the top of the grid (Edit grid) like this:
          HTML Code:
          <style type="text/css">
          .yui-tvb-l1 .yui-b {width: 20%;}
          .yui-tvb-l1 #yui-main .yui-b {
          margin-left:20%;
          padding-left: 10px;
          }
          </style>
          Save. And viola!
          Sounds a bit too much for me....
          Are not there some simple standard grids to download and import from somewhere ?

          I ain't look' for anyth' fancy. just a simple 20% 80% ........
          .

          Comment


          • #6
            Sure, there are grids available for download over on vbulletin.org, the modification site.

            Please don't PM or VM me for support - I only help out in the threads.
            vBulletin Manual & vBulletin 4.0 Code Documentation (API)
            Want help modifying your vbulletin forum? Head on over to vbulletin.org
            If I post CSS and you don't know where it goes, throw it into the additional.css template.

            W3Schools &lt;- awesome site for html/css help

            Comment


            • #7
              Originally posted by Lynne View Post
              Sure, there are grids available for download over on vbulletin.org, the modification site.
              Thanks Lynne,
              it was finally far easier than what I imagined. I downloaded the default grid xml file, killed the undesired column, renamed the style and imported it. Bingo! it works!
              .

              Comment

              widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
              Working...
              X