CMS Made Simple Forums

hallo !!

where can i find some simple template responsive for cmsms ?

i'm using simplex but i nees another theme for other site

thanks

bye
giapippo

Do a google search and you will find lots of free responsive templates, then incorporate it into CMSMS...

hallo

this template

http://www.egrappler.com/free-responsiv ... -onepager/

is very fine but i think is impossible to convert in cmsms with my few experience with this cms

bye
giapippo

Copy HTML into new template, replace menu links with {menu}, replace content with {content}, replace any other Content spots with new content blocks if needed or use GCB like footer for the footer, etc., etc., copy CSS into new style sheets, attach them to template, upload JS to uploads/js folder then change paths in template, etc. etc...

ok thanks
i try

giapippo

This video is worth a look. It uses an old version of CMSMS but the principles haven't changed:
http://www.youtube.com/watch?v=T0g9WkCwO7s
"How to port free template to CMS Made Simple?"

ok but i have some problem

for example the menu and submenu

the example site is

http://www.gianlucacompagno.com/sviluppo/

but the submenu link don't work

what i can do ?

thanks for help

this is the original template
http://chocotemplates.com/demo/?template=simple


----------------------------------------------------
template

<!-- top-nav -->
<nav class="top-nav">
<div class="shell">
{menu}
</div>
</nav>
<!-- end of top-nav -->


-------------------------------------------------------

Style sheet



* { margin: 0; padding: 0; outline: 0; }

body, html { height: 100%; }

body {
font-size: 12px;
line-height: 22px;
font-family: arial, sans-serif;
color: #828282;
background: url(images/body.png) repeat 0 0;
min-width: 980px;
}

/*font-family: 'Ubuntu', sans-serif;*/

