menu

CMS Page Structure

la.plume Micro CMS most recent version 10.4:

<div id="wrap">
	<div id="content" class="narrow">
Main content text, images etc, created in admin
		<div id="social">
Social networking buttons (optional)
Manually edit /inc/social.php
		</div>
	</div>
	<div id="search">
Search form
	</div>
	<div id="menu" class="side">
Navigation menu (auto generated)
	</div>
	<div id="extra" class="normal">
Optional extra content (below menu)
Edit /inc/extra.php in admin
	</div>
	<div id="footer">
Footer links etc (add links in admin)
	</div>
</div>

Style as required. About the stylesheets »

<html></html>, <head></head> and <body></body> not shown.

The CSS classes were introduced in Version 8.1 to distinguish between the default page layout (with the navigation menu at the side) and the optional wide page layout (with the navigation menu at the bottom above the footer). The classes are different for the wide page option:

<div id="wrap">
	<div id="content" class="wide">
Main content text, images etc, created in admin
		<div id="social">
Social networking buttons (optional)
Manually edit /inc/social.php
		</div>
	</div>
	<div id="search">
Search form
	</div>
	<div id="menu" class="bottom">
Navigation menu (auto generated)
	</div>
	<div id="extra" class="option">
Optional sidebar content (below menu)
Edit /inc/extra.php in admin
	</div>
	<div id="footer">
Footer links etc (add links in admin)
	</div>
</div>

Page last modified: January 26, 2015

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

Get the files (ZIP)

Downloads since
September 2011:

17,111