CMS Made Simple Forums

Posted: **Sun Jul 20, 2008 10:32 am**

Hello everybody,
For the last couple of hours I am trying to get a sidebar menu to work.
I managed to get links in the sidebar and also the same menu as what I have on top of the site, but I want another sidemenu. With links to pages that are not in the top menu.
How do I do that? What call do I have to add? I tried {sidemenu} but that didnot work.
My testsite is at: http://www.jomedio.nl/cmsmadesimple/

Posted: **Sun Jul 20, 2008 12:04 pm**

You could check the other default templates and use the logic from there, in calling the sidebar menu and attaching the additional stylesheet as well.

Ronny

Posted: **Sun Jul 20, 2008 12:52 pm**

RonnyK wrote: You could check the other default templates and use the logic from there, in calling the sidebar menu and attaching the additional stylesheet as well.

Ronny

Hi Ronny,
I tried that but I don't get it done. Can you give me an example for calling the sidemenu?
I attached the CSS menu horizontal and the layout menu leftsidebar + 1 column to the template. Do I have to add a vertical menu also?
Basically I want to link to some pages I already created in the menu, but that are not showing in the topmenu.
For instance a page called, Katten with id 7 and a page called Honden with id 7.1
I really am stuck and can use all help.
This is the template:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

{metadata}
{stylesheet}
<title>Marketplace</title>

</head>

</__body>

<!-- wrap starts here -->
<div id="wrap">

	<!--header -->
	<div id="header">			
	{cms_module module="bMenu"}			
		<div id="header-links">
		<p>
			<a href="index.html">Home</a> | 
			<a href="index.html">Contact</a> | 
			<a href="index.html">Site Map</a>			
		</p>		
		</div>		
		
	<!--header ends-->					
	</div>
		
	<div id="header-photo">
	
		<h1 id="logo-text"><a href="index.html" title="">Jomedio Audio, Video en Webdesign</a></h1>		
		<h2 id="slogan">Er is veel mogelijk!</h2>	
			
	</div>		
			
	<!-- navigation starts-->	
	<div  id="nav">
       {menu template="bMenu" number_of_levels="3"}
       {cms_module module="bMenu" styleid="52"}

		<!-- navigation ends-->	
	</div>					
			
	<!-- content-wrap starts -->
	<div id="content-wrap" class="three-col"  >	
	
		<div id="sidebar">
                             {search}
					
			<h1>Links</h1>
                                        <div id="sidemenu">
                              {global_content name='sidemenu'}
                               </div>

                                 {menu start_level="2" number_of_levels="3" }		
		
		<!-- sidebar ends -->		
		</div>	
		<div id="rightcolumn">
		
			<h1>Support Styleshout</h1>
			<p>If you are interested in supporting my work and would like to contribute, you are
			welcome to make a small donation through the 
			<a href="http://www.styleshout.com/">donate link</a> on my website - it will 
			be a great help and will surely be appreciated.</p>
			
			<h1>Header Text</h1>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. 
			Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu 
			posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum 
			odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra 
			condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. 
			In tristique orci porttitor ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. 
			Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu 
			posuere nunc justo tempus leo. </p>				
					
		</div>
		
		
		<div id="main">
				
			<a name="Info"></a>
			<h1>Info</h1>
			
			{content}
				
			<p class="post-footer">		
			<a href="index.html" class="readmore">Read more</a> |
			<a href="index.html" class="comments">Comments (7)</a> |				
			<span class="date">May 20, 2007</span>	
			</p>
			

			
			
			<h3>Blockquote</h3>			
			<blockquote><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
			nibh euismod tincidunt ut laoreet dolore magna aliquam erat....</p></blockquote>
				
			<h3>Image and text</h3>
			<p><a href="http://getfirefox.com/"><img src="images/firefox-gray.jpg" width="100" height="120" alt="firefox" class="float-left" /></a>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. 
			Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu 
			posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum 
			odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra 
			condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. 
			In tristique orci porttitor ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. 
			Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu 
			posuere nunc justo tempus leo. 				
			</p>
				

				
		</div>
		
	<!-- content-wrap ends-->	
	</div>
		
	<!-- footer starts -->			
	<div id="footer-wrap"><div id="footer">				
			
			<p>
			© 2008 <strong>Jomedio</strong> | 
			Design by: <a href="http://www.jomedio.nl/">Jomedio</a> | 
	
			</p>		
			
	</div></div>
	<!-- footer ends-->	
	
