DLRG Design by Alex Langer

A.Langer · Jun 6th 2017

Ich versuche gerade meinen Blog im DLRG Design zu gestallten, weiß aber nicht so ganz wie. Klar Gelb, Weiß und Rot. Aber wie umsetzen das es nicht lw aussieht und trz sich an das coperatet Design vom DLRG anlehnt? Jemand ne Idee oder tipps wie man es umsetzen kann?

Coperatet Design DLRG

Devon · Jun 6th 2017

Kommt drauf an. Willst du ein eigenes Design oder eine Vorlage (wie z.B. das WoltLab Design) nutzen?

A.Langer · Jun 6th 2017

Es soll nen eigenes sein, es muss nicht das Woltlab template sein. Allerdings kenne ich mich im Template verändern nicht so gut aus

Fabi · Jun 6th 2017

In Templates kannst du in der Regel auch reines html rein schreiben.

Aber fang doch erstmal mit den Farben und so an, bevor du dich dem Layout widmest? Wie gut sind dein deine css Kenntnisse?

A.Langer · Jun 6th 2017

Man kann ja schon mal schauen https://alexlanger.de habe schon angefangen heute Nacht

Devon · Jun 6th 2017

Mal ein paar Tipps:

Oberes Menü in einem Verlauf setzen (am besten grau / weiß).
Seitenbreite verkleinern (wirkt dann besser wenn es als Blog-Design dienen soll)
Schrift - und Linkfarben sowie Buttons farblich aber auch von der Form her anpassen

Ansonsten kannst du zum Verschönen mit dem Ultimate CSS Gradient Generator ein paar Verläufe erstellen.

/EDIT: Hast mich übrigens auf eine Idee gebracht

A.Langer · Jun 6th 2017

Was für eine Idee? Bin halt selber im DLRG und daher würde ich es cool finden wenn mein Blog sich ein wenig dem anpassen würde

Devon · Jun 6th 2017

Bin nicht im DLRG aber in einer anderen Hilfsorganisation und würde dafür passend eben einen Stil entwickeln.

A.Langer · Jun 6th 2017

Welche den DRK, THW oder FFW?

Devon · Jun 6th 2017

FFW

A.Langer · Jun 7th 2017

*Frage*

Ich versuch gerade die Suche nach den Farben der DLRG zu gestalten, ich würde gerne um das Suchfeld selber das Dunkle gelb (FCD719) machen aber wen ich mit boder-style arbeite passiert nichts

CSS

.pageHeaderSearchInputContainer .pageHeaderSearchInput:focus, .pageHeaderSearchInputContainer .pageHeaderSearchInput:hover, .pageHeaderSearchInputContainer .pageHeaderSearchInput, .pageHeaderSearchInputContainer .pageHeaderSearchInput {
    border-style: solid 5px #FCD719;    
}

Spreche sicher die falschen Selektoren an

Auswahl_009.png

Auswahl_010.png

Devon · Jun 7th 2017

CSS

.pageHeaderSearchInputContainer .pageHeaderSearchInput {
    background-color: #FCD719;
}

Damit ist das ganze Suchfeld in deinem Farbton.

A.Langer · Jun 7th 2017

Ich gebe euch mal das ganze CSS was ich bisher so zusammen geschrieben habe (die ganzen Farbverläufe sind kopiert, also von der Seite die mir Devon gelinkt hatte)

CSS: Alex DLRG

.admin {
    background-color: #D95521;
    color: #fff;
}    
.mainMenu .boxMenu > li:hover > a {
    color: #FE0000;
}
.pageHeaderSearchInputContainer .pageHeaderSearchInputButton:hover, .pageHeaderSearchInputContainer .pageHeaderSearchInputButton, .pageHeaderSearchInputContainer .pageHeaderSearchType > .button:hover, .pageHeaderSearchInputContainer .pageHeaderSearchType > .button, .pageHeaderSearchInputContainer .pageHeaderSearchType.dropdownOpen > .button {
    background-color:#FCF3C8;
    color: #C0C0C0;
}
.pageHeaderSearchInputContainer .pageHeaderSearchInput {
    background-color: #FCD719;
}
.pageHeaderPanel, .pageHeaderContainer {
    background: #ffffff;
    background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%);
    background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
    background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
}
.pageHeaderPanel > .layoutBoundary {
    background: #ffffff;
    background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%);
    background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
    background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
}
.mainMenu .boxMenu > .boxMenuHasChildren:hover .boxMenuDepth1 {
    background: #ffffff;
    background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%);
    background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
    background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
}
.pageNavigation {
    background: rgb(254,252,234);
    background: -moz-linear-gradient(top,  rgba(254,252,234,1) 0%, rgba(241,218,54,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%);
    background: linear-gradient(to bottom,  rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 );
}
.boxesContentTop .boxTitle, .boxesContentBottom .boxTitle {
    color: #D95521;
}
.section .section > .sectionHeader, .section .section > .sectionTitle {
    background-color: #FCD719;
    padding: 10px;
    color: #FF0000;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-repeat: no-repeat;
    background-position: right;
    background-image: url(https://alexlanger.de/images/dlrg/einsatz.png);
}
dl:not(.plain) > dt:not(:empty) {
    color: #FF0000;
}
dl:not(.plain) > dd {
    color: rgba(000,000,000,0.5);
}

Display More

Admin ist das Badget damit es zu den Farben passt. Vllt kann das Chaos wer von euch so ordnen das es richtig ist und alles zusammen passt? Ich bin da iwie nicht so der hellste drinnen xD

Quote from Devon
CSS
.pageHeaderSearchInputContainer .pageHeaderSearchInput {
    background-color: #FCD719;
}
Damit ist das ganze Suchfeld in deinem Farbton.

Wie du siehst habe ich es drinnen, iwie ändert es bei mir aber nichts

bx19 · Jun 7th 2017

Wenn Farben nicht übernommen werden setze ich immer ein !important dahinter ein.

Fabi · Jun 7th 2017

Oder mal den cache leeren...

A.Langer · Jun 8th 2017

hilft nicht Fabi Cache is leer und trz ist es net komplett #FCD719

Fabi · Jun 8th 2017

Code

@include screen-md-up {
    .pageHeaderSearchInputContainer {
        padding: 5px;
        background-color: #FCD719;
    }
}

.pageHeaderSearchInputContainer .pageHeaderSearchInput {
    background-color: #fff;
}

Unbenannt.PNG

A.Langer · Jun 8th 2017

Danke dir (Y)

Devon · Jul 31st 2017

Quote from Devon

FFW

Das macht übrigens schon gute Fortschritte

A.Langer · Aug 2nd 2017

Quote from Devon

Das macht übrigens schon gute Fortschritte

Magst zeigen?