a { color: #067aa7; text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }
a img { border: 0; }
a.view { background: url(images/bullet.png) no-repeat 0 10px; padding-left: 8px; font-size: 10px; float: right; }

article, aside, details, footer, header, menu, nav, section { display: block; }
input, textarea, select { font-size: 12px; font-family: arial, sans-serif; }
textarea { overflow: auto; }

.cl { display: block; height: 0; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; }
.notext { font-size: 0; line-height: 0; text-indent: -4000px; }
.left, .alignleft { float: left; display: inline; }
.right, .alignright { float: right; display: inline; }

.shell { width: 980px; margin: 0 auto; }

.top-nav .shell { position: relative; }
.top-nav { background: #b6dde7; height: 59px; }
.top-nav ul { list-style: none; list-style-position: outside; font-family: 'Ubuntu', sans-serif; font-size: 16px; text-transform: uppercase; line-height: 58px; font-weight: 700; }
.top-nav ul li { float: left; padding: 0 0 0 0; border-right: 1px solid #dbeef3; }
.top-nav ul li.active { border-right: 0; }
.top-nav ul li a { color: #239cc5; float: left; padding: 0 34px; text-shadow: rgba(255,255,255,0. 0px 1px 0px; }
.top-nav ul li span { float: left; }
.top-nav ul li a:hover,
.top-nav ul li.active a { color: #00719d; text-decoration: none; background: #c8e6ed; }
.top-nav ul li.active a { background: #c8e6ed url(images/active-nav-border.png) no-repeat right 0; }
.top-nav ul li.active span { background: url(images/active-nav-border.png) no-repeat 0 0; padding-left: 2px; }
.top-nav span.top-nav-shadow { background: url(images/top-nav-shadow.png) no-repeat 0 0; width: 959px; height: 7px; position: absolute; top: 59px; left: 50%; margin-left: -480px; }
.top-nav a.nav-btn { display: none; }
#header { background: url(images/header.png) repeat-x 0 0; height: 285px; }

.header-inner { position: relative; background: url(images/header-cnt.png) no-repeat center 0; }

.header-cnt #logo { width: 397px; font-size: 0; line-height: 0; }
.header-cnt #logo a { height: 134px; background: url(images/logo.png) no-repeat 0 0; text-indent: -4000px; display: block; }
.header-cnt { width: 422px; padding-top: 30px; }
.header-cnt h2 { font-size: 74px; line-height: 83px; color: #fff; text-shadow: rgba(0,0,0,0.5) 0px 1px 2px; font-weight: bolder; }
.header-cnt h3 { font-size: 40px; padding-bottom: 8px; line-height: 50px; font-weight: normal; color: #fff; text-shadow: rgba(0,0,0,0.5) 0px 1px 2px; font-family: tahoma, arial, helvetica, serif; }
.header-cnt p { color: #fff; text-shadow: rgba(0,0,0,0.5) 0px 1px 2px; padding-bottom: 10px; }
.header-cnt a.blue-btn { background: url(images/blue-btn.png) no-repeat 0 -75px; position: relative; bottom: -30px; z-index: 100; width: 198px; height: 70px; text-align: center; line-height: 56px; display: block; color: #fff; text-shadow: rgba(0,0,0,0.5) 0px 1px 1px; font-size: 16px; font-family: 'Ubuntu', sans-serif; font-weight: 700; }
.header-cnt a.blue-btn:hover { text-decoration: none; background-position: 0 0px; }

.slider-holder { float: right; width: 495px; height: 293px; background: url(images/slider.png) no-repeat 0 0; position: absolute; top: 7px; right: -19px; padding: 34px 44px; z-index: 1000;}
.slider-holder .flexslider { width: 497px; height: 288px; position: relative; }
.slider-holder .flexslider ul.slides { list-style: none; list-style-position: outside; position: relative; }
.slider-holder .flexslider ul.slides li { width: 497px; height: 288px; float: left; }
.slider-holder .flexslider ul.slides li img { width: 497px; height: 288px; }

.main { padding: 66px 0 50px; position: relative; height: 100%; }
.main span.shadow-top { background: url(images/main-shadow.png) repeat-x 0 0; top: 0; left: 0; position: absolute; width: 100%; height: 46px; z-index: 20; display: block; }
.main h2 { font-size: 28px; color: #2d2d2d; line-height: 28px; font-family: 'Ubuntu', sans-serif; font-weight: 500; padding-bottom: 12px; }
.main h3 { font-size: 20px; color: #2d2d2d; line-height: 22px; font-family: 'Ubuntu', sans-serif; font-weight: 500; padding-bottom: 8px; }
.main section { background: url(images/section-shadow.png) no-repeat 0 bottom; padding-top: 40px; padding-bottom: 23px; }
.main section:last-of-type { background: transparent; }

.main .testimonial { text-align: center; padding-right: 88px; padding-left: 88px; }
.main .testimonial p { padding-bottom: 10px; }
.main .testimonial p strong { font-size: 28px; font-family: georgia, serif; position: relative; top: 10px; left: -5px; }

.main .content { width: 615px; float: left; }
.main .content ul { list-style: none; list-style-position: outside; padding-top: 8px; }
.main .content ul li { padding-left: 8px; background: url(images/bullet.png) no-repeat 0 9px; padding-bottom: 5px; }
.main .content ul li a { text-decoration: underline; }
.main .content ul li a:hover { text-decoration: none; }
.main .content img.alignleft { margin-right: 22px; }
.main .content .cnt { overflow: hidden; height: 100%; }
.main section.blog { padding-bottom: 60px; }

.main .sidebar { width: 282px; float: right; }
.main .sidebar ul { list-style: none; list-style-position: outside; }
.main .sidebar ul li { position: relative; padding-left: 84px; background: url(images/sidebar-list-border.png) no-repeat 0 bottom; padding-bottom: 15px; margin-bottom: -13px; min-height: 72px; }
.main .sidebar ul li .img-holder { position: absolute; top: 6px; left: 0px; width: 66px; height: 48px; padding: 2px; border: 1px solid #d7d7d6; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; }
.main .sidebar ul li img { width: 66px; height: 48px; }
.main .sidebar ul li .mobile { font-style: normal; display: none; }
.main .sidebar ul li a { color: #828282; }
.main .sidebar ul li a:hover { text-decoration: none; color: #666; }
.main .sidebar ul li p { padding-bottom: 7px; }
.main .sidebar ul li span { font-size: 10px; color: #c0c0c0; display: block; }
.main .sidebar .widget ul li.last { background: transparent; }

.main .cols { padding-bottom: px; }
.main .cols a.view { margin-right: 16px; position: absolute; bottom: 0; right: 45px; }
.main .cols .col { width: 292px; float: left; background: url(images/col-separator.png) no-repeat right 0; padding-right: 45px; margin-right: 12px; padding-bottom: 16px; position: relative; }
.main .cols .col-cnt { padding-top: 7px; height: 100%; overflow: hidden }
.main .cols .col img.alignleft { margin-right: 7px; }
.main .cols .col.last { width: 280px; padding-right: 0; margin-right: 0; background: transparent; }

html, body { height: 100%; }
#wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -286px; }
#footer, #footer-push { height: 286px; }
#footer span.shadow-bottom { background: url(images/main-shadow-bottom.png) repeat-x 0 0; top: -46px; left: 0; position: absolute; width: 100%; height: 46px; z-index: 20; display: block; }

#footer { border-top: 1px solid #fff; position: relative; height: 285px; }
.footer-cols { background: url(images/footer-cols.png) repeat-x 0 0; padding: 26px 0; }
.footer-cols .col { float: left; width: 226px; padding-right: 24px; }
.footer-cols .col.last { padding-right: 0; }
.footer-cols h3 { color: #fff; text-shadow: rgba(0,0,0,0.6) 0px 1px 2px; font-size: 21px; line-height: 28px; font-family: 'Ubuntu', sans-serif; font-weight: 500; padding-bottom: 12px; }
.footer-cols h3 a { color: #fff; text-shadow: rgba(0,0,0,0.6) 0px 1px 2px; }
.footer-cols h3 a:hover { text-decoration: none; color: #bdbdbd; }
.footer-cols p { color: #fff; }
.footer-cols p a { color: #fff; }
.footer-cols ul { list-style: none; list-style-position: outside; }
.footer-cols ul li { color: #fff; padding-bottom: 6px; padding-left: 9px; background: url(images/bullet-footer-col.png) no-repeat 0 8px; }
.footer-cols ul li a { color: #fff; }

.footer-bottom { background: #b3dce6; height: 14px; padding: 22px 0 18px 0; }
.footer-nav { float: left; font-size: 11px; line-height: 11px; }
.footer-nav ul { list-style: none; list-style-position: outside; }
.footer-nav ul li { float: left; padding: 0 10px; background: url(images/footer-nav-border.png) no-repeat 0 0; }
.footer-nav ul li.first { background: transparent; padding-left: 0; }
.footer-nav ul a { color: #6b848a; }
.footer-bottom p.copy { float: right; color: #6b848a; line-height: 11px; }
.footer-bottom p.copy span { padding: 0 9px; }
.footer-bottom p.copy a { text-decoration: underline; }
.footer-bottom p.copy a:hover { text-decoration: none; }

/* #Media Queries
================================================== */

/* ipad portrait */
@media only screen and ( min-width: 768px) and ( max-width: 980px ) {
body { min-width: 768px; }
.shell { max-width: 768px; }

#header { background: url(images/header-tablet.png) repeat-x 0 0; height: 257px; }
.header-cnt #logo { width: 277px; font-size: 0; line-height: 0; }
.header-cnt #logo a { height: 93px; background: url(images/logo-tablet.png) no-repeat 0 0; text-indent: -4000px; display: block; }

.top-nav span.top-nav-shadow { display: none; }
.top-nav ul { font-size: 14px; }
.top-nav ul li a { color: #239cc5; float: left; padding: 0 24px; text-shadow: rgba(255,255,255,0. 0px 1px 0px; }
.top-nav ul li.last a { padding-right: 34px; }

.header-inner { width: 728px; padding: 0 20px; }

.header-cnt { width: 295px; }
.header-cnt h2 { font-size: 56px; line-height: 60px; }
.header-cnt h3 { font-size: 30px; line-height: 32px; }
.header-cnt p .desktop { display: none; }
.header-cnt p .mobile { display: block; }
.header-cnt a.blue-btn { bottom: -60px; }
.slider-holder { width: 382px !important; height: 260px !important; background: url(images/slider-tablet.png) no-repeat 0 0; padding: 30px 35px 0; top: 30px; right: 0; }
.slider-holder .flexslider { width: 382px; height: 220px; }
.slider-holder .flexslider ul.slides li { width: 100%; height: 100%; }
.slider-holder .flexslider ul.slides li img { width: 100%; height: 100%; }

.container { padding: 0 20px; width: 728px; }

.main section { background: url(images/tablet-section-shadow.png) no-repeat 0 bottom !important; }
.main section.blog { padding-bottom: 60px; }
.main section.blog { background: transparent !important; padding-bottom: 0; }
.main .cols { background: transparent !important; padding-bottom: 0; }
.main .cols .col { width: 232px; padding-right: 15px; margin-right: 0; background: transparent;}
.main .cols .col.last { padding-right: 0; width: 232px }
.main .cols .col img { float: none; display: block; margin: 0 auto 0 auto !important; }

.main .content { width: 100%; float: none; display: block; padding-bottom: 40px; }

.main .sidebar { width: 100%; float: none; display: block; }
.main .sidebar ul li { margin: 0 0 0 0; background: url(images/tablet-section-shadow.png) no-repeat center bottom; display: block; min-height: 70px; }
.main .sidebar ul li .mobile { display: inline; }
.main .sidebar a.view { margin-right: 20px; }

.footer-cols .shell { padding-left: 20px; padding-right: 20px; width: 728px; }
.footer-cols .col { width: 166px; padding-right: 20px; }
.footer-cols .col.last { padding-right: 0; }
.footer-bottom { height: 48px; line-height: 17px; }
.footer-bottom .footer-nav { float: none; display: block; padding-bottom: 16px; }
.footer-bottom p.copy { float: none; display: block; clear: both; }
.footer-bottom .shell { padding-left: 20px; width: 748px; }
}


@media only screen and ( max-width: 767px) {
body { min-width: 320px;}
.shell { max-width: 100%; }
.main { padding-top: 220px !important; margin-top: 0; }
a.view { background: url(images/bullet.png) no-repeat 0 8px; padding-left: 8px; font-size: 10px; float: right; }
#header { background: url(images/header-@2x.png) repeat-x 0 0; height: 218px; width: 100%; }

.header-cnt #logo { width: 280px; font-size: 0; line-height: 0; margin-bottom: 8px; }
.header-cnt #logo a { height: 94px; background: url(images/logo-@2x.png) no-repeat 0 0; text-indent: -4000px; display: block; }

.top-nav { position: relative; z-index: 1001; background: #fcfcff; height: 48px; margin: 7px; border: 1px solid #9ad0e2; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; }
.top-nav span.top-nav-shadow { display: none; }
.top-nav ul { display: none; font-size: 14px; position: absolute; width: 100%; top: 46px; left: -1px; line-height: 24px; padding: 0 0px 0px 0px; background: #fcfcff; border: 1px solid #9ad0e2; border-top: 0;
border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; -o-border-radius: 0 0 5px 5px; }
.top-nav ul li.active a { display: block; float: none; background: none; }
.top-nav ul li.active span { display: block; float: none; background: none; }
.top-nav ul li { display: block; float: none; padding: 15px 20px 15px 20px; background: url(images/tablet-section-shadow.png) no-repeat center top; }
.top-nav ul li a { display: block; float: none; padding: 0 0 0 0; }
.top-nav ul li span { float: none; }
.top-nav ul li a:hover { display: block; float: none; background: none; }
.top-nav ul li.last a { float: none; display: block; padding-right: 0; }
.top-nav ul li.last { padding-bottom: 10px }
.top-nav a.nav-btn { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; height: 48px; display: block; color: #239CC5; font-size: 14px; line-height: 48px; text-shadow: 0 1px 0 rgba(255, 255, 255,0.; font-family: 'Ubuntu',sans-serif; font-weight: 700; padding-left: 20px; }
.top-nav a.nav-btn:hover { text-decoration: none; }
.top-nav a.nav-btn span { background: url(images/nav-arr@2x.png) no-repeat center 20px; width: 40px; height: 48px; display: block; position: absolute; top: 0px; right: 0; z-index: 2000;}
.top-nav a.nav-btn span.active { background: url(images/nav-arr-active.png) no-repeat center 20px; }
.top-nav ul li.first { display: none; }

.header-inner { width: 100%; padding: 0 10px; background: transparent; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.header-cnt { width: 100%; height: 200px; padding-top: 20px; }
.header-cnt a.blue-btn { top: 426px; position: absolute; left: 50% !important; margin-left: -97px; }
.header-cnt a.blue-btn:hover { background-position: 0 0; text-decoration: none; color: #dbdbdb; }
.header-cnt h2 { font-size: 56px; line-height: 60px; }
.header-cnt h3 { font-size: 30px; line-height: 32px; }
.header-cnt p .desktop { display: inline; }
.header-cnt p .mobile { display: none; }

.slider-holder { width: 280px !important; height: 163px !important; background: url(images/slider-mobile.png) no-repeat 0 0; padding: 20px; top: 230px; left: 50%; margin-left: -160px; }
.slider-holder .flexslider { width: 280px; height: 163px; }
.slider-holder .flexslider ul.slides li { width: 100%; height: 100%; }
.slider-holder .flexslider ul.slides li img { width: 100%; height: 100%; }
.container { padding: 20px 10px 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.main .testimonial { padding-left: 0; padding-right: 0; }
.main span.shadow-top { top: 0px; left: 0; }
.main section { background: url(images/mobile-section-shadow.png) no-repeat center bottom !important; }
.main section.blog { background: transparent !important; padding-bottom: 0; }
.main .cols { background: transparent !important; padding-bottom: 0; }
.main .cols .col { width: 100%; padding-right: 0px; margin-right: 0; padding-bottom: 20px; background: url(images/mobile-section-shadow.png) no-repeat center bottom;}
.main .cols .col a.view { bottom: 20px; right: 10px; }
.main .cols .col.last { width: 100%; padding-right: 0px; }
.main .cols .col img { float: left; }
.main .content { width: 100%; float: none; display: block; padding-bottom: 40px; }
.main .content img.alignleft { margin-right: 8px; float: none; display: block; margin: 0 auto 30px auto; }
.main .content p { font-size: 11px; line-height: 18px; }
.main .content ul li { font-size: 11px; padding-bottom: 0; line-height: 18px; }
.main .content ul li { background-position: 0 7px !important; display: block; }

.main .sidebar { width: 100%; float: none; display: block; padding-right: 0; }
.main .sidebar ul li { margin: 0 0 0 0; background: url(images/mobile-section-shadow.png) no-repeat center bottom; display: block; min-height: 70px; }
.main .sidebar ul li .mobile { display: inline; }
.main .sidebar a.view { margin-right: 20px; }

.footer-cols .shell { padding-left: 20px; padding-right: 20px; width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.footer-cols .col { width: 100%; display: block; padding-right: 0; }
.footer-cols .col ul li { padding-right: 0; }
.footer-cols .col .col-cnt { display: none; }
.footer-cols .col.last { padding-right: 0; }
.footer-bottom { height: 48px; line-height: 17px; }
.footer-bottom .footer-nav { float: none; display: block; text-align: center; padding-bottom: 16px; font-size: 10px; }
.footer-bottom .footer-nav ul li { padding: 0 2px 0 4px; float: none; display: inline; background-position: 0 2px; }
.footer-bottom p.copy { float: none; display: block; text-align: center; clear: both; font-size: 10px; }
.footer-bottom .shell { width: 100%; }
}

@media only screen and ( max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) {
.slider-holder { background: url(images/slider-mobile@2x.png) no-repeat 0 0; -webkit-background-size: 320px 202px; -moz-background-size: 320px 202px; background-size: 320px 202px; }
.main section,
.main .cols .col,
.main .sidebar ul li { margin: 0 0 0 0; background: url(images/mobile-section-shadow@2x.png) no-repeat center bottom; -webkit-background-size: 299px 14px; -moz-background-size: 299px 14px; background-size: 299px 14px; }
}

The code you posted is not what is in the page source around the menu, but you may want to check your HTML...

http://validator.w3.org/check?verbose=1 ... viluppo%2F