<!-- wrap ends here -->
</div>

<__body>
</__html>

And this is the stylesheet of the template:

Code: Select all

/********************************************
   AUTHOR:  			Erwin Aligam 
   WEBSITE:   			http://www.styleshout.com/
	TEMPLATE NAME:		MarketPlace
   TEMPLATE CODE: 	S-0017
   VERSION:          1.0	
	DATE:          	August-31-2007          	
 *******************************************/
 
/********************************************
   HTML ELEMENTS
********************************************/ 

/* Top Elements */
* { margin: 0; padding: 0;}

body {
	background: #fff;
	font: 11px/1.75em Verdana, Tahoma, arial, sans-serif;
	color: #666666; 
	text-align: center;
	margin: 0 0 15px 0;	
}

/* links */
a, a:visited {	
	color: #326ea1; 
	background: inherit;
	text-decoration: none;		
}
a:hover {
	color: #383d44;
	background: inherit;
	padding-bottom: 0;
	border-bottom: 2px solid #dbd5c5;
}

/* headers */
h1, h2, h3 {
	font-family: 'Trebuchet MS', Tahoma, Sans-serif;
	font-weight: Bold; 	
	color: #333;		
}
h1 {
	font-size: 160%;	
	font-weight: normal;
}
h2 {
	font-size: 130%;
	text-transform: uppercase;	
}
h3 {
	font-size: 130%;	
}

h1, h2, h3, p {
	padding: 10px;		
	margin: 0;
}
ul, ol {
	margin: 5px 20px;
	padding: 0 20px;
}

/* images */
img {
	background: #FAFAFA;
   border: 1px solid #DCDCDC;
	padding: 5px;
}
img.float-right {
  	margin: 5px 0px 10px 10px;  
}
img.float-left {
  	margin: 5px 10px 10px 0px;
}

code {
  	margin: 5px 0;
  	padding: 10px;
  	text-align: left;
  	display: block;
  	overflow: auto;  
  	font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace ;
  	/* white-space: pre; */
  	background: #F5F5F5;
	border-left: 3px solid #D4D4D4;
}
acronym {
  cursor: help;
  border-bottom: 1px dashed #777;
}
blockquote {
	font: bold 1.4em/1.5em 'Trebuchet MS', Tahoma, Sans-serif;	
	margin: 10px;
 	padding: 0 0 0 25px;  
   background: #F5F5F5;
	border-left: 3px solid #D4D4D4;	
	color: #444;
}

/* start - table */
table {
	border-collapse: collapse;
	margin: 10px;	
}
th strong {
	color: #fff;
}
th { 
             background: #e7e6e6 url(uploads/images/MarketPlace/button.jpg) repeat-x;
	height: 29px;
	padding-left: 12px;
	padding-right: 12px;	
	text-align: left;
	border-left: 1px solid #f4f4f4;
	border-bottom: solid 2px #fff;
	color: #333;
}
tr {
	height: 30px;
}
td {
	padding-left: 11px;
	padding-right: 11px;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
}
td.first,th.first {
	border-left: 0px;
}
tr.row-a {
	background: #F8F8F8;
}
tr.row-b {
	background: #EFEFEF;		
}
/* end - table */

/* form elements */
form {
	margin:10px; padding: 0 5px;
	background: #F5F5F5;	
}
label {
	display:block;
	font-weight:bold;
	margin:5px 0;
}
input {
	padding:2px;
	border:1px solid #eee;
	font: normal 1em Verdana, sans-serif;
	color:#777;
}
textarea {
	width:400px;
	padding:2px;
	font: normal 1em Verdana, sans-serif;
	border:1px solid #eee;
	height:100px;
	display:block;
	color:#777;
}
input.button { 
	font: bold 12px Arial, Sans-serif; 
	height: 24px;
	margin: 0;
	padding: 2px 3px; 
	color: #333;
             background: #998f8f url(uploads/images/MarketPlace/button.jpg) repeat-x;
	border: 1px solid #dadada;
}

