Optional side menu / side area

Welcome to the WonderCMS community. Anything goes, except for support requests.
Post Reply
Mirsad
Posts: 9
Joined: Wed Mar 12, 2014 1:55 pm

Optional side menu / side area

Post by Mirsad »

For WonderCMS 4: If your navigation on the top gets too crowded, this simple code will add a cool looking side area that can be used as a submenu.

Image

Code: Select all


<p style="width: 200px; color: rgb(68, 68, 68); float: right; height: auto; padding: 20px; background: none repeat scroll 0% 0% rgb(255, 255, 255); margin-top: 40px; margin-left: 10%; margin-bottom: 10px; border: 1px solid rgb(255, 255, 255); -moz-border-radius: 5px 5px 5px 5px;">Alternative submenu

1. <a href="link">Link to...</a>
2.
3.

</p>

It will only apear where you place it, it won't repeat on every page but that can be a good thing, you can have diferent kind of these according to diferent need / pages.

Edit: I use it as "topic highlights", to list titles for major paragraphs in the particular page, like on FAQ pages for example.
User avatar
turboblack
Posts: 198
Joined: Fri Sep 19, 2014 1:53 pm

Re: Optional side menu / side area

Post by turboblack »

please tell me how to do the same in the new version wondercms
http://old.net.eu.org/ Get ready to hamsterization! 8-) code takes less than a kilobyte! shock!
https://github.com/turboblack/HamsterCMS new version for PHP 8 with new templates
User avatar
wiz
Posts: 749
Joined: Sat Oct 30, 2010 12:23 am

Re: Optional side menu / side area

Post by wiz »

1. Open index.php and use $c['newarea'] to create a new editable area.
Add the following code around line 20 (for example add it below $c['subside'] - which currently serves for your static sidebar). $c['newarea'] = "This is a new editable area!";

2. Go over to your current theme and open style.css.

3. Create a new id (named differently than $c['newarea']).

4. Position your new area with CSS.
Here's an example which will position your new area below the sidebar.

Code: Select all

#mynewarea {
	width: 20%;
	position: relative;
	float: right;
	clear: right;
	margin-right: 10%;
	height: auto;
	padding: 20px;
	font-size: 13px;
	margin-top: 10px;
	border-radius: 5px;
	background: #16a6b6;
	margin-bottom: 10px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}	
5. Open theme.php and add the new area.

Code: Select all

<div id="mynewarea">
	<?php content('newarea',$c['newarea']);?>
</div>
That's it, your new editable area is successfully created. Make sure you save all files.
User avatar
turboblack
Posts: 198
Joined: Fri Sep 19, 2014 1:53 pm

Re: Optional side menu / side area

Post by turboblack »

thank you for the advice.
if in the sidebar to shove links to pages - this will give the opportunity to add more pages than allowed by the top menu.
http://old.net.eu.org/ Get ready to hamsterization! 8-) code takes less than a kilobyte! shock!
https://github.com/turboblack/HamsterCMS new version for PHP 8 with new templates
Post Reply