menu

Page structure

The overall HTML structure (head and body omitted for clarity).

Default:

<div id="wrap">
  <main id="content" class="narrow">
Main content banner, text, images, comments etc (created in admin)
  </main>
  <div id="search">
Search form (if used)
  </div>
  <nav id="menu" class="one">
Navigation menu (auto generated) (default position)
  </nav>
  <div id="extra" class="normal">
Optional extra content (default position)
Edit /inc/extra.php in admin
  </div>
  <footer id="footer">
Footer links etc (add links in admin)
  </footer>
</div>

Optional wide page layout:

<div id="wrap">
  <main id="content" class="wide">
Main content banner, text, images, comments etc (created in admin)
  </main>
  <div id="search">
Search form (if used)
  </div>
  <nav id="menu" class="two">
Navigation menu (auto generated) (different position option)
  </nav>
  <div id="extra" class="option">
Optional extra content (different position option)
Edit /inc/extra.php in admin
  </div>
  <footer id="footer">
Footer links etc (add links in admin)
  </footer>
</div>

The above is the order of display when there is no stylesheet — no styles at all. There are very few modern websites built without any styles. The display of web pages is normally controlled by a stylesheet with rules that create a design (or theme).

More about the stylesheets »

Comments


Hi, I love this CMS and plan to use it for at least two different web sites.

My problem is, I can't seem to put a header at the top of the page, and I can't get random images to appear in the 'extra' area.

I don't know php, and I don't know a lot about CSS. I have worked for the past week or so and changed most of the layout the way I want. I just want to do these two things (the header and the random images).

I have searched online and found scripts to no success.

Any help is appreciated!


To add a header you will need to edit /cms/inc/page.class.php to add a header div between #wrap and #content, then style the new div to suit. It might be tricky if you don't know php and CSS.

A simpler alternative is just to style the #menu div to place it above #content. Some CSS is still required but this option is more in keeping with the philosophy of keeping things simple. Position the #menu with position: absolute; and adjust the top margins of #content and #extra to suit.

For random images you will need to add some php to /cms/inc/extra.php and upload the images. It is not difficult but a bit too long to explain here.


Hi again, thanks for your quick reply! I forgot to ask - do I need a header.php file or is just adjusting the code sufficient?


In /cms/inc/page.class.php, after line 46 (between the #wrap and #content divs) create a new line:

require ('header.php')

then, yes, create header.php with the html for your header - normally a #header div "box" no wider than 960px containing the content of the header. The CSS for the box might be, for example:

#header {
display: block;
width: 860px;
height: 100px;
margin: 0 auto;
}

You can give empty #header a temporary background colour to check that the box is where you want it.


Yay! After following your instructions and tweaking things a bit I finally got a header up and running! It looks fantastic! Thanks
again :D


Well done!


xxx


Bonjour,

C'est un outil très agréable et efficace.

Merci

Bonnes Fêtes

Bern Jaure


Leave a comment

Downloads since Sept 2011: 19,153