/* search form */
.searchform {
	background-color: transparent;
	border: none;	
	margin: 0 5px 0 10px; padding: 5px 0 15px 0;	
	width: 190px;	
}
.searchform p { margin: 0; padding: 0; }
.searchform input.textbox { 
	width: 100px;
	color: #777; 
	height: 18px;
	padding: 2px;	
	border: 1px solid #E5E5E5;
	vertical-align: top;
}
.searchform input.button { 
	width: 60px;
	height: 24px;
	padding: 2px 5px;
	vertical-align: top;
}

/********************************************
   LAYOUT
********************************************/ 
#wrap {
	position: relative;
	width: 910px;	
	margin: 0 auto;
	text-align: left;
	background: #fff url(uploads/images/MarketPlace/content.jpg) repeat-y center top;
}
#content-wrap {
	float: left;
	width: 850px;
	margin-left: 30px;
	display: inline;
	padding: 0; 	
	border-top: 5px solid #fff;
	background: #fff url(uploads/images/MarketPlace/content-wrap.jpg) repeat-x; 
}
#header {
	position: relative;
	background: #fff url(uploads/images/MarketPlace/header-bg.jpg) repeat-y center top;
	height: 35px;
	width:910px;	
	padding: 0;	
	color: #fff;	
}

/* header links */
#header #header-links {
	position: absolute;
	top: 8px; right: 45px;	
	color: #838181;
	font-size: 10px;	
	font-weight: bold;
}
#header #header-links p {	
	padding: 0;	margin: 0;	
}
#header #header-links a {	
	color: #838181;
	text-decoration: none;	
}
#header #header-links a:hover {
	color: #444;		
}

/* header-photo */
#header-photo {
	position: relative;
	clear: both;
	margin: 5px auto;
	height: 250px;
	width: 850px;
	background: #fff url(uploads/images/MarketPlace/header-photo.jpg) no-repeat center center;
}
#header-photo h1#logo-text a {
	position: absolute;
	margin: 0; padding: 0;
	font: bold 48px 'Trebuchet MS', Arial, Sans-serif;
	letter-spacing: -1px;
	color: #fff;
	text-transform: none;
	text-decoration: none;
	border: none;
	
	/* change the values of top and left to adjust the position of the logo*/
	top: 25px; left: 30px;	
}

#header-photo h2#slogan {
	position: absolute;
	margin: 0; padding: 0;
	font: bold 14px 'Trebuchet MS', Arial, Sans-serif;
	text-transform: none;
	color: #B6D1F8;
	
	/* change the values of top and left to adjust the position of the slogan*/
	top: 80px; left: 35px;		
}

/* Navigation */
#nav {
	clear: both;	
	padding: 0;			
}
#nav ul {
	float: left;
	list-style: none;
             background: #E4E4E4 url(nav.jpg) repeat-x;	
	width: 850px;		
	padding: 0;	margin: 0 0 0 30px;
	height: 45px;
	display: inline;
	text-transform: uppercase;
}
#nav ul li {
	display: inline;
	margin: 0; padding: 0;
}
#nav ul li a {
	display: block;
	float: left;
	width: auto;
	margin: 0;
	padding: 0 15px;	
	border-right: 1px solid #dadada;
	border-left: 1px solid #fafafa;	
	border-bottom: none;
	color: #555;
	font: bold 14px/45px "Century Gothic", "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif;
	text-transform: uppercase;
	text-decoration: none;	
	letter-spacing: 1px;
}
#nav ul li a:hover, 
#nav ul li a:active {
	color: #326ea1;
}
#nav ul li#current a {	
	background: #DBDBDB;		
}

