Responsive Template - UnderTheBridge

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

Moderator: mikey

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

Responsive Template - UnderTheBridge

Post by lck » Sun Feb 21, 2016 7:06 pm

Neue Version ist online und downloadbar.

Änderungen:
- CSS-Akkordeon-Menü ersetzt durch ein jQuery-Akkordeon-Menü zwecks besserer Browserkompatibilität
- Bug behoben, der bei einer bestimmten Link-Konstellation im Menulevel2 - nur im CSS-Akkordeon-Menü - auftrat (Viewport kleiner 499px).
- Außerdem gab es Probleme mit dem mobilen Browser "Dolphin mit aktivierten Jetpack" bei der korrekten Darstellung des CSS-Akkordeon-Menüs.

Leider wurde dies bei vorangegangenen Tests nicht erkannt, bzw. ist dieser Fehler in der Template-Demo nicht aufgetreten. Ich empfehle ein Update auf die neueste Version. Sorry für die Umstände.

Das Template konnte nicht mit allen Browsern, Geräten und Systemen getestet werden! Daher die Bitte, testet das Template vor einem produktiven Einsatz ausgiebig.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

wbs
Posts: 122
Joined: Sun Apr 02, 2017 8:05 am

Re: Responsive Template - UnderTheBridge

Post by wbs » Wed Apr 05, 2017 12:38 pm

Ich hätte den Titel gerne am oberen Rand vom Menü und rechts gefloatet. Wie kann ich den Titel runterverschieben, ohne dass er bei kleinerer Höhe ins Menü rutscht?

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

Re: Responsive Template - UnderTheBridge

Post by lck » Wed Apr 05, 2017 2:12 pm

stylesheet.css (* geändert)

Code: Select all

.tpllck_head {
    background-color: #486C88;
    background: url(images/bg.jpg) 50% 0;
    -webkit-background-size: cover;
    background-size: cover;
    /* height: 50%; */ /* geändert */
    /* height: 50vh; */ /* geändert */
    padding: .5em 0;
    width: 100%;
} 

Code: Select all

.tpllck_header {
    /* background: url(images/header.jpg) no-repeat #2F606D; */
    border: 0px solid red;
    font-size: 1.8em;
    font-weight: 700;
    margin: 8rem auto 1rem;
    max-width: 85%; /* geändert */
    padding: 0;
}

Code: Select all

.tpllck_header h1 {
    color: #fff;
    font: italic bold 200% Georgia, serif;
    letter-spacing: .1em;
    margin: 0;
    padding: 0;
    text-shadow: 0 0 10px #000;
    text-transform: uppercase;
    text-align: right; /* geändert */
}
Eventuell sind dann noch Anpassungen für kleinere Viewports nötig.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

wbs
Posts: 122
Joined: Sun Apr 02, 2017 8:05 am

Re: Responsive Template - UnderTheBridge

Post by wbs » Wed Apr 05, 2017 3:04 pm

Danke, ich hatte aber:

Code: Select all

.tpllck_head {
    background-color: #486C88;
    background: url(images/bg.jpg) 50% 0;
    -webkit-background-size: cover;
    background-size: cover;
    height: 80%; */ /* geändert */
    height: 80vh; */ /* geändert */
    padding: .5em 0;
    width: 100%;
} 
So erstreckt sich mein größeres Backgroundbild genau so weit nach unten, dass das Menü noch am untersten Rand klickbar ist. Mit weniger vheight wird das Bild abgeschnitten. Kann ich das irgendwie anders machen?

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

Re: Responsive Template - UnderTheBridge

Post by lck » Wed Apr 05, 2017 6:01 pm

Dann probiere mal das, ob es so für dich passt. An der Höhe und den Abständen kannst du ja noch schrauben.

Code: Select all

.tpllck_head {
    background-color: #486C88;
    background: url(images/bg.jpg) 50% 0;
    -webkit-background-size: cover;
    background-size: cover;
    /* height: 50%; */
    /* height: 50vh; */
    padding: .5em 0;
    width: 100%;
}

#tpllck_header_box {
    margin: 0 auto;
    text-align: right;
    width: 85%;
    display: table;
    height: 70vh;
}

.tpllck_header {
    /* background: url(images/header.jpg) no-repeat #2F606D; */
    border: 0px solid red;
    font-size: 1.8em;
    font-weight: 700;
    margin: 0;
    /* max-width: 1170px; */
    padding: 0;
    display: table-cell;
    vertical-align: bottom;
} 
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

wbs
Posts: 122
Joined: Sun Apr 02, 2017 8:05 am

Re: Responsive Template - UnderTheBridge

Post by wbs » Thu Apr 06, 2017 3:19 am

Genau so passt es mir, danke!

Was ich noch fragen wollte: Gibt es eine Möglichkeit, im Menü einen Anker zu setzen, dass man bei einem Klick auf das Menü gleich im Content landet? Wenn ich runtergescrollt habe, bleib ich im Inhalt, trotz H1-Wechsels. Wie fixiere ich, dass ich beim Klick auf Menü im Content lande?

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

Re: Responsive Template - UnderTheBridge

Post by lck » Thu Apr 06, 2017 9:27 am

wbs wrote:Was ich noch fragen wollte: Gibt es eine Möglichkeit, im Menü einen Anker zu setzen, dass man bei einem Klick auf das Menü gleich im Content landet? Wenn ich runtergescrollt habe, bleib ich im Inhalt, trotz H1-Wechsels. Wie fixiere ich, dass ich beim Klick auf Menü im Content lande?
Ich weiß nicht, ob ich dich richtig verstanden habe. Eventuell entspricht diese Antwort deiner Frage.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

wbs
Posts: 122
Joined: Sun Apr 02, 2017 8:05 am

Re: Responsive Template - UnderTheBridge

Post by wbs » Thu Apr 06, 2017 1:24 pm

Ja, aber ich will nicht ganz nach oben sondern auf die Höhe der Überschrift eins, damit man nicht auf den Content runterscrollen muss, weil mein Headerbg über den ganzen Bildschimr geht.

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Responsive Template - UnderTheBridge

Post by cmb » Thu Apr 06, 2017 1:45 pm

wbs wrote:Ja, aber ich will nicht ganz nach oben sondern auf die Höhe der Überschrift eins, damit man nicht auf den Content runterscrollen muss, weil mein Headerbg über den ganzen Bildschimr geht.
Ich finde es immer bedenklich, wenn diese Möglichkeit angefragt wird. Wenn der Header nicht so wichtig ist, dass man ihn bei Site-interner Navigation quasi überspringt, warum ist er dann überhaupt ein Header (und nicht z.B. ein Footer), oder warum ist er so groß?

Wenn es aber unbedingt sein soll, dann ändere diese zwei Zeilen zu:

Code: Select all

        $x = '#start';
        $x .= $this->shallOpenInNewWindow($i) ? '" target="_blank' : '';
        return a($this->ta[$i], $x);
und füge im Template an der gewünschten Stelle id="start" ein.
Christoph M. Becker – Plugins for CMSimple_XH

wbs
Posts: 122
Joined: Sun Apr 02, 2017 8:05 am

Re: Responsive Template - UnderTheBridge

Post by wbs » Thu Apr 06, 2017 2:13 pm

Es ist halt ein Foto vom ganzen Team, da reicht's wenn man ihn auf der Startseite sieht. Wie so ein Onepagetemplate, nur dass es kein Onepagetemplate ist.

Post Reply