We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 2569
    • 6 Posts
    Hi there,

    I’m new to CSS, I made some modifications to MODx template and added a third left column and i ran into a slight problem.

    The footer is not adjusting to my main center column, Instead it is adjusting to the left column.
    Could somebody help me fix this? Thanks in advance.

    http://alarabiah.com.sa/index.php?id=1

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
      <title>[(site_name)] | [*pagetitle*]</title>
      <meta http-equiv="Content-Type" content="text/html; charset=[(modx_charset)]" />
      <base href="[(site_url)]"></base>
      <link rel="stylesheet" href="assets/templates/modxhost/layout.css" type="text/css" media="screen" />
      <link rel="stylesheet" href="assets/templates/modxhost/modxmenu.css" type="text/css" media="screen" />
      <link rel="stylesheet" href="assets/templates/modxhost/form.css" type="text/css" media="screen" />
      <link rel="stylesheet" href="assets/templates/modxhost/modx.css" type="text/css" media="screen" />
      <link rel="stylesheet" href="assets/templates/modxhost/print.css" type="text/css" media="print" />
      <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="[(site_url)][~11~]" />
      <script src="manager/media/script/mootools/mootools.js" type="text/javascript"></script>
      <script src="assets/templates/modxhost/drop_down_menu.js" type="text/javascript"></script>
    </head>
    <body>
    <div id="wrapper">
      <div id="minHeight"></div>
      <div id="outer">
        <div id="inner">
          <div id="right">
            <div id="right-inner">
              <h1 style="text-indent: -5000px;padding: 0px; margin:0px; font-size: 1px;">[(site_name)]</h1>
              <div id="sidebar">
                <h2>News:</h2>
                [[Ditto? &startID=`2` &summarize=`2` &total=`20` &commentschunk=`Comments` &tpl=`nl_sidebar` &showarch=`0` &truncLen=`100` &truncSplit=`0`]]
                <div id="recentdocsctnr">
                  <h2>Most Recent:</h2>
                  <a name="recentdocs"></a>[[ListIndexer?LIn_root=0]] </div>
                <h2>Meta:</h2>
                <p><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></p>
                <p><a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page uses valid Cascading Stylesheets" rel="external">Valid <abbr title="W3C Cascading Stylesheets">css</abbr></a></p>
                <p><a href="http://modxcms.com" title="Ajax CMS and PHP Application Framework">MODx</a></p>
              </div>
              <!-- close #sidebar -->
            </div>
            <!-- end right inner-->
          </div>
          
          <!-- end right -->
          <div id="left">
            <div id="left-inner">
              <h1 style="text-indent: -5000px;padding: 0px; margin:0px; font-size: 1px;">[(site_name)]</h1>
              <div id="sidebarleft">
                <h2>News:</h2>
                [[Ditto? &startID=`2` &summarize=`2` &total=`20` &commentschunk=`Comments` &tpl=`nl_sidebar` &showarch=`0` &truncLen=`100` &truncSplit=`0`]]
                <div id="recentdocsctnr">
                  <h2>Most Recent:</h2>
                  <a name="recentdocs"></a>[[ListIndexer?LIn_root=0]] </div>
                <h2>Meta:</h2>
                <p><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></p>
                <p><a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page uses valid Cascading Stylesheets" rel="external">Valid <abbr title="W3C Cascading Stylesheets">css</abbr></a></p>
                <p><a href="http://modxcms.com" title="Ajax CMS and PHP Application Framework">MODx</a></p>
              </div>
              <!-- close #sidebar -->
            </div>
            <!-- end left inner-->
          </div>
          <div id="center">
            <div id="center-inner">
              <div id="content">
                <div class="post">
                  <h2>[*longtitle*]</h2>
                  [*#content*] </div>
                <!-- close .post (main column content) -->
              </div>
              <!-- close #content -->
            </div>
            <!-- end center-inner -->
          </div>
          <!-- end center -->
        </div>
        <!-- end inner -->
        <div id="clearfooter"></div>
        <div id="header">
          <h1><a id="logo" href="[~[(site_start)]~]" title="[(site_name)]">[(site_name)]</a></h1>
          <div id="search"><!--search_terms--><span id="search-txt">SEARCH</span><a name="search"></a>[!AjaxSearch? ajaxSearch=`1` &AS_landing=`8` &moreResultsPage=`8` &showMoreResults=`1` &addJscript=`0` &extract=`0` &AS_showResults=`0`!]</div>
          <div id="ajaxmenu"> [[Wayfinder?startId=`0` &outerTpl=`mh.OuterTpl` &innerTpl=`mh.InnerTpl` &rowTpl=`mh.RowTpl` &innerRowTpl=`mh.InnerRowTpl` &firstClass=`first` &hereClass=``]] </div>
          <!-- end topmenu -->
        </div>
        <!-- end header -->
        <br style="clear:both;height:0;font-size: 1px" />
        <div id="footer">
          <p> <a href="http://modxcms.com" title="Ajax CMS and PHP Application Framework">Powered
              by MODx</a>  <a href="http://www.modxhost.com/" title="Template Designed by modXhost.com">Template © 2006
              modXhost.com</a><br />
            MySQL: [^qt^], [^q^] request(s), PHP: [^p^], total: [^t^], document retrieved
            from [^s^]. </p>
        </div>
        <!-- end footer -->
      </div>
      <!-- end outer div -->
    </div>
    <!-- end wrapper -->
    </body>
    </html>
    
      • 2569
      • 6 Posts
      I’d appreciate it if somebody can help me with this..
        • 1169
        • 312 Posts
        Hi

        If you are not used to CSS I would suggest you try a proven 3 column template visit:-

        http://modxcms.com/extras/repository/packages/Templates
        http://modxcms.com/extras/repository/packages/Style

        Plenty to chose from there.

        It is possible to modify existing templates but needs XHTML & CSS in depth knowledge to do well and in a given time period.

        Hope this helps.
          DEVELOPMENT ENV:- Ubuntu 12.04 | MODx Revolution 2.2.8 | LAMP 2i Apache 2.2.22 | Php 5.3.10 | Mysql 5.5.31 MySQL client version: 5.5.31
          • 2569
          • 6 Posts
          Hello allanb,

          I spent a lot of time looking for 3 column template, And i didn’t find a decent one in MODx extras and out.
          Therefore i thought it’s better to modify the original template, And then i bumped into this small but annoying issue.

          Thanks for your reply..
            • 1169
            • 312 Posts
            I did convert one 3 column holy grail can be used as is header 3column & footer

            Not very elaborate but can be customised easily all the columns work. Is available in Style section only was unable to put in templates folder dont know why.

            In my opinion it’s what you do with the template that makes the difference not the way the template looks in the demo it is only the framework for your imagination.

              DEVELOPMENT ENV:- Ubuntu 12.04 | MODx Revolution 2.2.8 | LAMP 2i Apache 2.2.22 | Php 5.3.10 | Mysql 5.5.31 MySQL client version: 5.5.31
              • 2569
              • 6 Posts
              I re-edited the original template again, And all things good now..
              Thanks allanb, And the same to the rest.