/* Main Column */
.three-col #main {
	margin: 10px 190px 0 200px;
}
.two-col #main {
	margin: 10px 5px 0 200px;
}

#main h1 {
	margin: 10px 10px 0 10px;
	font: normal 1.8em Georgia, "Times New Roman", Times, serif;
	color: #444;
	padding: 15px 0 2px 0px; 		
	border-bottom: 1px solid #dadada;
}

/* Sidebar */	
#sidebar {
	float: left;
	width: 195px;	
	margin-top: 10px;	
}	
/* right column */
#rightcolumn {
	float: right;
	width: 190px;
	margin-top: 10px;	
}
#rightcolumn h1, #sidebar h1 {
	margin: 10px 5px 0 5px;
	padding: 5px 5px; 
	font: bold 1.4em 'Trebuchet MS', Tahoma, Sans-serif;
	color: #444; 		
}

/* sidemenu */
ul.sidemenu {
	text-align: left;
	margin: 7px 8px 8px 10px; padding: 0;			
	border-top: 1px solid #E5E5E5;
	text-decoration: none;	
}
ul.sidemenu li {
	list-style: none;
	padding: 4px 0 4px 5px;
	margin: 0 2px;		
	border-bottom: 1px solid #E5E5E5;
}
* html body ul.sidemenu li {
	height: 1%;
}
ul.sidemenu li a {
	text-decoration: none;	
	color: #326ea1; 
	border: none;		
}
ul.sidemenu li a:hover {	
	color: #383d44;
	border: none;
}

/* footer-wrap */
#footer-wrap {
	clear: both;
	width: 910px;
	font-size: 95%;
	padding: 20px 0;
	text-align: left;	
	background: url(uploads/images/MarketPlace/footer-bottom.jpg) no-repeat center bottom;	
}
#footer-wrap a {
	text-decoration: none;
	color: #666666;
	font-weight: bold;
}
#footer-wrap a:hover {
	color: #000;	
}
#footer-wrap p {
	padding: 10px 0;
}
#footer-wrap h2 {
	color: #666666;
	margin: 0;
	padding: 0 10px; 
}

/* footer */
#footer {
	clear: both;
	color: #666;	
	margin: 0 auto 10px auto; 
	width: 850px;
	padding: 5px 0;
	text-align: center;
	background: #F8F7F7;
	border-top: 1px solid #F2F2F2;	
}

/* alignment classes */
.float-left  { float: left; }
.float-right { float: right; }
.align-left  { text-align: left; }
.align-right { text-align: right; }

/* display and additional classes */
.clear { clear: both; }

/* post */
.post-by {
	font-size: .95em;	
	padding-top: 0;
}
.post-footer {
	background: #F5F5F5;
	padding: 5px; margin: 20px 10px 0 10px;	
	font-size: 95%;	
	color: #666666;	
}
.post-footer .date{
	margin: 0 10px 0 5px;	
}
.post-footer a.comments {
	margin: 0 10px 0 5px;	
}
.post-footer a.readmore {
	margin: 0 10px 0 5px;	
}

Posted: **Sun Jul 20, 2008 1:22 pm**

Ok it was much easier than I thought. I had to insert this code on the place that i wanted it:

Code: Select all

{cms_selflink page="Katten"}

The odd thing was that a number didnot work.
The only thing I want to do now is to get a bullet before the name "Katten", just as I have with the other links.
How do I do that?

Posted: **Sun Jul 20, 2008 1:51 pm**

I have a global content block that shows the 4 other links. These have the bullets before the link. But when I try and add the Katten en Honden link and give it an internal link it messes those links up.
Is there another way to get this done?

Posted: **Sun Jul 20, 2008 1:58 pm**

Ok solved it. I added the full url for the intermal pages to the global content block for the sidebar and that did it.
I don't know if this is how it is standard done, but it works.

CMS Made Simple Forums

[Solved] Sidebar menu?

[Solved] Sidebar menu?

Re: Sidebar menu?

Re: Sidebar menu?

Re: Sidebar menu?

Re: Sidebar menu?

Re: Sidebar menu?