responsive template for cmsms as simplex ?

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
giapippo
Forum Members
Forum Members
Posts: 176
Joined: Tue Feb 28, 2012 1:24 pm

responsive template for cmsms as simplex ?

Post by giapippo »

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
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12709
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

Re: responsive template for cmsms as simplex ?

Post by Dr.CSS »

Do a google search and you will find lots of free responsive templates, then incorporate it into CMSMS...
giapippo
Forum Members
Forum Members
Posts: 176
Joined: Tue Feb 28, 2012 1:24 pm

Re: responsive template for cmsms as simplex ?

Post by giapippo »

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
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12709
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

Re: responsive template for cmsms as simplex ?

Post by Dr.CSS »

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...
giapippo
Forum Members
Forum Members
Posts: 176
Joined: Tue Feb 28, 2012 1:24 pm

Re: responsive template for cmsms as simplex ?

Post by giapippo »

ok thanks
i try ;D

giapippo
User avatar
paulbaker
Dev Team Member
Dev Team Member
Posts: 1465
Joined: Sat Apr 18, 2009 10:09 pm
Location: Maidenhead, UK
Contact:

Re: responsive template for cmsms as simplex ?

Post by paulbaker »

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?"
giapippo
Forum Members
Forum Members
Posts: 176
Joined: Tue Feb 28, 2012 1:24 pm

Re: responsive template for cmsms as simplex ?

Post by giapippo »

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.8) 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.8) 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.8); 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; }
}
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12709
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

Re: responsive template for cmsms as simplex ?

Post by Dr.CSS »

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
Post Reply

Return to “Layout and Design (CSS & HTML)”