OnePage-Template "op_metro02" (responsive)

Please post the URLs to pages, where you've made a CMSimple template available for download

Moderator: mikey

Post Reply
lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

OnePage-Template "op_metro02" (responsive)

Post by lck » Mon Mar 09, 2015 9:56 am

OnePage - Template with fixed Bottom-Main-Navigation (only menulevel1) and prepared Side-Dot-Navigation.

[ external image ]

Tested with Google Chrome 39, Chrome Toggle device mode, IE11, Opera 12.17, Opera 26.0, Firefox 35, Opera Mobile Emulator.

Full Demo, Info and download

Enjoy,
Ludwig
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

bca
Posts: 293
Joined: Tue Sep 15, 2009 4:49 pm

Re: OnePage-Template "op_metro02" (responsive)

Post by bca » Tue Mar 10, 2015 9:41 am

Nice

rombs
Posts: 77
Joined: Mon May 26, 2008 7:03 am
Location: Switzerland

Re: OnePage-Template "op_metro02" (responsive)

Post by rombs » Mon Nov 02, 2015 2:03 pm

Hi, nice template, great plugin!

I try to fix the backgroundimage in CSS with

Code: Select all

.tpllck_nav {
    background: url(images/bg_nav.jpg) 50% no-repeat #486C88;
        background-attachment:fixed;
and then to make the content-background 50% transparent.

Code: Select all

div.onepage_page:nth-child(odd) {
    background-color: #CDE8FF;
        opacity: .5;
Goal: overflow backgroungimage with content and visable Nav on bottom.

Result:
- backgroundimage ist fix;
- content ist transparent over Nav;
but:
- content ist not transparent over backgroundimage;
- Nav ist overflow with content and behind the transparent content;

I don't have any further ideas. thanks for light in darkness...
Grüsse aus der Schweiz
Rolf

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: OnePage-Template "op_metro02" (responsive)

Post by lck » Tue Nov 03, 2015 12:25 pm

Change:

Code: Select all

.tpllck_nav {
    /* background: url(images/bg_nav.jpg) 50% no-repeat #486C88; */
    /* background-size: cover; */
    min-height: 100vh;
    position: relative;
    z-index: 100;
}

Code: Select all

div.onepage_page:nth-child(odd) {
    background-color: rgba(205, 232, 255, 0.5);
}

Code: Select all

div.onepage_page:nth-child(even) {
    background-color: rgba(227, 242, 255, 0.5);
}
Add:

Code: Select all

#tpllck_body {
    /* background-color: #eee; */
    background: url(images/bg_nav.jpg) 50% no-repeat fixed #eee; /* add this line */
    background-size: cover; /* add this line */
}
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Post Reply