CMS Made Simple Forums

My template I'm using has the menu navigation on the right hand side.  This is a custom template that was ported over to CMSMS by Mark, so I thought I'd ask him about moving it to the left.  This was his response:

mark wrote: can we move this to a thread on the forum for others to learn from...

upper right corner is menu now did you change it since you wrote this note?

if you look in the HTML you will find some things hand coded like the

Important note

This could be the news Module, now it is in the Template

This template conforms to Section 508 and to W3C's WCAG 1.0, level Triple-A. The code is valid XHTML 1.1 and CSS (no warnings).
Alternate versions

Included in this template are the following example files:
- Main version
- No images version
- No CSS version
Regular links

- Red Cross
- Free templates
- Baygroove Music

not sure which thing you want moved.. but most of it is CSS styled to be left or right... like the sidebar has on your site float left.. it is pushing it close to the header and content, float right will center it in that space.. if you want just the menu on that side you will need to break it out of the side bar as in or whatever,,, now it is ...

href="http://www.infinitegeekonline.com/cms/i ... er-defined tags


this is for closing the menuwrapper, add another to close the sidebar

then add
Important note

etc. etc. etc.

- Baygroove Music

this is there already and will close the

  HTH

So, here's the link to what we're talking about.
http://www.infinitegeekonline.com/cms/index.php

And here's the section of the template we're talking about:


Site menu:
{cms_module module='menumanager' template='theme : andreas03'  }

Important note
This could be the news Module, now it is in the Template
This template conforms to Section 508 and to W3C's WCAG 1.0, level Triple-A. The code is valid XHTML 1.1 and CSS (no warnings).

Alternate versions
Included in this template are the following example files:

- Main version

- No images version

- No CSS version

Regular links
- Red Cross

- Free templates

- Baygroove Music


 


So I'd want to find the {sidebar} in the style sheet and move it to the left, right?
As for the menu above it . . . ?

#primary-nav {
list-style: none; 
padding: 0px;
width:150px;
        margin:3px 0px;
}
#primary-nav ul {
list-style: none;
margin: 0px;
padding: 0px;
        margin-right: 0px;
position: absolute;
top: 0;
right: 100%;
display: none;
}
#primary-nav li {
    margin-bottom: 3px;
position: relative;
}
#primary-nav li li{width:160px;
        margin-bottom: 0px;
        argin-right: 10px;
position: relative;
}
#primary-nav ul li li{
        margin-right: 0px;
        }
Do I simply change everything from right to left?

yes to all your questions.. if you want to make it a left handed site you can flip the top img. in an image software like paint.NET/Photoshop...
like this  http://www.multiintech.com/index.php?page=andreas03lft

I tried moving everything to the left, and nothing happened.  Well, somehting did happen, but it wasn't what I expected.  Now, the menus are still on the right, but they open to the right as well.  I think I missed a part.  Can you post that left handed template as well?

if you don't want to flip the picture you can try putting the sidebar in the template above the main content...
you will need to change the CSS to have all float:right as float:left and all float:left as float:right...
and yes i can packup the left handed template for you... soon

awesome, thank you!  I'll keep an eye out for it.

I can flip the picture, just doesn't seem like that's all there is to it.

WAIT!  I think I got it!  Maybe.

Now, the main body and the side bar are just too close.  Is the main body the "container" or is it "body" or "main" or what?

the most valuable tool i've found for working with layout/CSS is Firefox with the Web Developer extension. it lets you work on your CSS in real time, seeing how diff. margins, padding, width, and anything else you can do with CSS effect your page as you do it like i said real time. when i get what i want it's just a copy/paste into the stylesheet to make the changes stick...

#logo{
float:right;
width:240px;
margin:0 0 0 20px;
padding:0 0 25px 0;
background:#eee;
border:4px solid #dde;
text-align:center;
color:#555;
overflow:auto;
}
#main{background-color:#FFF;
float:right;
width:530px;
margin-left:20px;
padding:0;
}
#sidebar{
width:155px;
float:left;
margin-top:20px;
font-size:1em;
line-height:1.3em;
}

I will have to try that.  In the mean time, those values you gave me didn't seem to change anything.  Any ideas?

Well, nix that.  It worked in FireFox, but not in IE.  In both, I have a little TOO much spacing around everything, but in IE, the sidebar text and the main text are mashed right into each other.

For instance:

Yours=


Mine=



I've lost the shading, and the spacing.

here's the left template ... enjoy

[attachment deleted by admin]

OK, new template applied . . . still having issues.  I resized my logo image so it should fit.  And it does, but only in Firefox.  There's still an extra margin in IE for some reason.  Also, the section headers fromt eh original template are suddenly gone.

section headers are now added when you add content, you will see title boxes above the content boxes so you can title each box with out having to put it in the template, sort of a feature, the logo needs repeat: on-repeat in the CSS... what you doing making changes while i'm looking at it...    that was wierd.. looks better now

EDIT: making the main a little smaller might help IE...

oh yea i forgot to tell you there is an extention for Firfox that will render a page in IE in a new tab... makes it easier to see changes without having to fire up IE all the time...

what is block A ?

Block A was an attempt to get new articles to auto load into those areas so it'd be a like a preview of the newest articles.