Einen Stil für das WBB 4 erstellen (Teil 3 CSS für Body und Content)

  • Mit das wichtigste um die Übersicht zu behalten ist, das man eine gewisse Ordnung von Anfang an einführt und auch beibehält, so kann man später immer wieder leicht Änderungen vornehmen ohne lange suchen zu müssen. Alles was mit /* beginnt und mit */ endet wird als Kommentar behandelt und nicht interpretiert, so hat man die Möglichkeit sich eine Übersichtliche CSS Datei zu erstellen. Wir beginnen erst einmal mit reinen CSS Angaben, später werden wir noch LESS mit hinzunehmen.

    Hier mal ein Beispiel wie ich gerne an die Sache heran gehe :

    Brainfuck-Quellcode

    1. /*Overall----------Sachen wie Body und HTML*/
    2. /*Header----------Der Kopfbereich*/
    3. /*----------userPanel----------Das Benutzerpanel*/
    4. /*----------logo----------Der Bereich um das Logo*/
    5. /*----------mainMenu----------Das Hauptmenü*/
    6. /*Content----------Der Bereich in der Mitte*/
    7. /*----------navigationHeader----------Der Kopfbereich des Content Bereiches*/
    8. /*----------content----------Der Bereich links mit den Inhalten*/
    9. /*----------sidebar----------Die schmälere Spalte rechts*/
    10. /*----------navigationFooter----------Der Fussbereich des Content Bereiches*/
    11. /*Footer----------Der Fussbereich der Seite*/
    12. /*Dashboard----------Spezielle Einträge für das Dashboard*/
    13. /*Forum----------Spezielle Einträge für das Forum*/
    14. /*Buttons----------Die Angaben für das Aussehen der Schaltflächen (Buttons)*/

    Wir haben somit also schon einmal ein Grundgerüst angelegt und können dieses nun mit CSS Angaben füllen. Das Grundgerüst sieht noch ein wenig Wirr aus, das ändert sich aber mit dem Einfügen der verschiedenen CSS Angaben.

    Fangen wir mit dem Hintergrund der gesamten Seite an, diesen wollen wir mit einer Grafik ausfüllen das dieser wie auf dem Screenshot aussieht.



    Wie man sehen kann ist der Bereich unter dem Mauszeiger nun mit einer Grafik gefüllt und dazu nutzen wir folgenden Code :

    Spoiler anzeigen

    Quellcode

    1. html, body {
    2. background-image: url(../images/new/page_background.jpg); /*Pfad zur eingebunden Hintergrundgrafik*/
    3. background-repeat: reapeat -x-y; /*Angabe wie die Grafik wiederholt werden soll*/
    4. background-attachment:fixed; /*Angabe das die Grafik nicht mit scrollt*/
    5. }


    Der Code im einzelnen :
    • html, body sind die benötigten CSS Angaben um den gewünschten Bereich anzusprechen
    • background-image: url(../images/new/page_background.jpg); ist der benötigte CSS Code um eine Grafik einzubinden, denkt daran das euer Ordner wie im ersten Teil angemerkt im Pfad wcf/images zu finden ist !
    • background-repeat: repeat -x-y; benötigen wir um die eingebundene Grafik in der Horizontalen und in der Senkrechten zu wiederholen, brauchen wir das nicht geben wir no-repeat an.
    • background-attachment:fixed; mit der Angabe fixed wird die Hintergrundgrafik fixiert und scrollt nicht mit der Seite mit.
    Wie man auch oben im Screenshot erkennen kann habe ich den Bereich für den Inhalt und die Sidebar auch schon mit Grafiken versehen, der Code dafür sieht wie folgt aus :

    Spoiler anzeigen

    Brainfuck-Quellcode

    1. /*----------content----------Der Bereich links mit den Inhalten*/
    2. #main > div > div > .content {
    3. background-image: url(../images/new/background2.jpg); /*Pfad zur eingebunden Hintergrundgrafik*/
    4. background-repeat: reapeat -x-y; /*Angabe wie die Grafik wiederholt werden soll*/
    5. }
    6. /*----------sidebar----------Die schmalere Spalte rechts*/
    7. .sidebar {
    8. background-image: url(../images/new/background_sidebar.jpg); /*Pfad zur eingebunden Hintergrundgrafik*/
    9. background-repeat: reapeat -x-y; /*Angabe wie die Grafik wiederholt werden soll*/
    10. }
    11. #main > div > div > .sidebar > span > .collapsibleButton {
    12. background-image: url(../images/new/background_sidebar.jpg); /*Pfad zur eingebunden Hintergrundgrafik*/
    13. }


    Mit #main > div > div > .content sprechen wir den linken Bereich an der fast Weiß ist, mit .sidebar sprechen wir die rechte schmale Spalte an die wir im folgenden Sidebar nennen denn das ist deren Name.
    Mit #main > div > div > .sidebar > span > .collapsibleButton sprechen wir das kleine Feld links an der Sidebar an die durch einen Pfeil anzeigt in welche Richtung wir mit einem Klick darauf die Sidebar bewegen. Mit einem Klick klappen wir die Sidebar ein oder aus.

    Im nächsten Screenshot kann man sehen wie die Leiste unter dem Hauptmenü und dem Footer des Inhaltsbereiches grafisch gestaltet wurden, hier habe ich aber auf Grafiken verzichtet und anstelle dieser auf CSS3 Code zurück gegriffen.
    Mit CSS3 wurde es möglich einen Farbverlauf in CSS Code einbinden zu können, so minimieren wir Ladezeiten, denn Code ist schneller interpretiert als Bilder geladen. Eine gute Hilfe ist hierbei z.B. Ultimate CSS Gradient Generator der von den ColorZilla Machern stammt. ColorZilla ist ein AddOn für den Firefox Browser und ihr findet es hier --> ColorZilla. Mit dem Gradient Generator könnt ihr entweder vorgefertigte Presets verwenden bzw. diese umstricken oder auch von Grafiken via Import den gewünschten CSS Code erstellen. Diesen braucht ihr dann nur kopieren und in eure CSS Datei einfügen, ganz so wie im unteren Screenshot zu sehen.



    Der Code dazu sieht wie folgt aus :

    Spoiler anzeigen

    Brainfuck-Quellcode

    1. /*----------navigationHeader----------Der Kopfbereich des Content Bereiches*/
    2. .navigationHeader {
    3. background: rgb(201,201,201); /* Old browsers */
    4. background: -moz-linear-gradient(top, rgba(201,201,201,1) 0%, rgba(202,202,202,1) 3%, rgba(200,200,200,1) 7%, rgba(172,172,172,1) 48%, rgba(141,141,141,1) 52%, rgba(175,175,175,1) 93%, rgba(184,184,184,1) 100%); /* FF3.6+ */
    5. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(201,201,201,1)), color-stop(3%,rgba(202,202,202,1)), color-stop(7%,rgba(200,200,200,1)), color-stop(48%,rgba(172,172,172,1)), color-stop(52%,rgba(141,141,141,1)), color-stop(93%,rgba(175,175,175,1)), color-stop(100%,rgba(184,184,184,1))); /* Chrome,Safari4+ */
    6. background: -webkit-linear-gradient(top, rgba(201,201,201,1) 0%,rgba(202,202,202,1) 3%,rgba(200,200,200,1) 7%,rgba(172,172,172,1) 48%,rgba(141,141,141,1) 52%,rgba(175,175,175,1) 93%,rgba(184,184,184,1) 100%); /* Chrome10+,Safari5.1+ */
    7. background: -o-linear-gradient(top, rgba(201,201,201,1) 0%,rgba(202,202,202,1) 3%,rgba(200,200,200,1) 7%,rgba(172,172,172,1) 48%,rgba(141,141,141,1) 52%,rgba(175,175,175,1) 93%,rgba(184,184,184,1) 100%); /* Opera 11.10+ */
    8. background: -ms-linear-gradient(top, rgba(201,201,201,1) 0%,rgba(202,202,202,1) 3%,rgba(200,200,200,1) 7%,rgba(172,172,172,1) 48%,rgba(141,141,141,1) 52%,rgba(175,175,175,1) 93%,rgba(184,184,184,1) 100%); /* IE10+ */
    9. background: linear-gradient(to bottom, rgba(201,201,201,1) 0%,rgba(202,202,202,1) 3%,rgba(200,200,200,1) 7%,rgba(172,172,172,1) 48%,rgba(141,141,141,1) 52%,rgba(175,175,175,1) 93%,rgba(184,184,184,1) 100%); /* W3C */
    10. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9c9c9', endColorstr='#b8b8b8',GradientType=0 ); /* IE6-9 */
    11. }

    das war die obere Leiste unter dem Hauptmenü und so sieht der Code für die untere Leiste aus :

    Spoiler anzeigen

    Brainfuck-Quellcode

    1. /*----------navigationFooter----------Der Fussbereich des Content Bereiches*/
    2. .navigationFooter {
    3. background: rgb(201,201,201); /* Old browsers */
    4. background: -moz-linear-gradient(top, rgba(201,201,201,1) 0%, rgba(202,202,202,1) 3%, rgba(200,200,200,1) 7%, rgba(172,172,172,1) 48%, rgba(141,141,141,1) 52%, rgba(175,175,175,1) 93%, rgba(184,184,184,1) 100%); /* FF3.6+ */
    5. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(201,201,201,1)), color-stop(3%,rgba(202,202,202,1)), color-stop(7%,rgba(200,200,200,1)), color-stop(48%,rgba(172,172,172,1)), color-stop(52%,rgba(141,141,141,1)), color-stop(93%,rgba(175,175,175,1)), color-stop(100%,rgba(184,184,184,1))); /* Chrome,Safari4+ */
    6. background: -webkit-linear-gradient(top, rgba(201,201,201,1) 0%,rgba(202,202,202,1) 3%,rgba(200,200,200,1) 7%,rgba(172,172,172,1) 48%,rgba(141,141,141,1) 52%,rgba(175,175,175,1) 93%,rgba(184,184,184,1) 100%); /* Chrome10+,Safari5.1+ */
    7. background: -o-linear-gradient(top, rgba(201,201,201,1) 0%,rgba(202,202,202,1) 3%,rgba(200,200,200,1) 7%,rgba(172,172,172,1) 48%,rgba(141,141,141,1) 52%,rgba(175,175,175,1) 93%,rgba(184,184,184,1) 100%); /* Opera 11.10+ */
    8. background: -ms-linear-gradient(top, rgba(201,201,201,1) 0%,rgba(202,202,202,1) 3%,rgba(200,200,200,1) 7%,rgba(172,172,172,1) 48%,rgba(141,141,141,1) 52%,rgba(175,175,175,1) 93%,rgba(184,184,184,1) 100%); /* IE10+ */
    9. background: linear-gradient(to bottom, rgba(201,201,201,1) 0%,rgba(202,202,202,1) 3%,rgba(200,200,200,1) 7%,rgba(172,172,172,1) 48%,rgba(141,141,141,1) 52%,rgba(175,175,175,1) 93%,rgba(184,184,184,1) 100%); /* W3C */
    10. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9c9c9', endColorstr='#b8b8b8',GradientType=0 ); /* IE6-9 */
    11. }

    Im gesamten sieht unsere individuelle CSS Datei mittlerweile so aus :

    Spoiler anzeigen

    Brainfuck-Quellcode

    1. /*Overall----------Sachen wie Body und HTML*/
    2. html, body {
    3. background-image: url(../images/new/page_background.jpg); /*Pfad zur eingebunden Hintergrundgrafik*/
    4. background-repeat: reapeat -x-y; /*Angabe wie die Grafik wiederholt werden soll*/
    5. background-attachment:fixed; /*Angabe das die Grafik nicht mit scrollt*/
    6. }
    7. /*Header----------Der Kopfbereich*/
    8. /*----------userPanel----------Das Benutzerpanel*/
    9. /*----------logo----------Der Bereich um das Logo*/
    10. /*----------mainMenu----------Das Hauptmenü*/
    11. /*Content----------Der Bereich in der Mitte*/
    12. /*----------navigationHeader----------Der Kopfbereich des Content Bereiches*/
    13. .navigationHeader {
    14. background: rgb(201,201,201); /* Old browsers */
    15. background: -moz-linear-gradient(top, rgba(201,201,201,1) 0%, rgba(202,202,202,1) 3%, rgba(200,200,200,1) 7%, rgba(172,172,172,1) 48%, rgba(141,141,141,1) 52%, rgba(175,175,175,1) 93%, rgba(184,184,184,1) 100%); /* FF3.6+ */
    16. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(201,201,201,1)), color-stop(3%,rgba(202,202,202,1)), color-stop(7%,rgba(200,200,200,1)), color-stop(48%,rgba(172,172,172,1)), color-stop(52%,rgba(141,141,141,1)), color-stop(93%,rgba(175,175,175,1)), color-stop(100%,rgba(184,184,184,1))); /* Chrome,Safari4+ */
    17. background: -webkit-linear-gradient(top, rgba(201,201,201,1) 0%,rgba(202,202,202,1) 3%,rgba(200,200,200,1) 7%,rgba(172,172,172,1) 48%,rgba(141,141,141,1) 52%,rgba(175,175,175,1) 93%,rgba(184,184,184,1) 100%); /* Chrome10+,Safari5.1+ */
    18. background: -o-linear-gradient(top, rgba(201,201,201,1) 0%,rgba(202,202,202,1) 3%,rgba(200,200,200,1) 7%,rgba(172,172,172,1) 48%,rgba(141,141,141,1) 52%,rgba(175,175,175,1) 93%,rgba(184,184,184,1) 100%); /* Opera 11.10+ */
    19. background: -ms-linear-gradient(top, rgba(201,201,201,1) 0%,rgba(202,202,202,1) 3%,rgba(200,200,200,1) 7%,rgba(172,172,172,1) 48%,rgba(141,141,141,1) 52%,rgba(175,175,175,1) 93%,rgba(184,184,184,1) 100%); /* IE10+ */
    20. background: linear-gradient(to bottom, rgba(201,201,201,1) 0%,rgba(202,202,202,1) 3%,rgba(200,200,200,1) 7%,rgba(172,172,172,1) 48%,rgba(141,141,141,1) 52%,rgba(175,175,175,1) 93%,rgba(184,184,184,1) 100%); /* W3C */
    21. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9c9c9', endColorstr='#b8b8b8',GradientType=0 ); /* IE6-9 */
    22. }
    23. /*----------content----------Der Bereich links mit den Inhalten*/
    24. #main > div > div > .content {
    25. background-image: url(../images/new/background2.jpg); /*Pfad zur eingebunden Hintergrundgrafik*/
    26. background-repeat: reapeat -x-y; /*Angabe wie die Grafik wiederholt werden soll*/
    27. }
    28. /*----------sidebar----------Die schmalere Spalte rechts*/
    29. .sidebar {
    30. background-image: url(../images/new/background_sidebar.jpg); /*Pfad zur eingebunden Hintergrundgrafik*/
    31. background-repeat: reapeat -x-y; /*Angabe wie die Grafik wiederholt werden soll*/
    32. }
    33. #main > div > div > .sidebar > span > .collapsibleButton {
    34. background-image: url(../images/new/background_sidebar.jpg); /*Pfad zur eingebunden Hintergrundgrafik*/
    35. }
    36. /*----------navigationFooter----------Der Fussbereich des Content Bereiches*/
    37. .navigationFooter {
    38. background: rgb(201,201,201); /* Old browsers */
    39. background: -moz-linear-gradient(top, rgba(201,201,201,1) 0%, rgba(202,202,202,1) 3%, rgba(200,200,200,1) 7%, rgba(172,172,172,1) 48%, rgba(141,141,141,1) 52%, rgba(175,175,175,1) 93%, rgba(184,184,184,1) 100%); /* FF3.6+ */
    40. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(201,201,201,1)), color-stop(3%,rgba(202,202,202,1)), color-stop(7%,rgba(200,200,200,1)), color-stop(48%,rgba(172,172,172,1)), color-stop(52%,rgba(141,141,141,1)), color-stop(93%,rgba(175,175,175,1)), color-stop(100%,rgba(184,184,184,1))); /* Chrome,Safari4+ */
    41. background: -webkit-linear-gradient(top, rgba(201,201,201,1) 0%,rgba(202,202,202,1) 3%,rgba(200,200,200,1) 7%,rgba(172,172,172,1) 48%,rgba(141,141,141,1) 52%,rgba(175,175,175,1) 93%,rgba(184,184,184,1) 100%); /* Chrome10+,Safari5.1+ */
    42. background: -o-linear-gradient(top, rgba(201,201,201,1) 0%,rgba(202,202,202,1) 3%,rgba(200,200,200,1) 7%,rgba(172,172,172,1) 48%,rgba(141,141,141,1) 52%,rgba(175,175,175,1) 93%,rgba(184,184,184,1) 100%); /* Opera 11.10+ */
    43. background: -ms-linear-gradient(top, rgba(201,201,201,1) 0%,rgba(202,202,202,1) 3%,rgba(200,200,200,1) 7%,rgba(172,172,172,1) 48%,rgba(141,141,141,1) 52%,rgba(175,175,175,1) 93%,rgba(184,184,184,1) 100%); /* IE10+ */
    44. background: linear-gradient(to bottom, rgba(201,201,201,1) 0%,rgba(202,202,202,1) 3%,rgba(200,200,200,1) 7%,rgba(172,172,172,1) 48%,rgba(141,141,141,1) 52%,rgba(175,175,175,1) 93%,rgba(184,184,184,1) 100%); /* W3C */
    45. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9c9c9', endColorstr='#b8b8b8',GradientType=0 ); /* IE6-9 */
    46. }
    47. /*Footer----------Der Fussbereich der Seite*/
    48. /*Dashboard----------Spezielle Einträge für das Dashboard*/
    49. /*Forum----------Spezielle Einträge für das Forum*/
    50. /*Buttons----------Die Angaben für das Aussehen der Schaltflächen (Buttons)*/

    Jetzt sind natürlich die Links im Navigation Header und Footer farblich noch anzupassen, das machen wir wie folgt :

    Spoiler anzeigen

    Brainfuck-Quellcode

    1. /*----------navigationHeader----------Der Kopfbereich des Content Bereiches*/
    2. .navigationHeader {
    3. background: rgb(201,201,201); /* Old browsers */
    4. background: -moz-linear-gradient(top, rgba(201,201,201,1) 0%, rgba(202,202,202,1) 3%, rgba(200,200,200,1) 7%, rgba(172,172,172,1) 48%, rgba(141,141,141,1) 52%, rgba(175,175,175,1) 93%, rgba(184,184,184,1) 100%); /* FF3.6+ */
    5. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(201,201,201,1)), color-stop(3%,rgba(202,202,202,1)), color-stop(7%,rgba(200,200,200,1)), color-stop(48%,rgba(172,172,172,1)), color-stop(52%,rgba(141,141,141,1)), color-stop(93%,rgba(175,175,175,1)), color-stop(100%,rgba(184,184,184,1))); /* Chrome,Safari4+ */
    6. background: -webkit-linear-gradient(top, rgba(201,201,201,1) 0%,rgba(202,202,202,1) 3%,rgba(200,200,200,1) 7%,rgba(172,172,172,1) 48%,rgba(141,141,141,1) 52%,rgba(175,175,175,1) 93%,rgba(184,184,184,1) 100%); /* Chrome10+,Safari5.1+ */
    7. background: -o-linear-gradient(top, rgba(201,201,201,1) 0%,rgba(202,202,202,1) 3%,rgba(200,200,200,1) 7%,rgba(172,172,172,1) 48%,rgba(141,141,141,1) 52%,rgba(175,175,175,1) 93%,rgba(184,184,184,1) 100%); /* Opera 11.10+ */
    8. background: -ms-linear-gradient(top, rgba(201,201,201,1) 0%,rgba(202,202,202,1) 3%,rgba(200,200,200,1) 7%,rgba(172,172,172,1) 48%,rgba(141,141,141,1) 52%,rgba(175,175,175,1) 93%,rgba(184,184,184,1) 100%); /* IE10+ */
    9. background: linear-gradient(to bottom, rgba(201,201,201,1) 0%,rgba(202,202,202,1) 3%,rgba(200,200,200,1) 7%,rgba(172,172,172,1) 48%,rgba(141,141,141,1) 52%,rgba(175,175,175,1) 93%,rgba(184,184,184,1) 100%); /* W3C */
    10. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9c9c9', endColorstr='#b8b8b8',GradientType=0 ); /* IE6-9 */
    11. }
    12. .navigation > ul.navigationItems > li > a, .navigation > ul.navigationMenuItems > li > a {
    13. color: #FFFFFF;
    14. }
    15. .navigation > ul.navigationItems > li > a:hover, .navigation > ul.navigationMenuItems > li > a:hover {
    16. color: #0000FF;
    17. }
    18. .navigation > ul.navigationItems .icon, .navigation > ul.navigationMenuItems .icon, .navigation > ul.navigationIcons .icon {
    19. color: #FFFFFF;
    20. }
    21. .navigation > ul.navigationItems .icon:hover, .navigation > ul.navigationMenuItems .icon:hover, .navigation > ul.navigationIcons .icon:hover {
    22. color: #0000FF;
    23. }

    Um die Links im Navigation Header in einer anderen Farbe darzustellen benötigen wir diesen Code .navigation > ul.navigationItems > li > a, .navigation > ul.navigationMenuItems > li > a im Beispiel ist dies die Farbe Weiß.
    Um die Farbe der Links beim darüber fahren mit dem Mauszeiger zu ändern brauchen wir diesen Code .navigation > ul.navigationItems > li > a:hover, .navigation > ul.navigationMenuItems > li > a:hover im Beispiel die Farbe Blau.
    Für die Icons im Navigation Header benötigen wir den Code .navigation > ul.navigationItems .icon, .navigation > ul.navigationMenuItems .icon, .navigation > ul.navigationIcons .icon und beim darüber fahren .navigation > ul.navigationItems .icon:hover, .navigation > ul.navigationMenuItems .icon:hover, .navigation > ul.navigationIcons .icon:hover wobei diese im Normalen Zustand auch Weiß und beim darüber fahren auch in Blau dargestellt werden.

    Spoiler anzeigen

    Brainfuck-Quellcode

    1. /*----------navigationFooter----------Der Fussbereich des Content Bereiches*/
    2. .navigationFooter {
    3. background: rgb(201,201,201); /* Old browsers */
    4. background: -moz-linear-gradient(top, rgba(201,201,201,1) 0%, rgba(202,202,202,1) 3%, rgba(200,200,200,1) 7%, rgba(172,172,172,1) 48%, rgba(141,141,141,1) 52%, rgba(175,175,175,1) 93%, rgba(184,184,184,1) 100%); /* FF3.6+ */
    5. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(201,201,201,1)), color-stop(3%,rgba(202,202,202,1)), color-stop(7%,rgba(200,200,200,1)), color-stop(48%,rgba(172,172,172,1)), color-stop(52%,rgba(141,141,141,1)), color-stop(93%,rgba(175,175,175,1)), color-stop(100%,rgba(184,184,184,1))); /* Chrome,Safari4+ */
    6. background: -webkit-linear-gradient(top, rgba(201,201,201,1) 0%,rgba(202,202,202,1) 3%,rgba(200,200,200,1) 7%,rgba(172,172,172,1) 48%,rgba(141,141,141,1) 52%,rgba(175,175,175,1) 93%,rgba(184,184,184,1) 100%); /* Chrome10+,Safari5.1+ */
    7. background: -o-linear-gradient(top, rgba(201,201,201,1) 0%,rgba(202,202,202,1) 3%,rgba(200,200,200,1) 7%,rgba(172,172,172,1) 48%,rgba(141,141,141,1) 52%,rgba(175,175,175,1) 93%,rgba(184,184,184,1) 100%); /* Opera 11.10+ */
    8. background: -ms-linear-gradient(top, rgba(201,201,201,1) 0%,rgba(202,202,202,1) 3%,rgba(200,200,200,1) 7%,rgba(172,172,172,1) 48%,rgba(141,141,141,1) 52%,rgba(175,175,175,1) 93%,rgba(184,184,184,1) 100%); /* IE10+ */
    9. background: linear-gradient(to bottom, rgba(201,201,201,1) 0%,rgba(202,202,202,1) 3%,rgba(200,200,200,1) 7%,rgba(172,172,172,1) 48%,rgba(141,141,141,1) 52%,rgba(175,175,175,1) 93%,rgba(184,184,184,1) 100%); /* W3C */
    10. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9c9c9', endColorstr='#b8b8b8',GradientType=0 ); /* IE6-9 */
    11. }
    12. .navigation > ul.navigationItems > li > p {
    13. color: #FFFFFF;
    14. }

    Der Eintrag .navigation > ul.navigationItems > li > p bezieht sich auf Teile im Footer, daher setzen wir diesen Teil auch in den Footer, das betrifft aber nicht alles im Footer, die Links z.B. haben wir schon im Navigation Header mitbestimmt und brauchen dies im Navigation Footer nicht nochmals wiederholen.



    Man kann das ganze jetzt auch noch ein wenig mehr ausschmücken und den Text z.B. Fett darstellen und ihn mit einem Schatten versehen so wie unten im Screenshot zu sehen :



    Hier wird der Text nun Fett und mit Schatten dargestellt, zusätzlich wurde für den gesamten Inhaltsbereich ein Boxshadow eingefügt. Der Code wurde am Ende der Datei eingefügt und sieht wie folgt aus :

    Spoiler anzeigen
    /*Effekte----------Angaben für spezielle Effekte*/

    #main, .navigationHeader, .navigationFooter {
    -moz-box-shadow: 10px 10px 15px 0px #333;
    -webkit-box-shadow: 10px 10px 15px 0px #333;
    box-shadow: 10px 10px 15px 0px #333;
    }

    Hier wurden mehrere Bereiche zusammen gefasst denn das macht Sinn und lässt eure CSS Datei nicht unnötig anwachsen. Die gesamte CSS Datei sieht nun wie folgt aus :

    Spoiler anzeigen

    Brainfuck-Quellcode

    1. /*Overall----------Sachen wie Body und HTML*/
    2. html, body {
    3. background-image: url(../images/new/page_background.jpg); /*Pfad zur eingebunden Hintergrundgrafik*/
    4. background-repeat: reapeat -x-y; /*Angabe wie die Grafik wiederholt werden soll*/
    5. background-attachment:fixed; /*Angabe das die Grafik nicht mit scrollt*/
    6. }
    7. /*Header----------Der Kopfbereich*/
    8. /*----------userPanel----------Das Benutzerpanel*/
    9. /*----------logo----------Der Bereich um das Logo*/
    10. /*----------mainMenu----------Das Hauptmenü*/
    11. /*Content----------Der Bereich in der Mitte*/
    12. /*----------navigationHeader----------Der Kopfbereich des Content Bereiches*/
    13. .navigationHeader {
    14. background: rgb(201,201,201); /* Old browsers */
    15. background: -moz-linear-gradient(top, rgba(201,201,201,1) 0%, rgba(202,202,202,1) 3%, rgba(200,200,200,1) 7%, rgba(172,172,172,1) 48%, rgba(141,141,141,1) 52%, rgba(175,175,175,1) 93%, rgba(184,184,184,1) 100%); /* FF3.6+ */
    16. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(201,201,201,1)), color-stop(3%,rgba(202,202,202,1)), color-stop(7%,rgba(200,200,200,1)), color-stop(48%,rgba(172,172,172,1)), color-stop(52%,rgba(141,141,141,1)), color-stop(93%,rgba(175,175,175,1)), color-stop(100%,rgba(184,184,184,1))); /* Chrome,Safari4+ */
    17. background: -webkit-linear-gradient(top, rgba(201,201,201,1) 0%,rgba(202,202,202,1) 3%,rgba(200,200,200,1) 7%,rgba(172,172,172,1) 48%,rgba(141,141,141,1) 52%,rgba(175,175,175,1) 93%,rgba(184,184,184,1) 100%); /* Chrome10+,Safari5.1+ */
    18. background: -o-linear-gradient(top, rgba(201,201,201,1) 0%,rgba(202,202,202,1) 3%,rgba(200,200,200,1) 7%,rgba(172,172,172,1) 48%,rgba(141,141,141,1) 52%,rgba(175,175,175,1) 93%,rgba(184,184,184,1) 100%); /* Opera 11.10+ */
    19. background: -ms-linear-gradient(top, rgba(201,201,201,1) 0%,rgba(202,202,202,1) 3%,rgba(200,200,200,1) 7%,rgba(172,172,172,1) 48%,rgba(141,141,141,1) 52%,rgba(175,175,175,1) 93%,rgba(184,184,184,1) 100%); /* IE10+ */
    20. background: linear-gradient(to bottom, rgba(201,201,201,1) 0%,rgba(202,202,202,1) 3%,rgba(200,200,200,1) 7%,rgba(172,172,172,1) 48%,rgba(141,141,141,1) 52%,rgba(175,175,175,1) 93%,rgba(184,184,184,1) 100%); /* W3C */
    21. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9c9c9', endColorstr='#b8b8b8',GradientType=0 ); /* IE6-9 */
    22. }
    23. .navigation > ul.navigationItems > li > a, .navigation > ul.navigationMenuItems > li > a {
    24. color: #FFFFFF;
    25. font-weight:bold;
    26. text-shadow: -1px -1px 0px #333;
    27. filter: dropshadow(color=#333, offx=-1, offy=-1);
    28. }
    29. .navigation > ul.navigationItems > li > a:hover, .navigation > ul.navigationMenuItems > li > a:hover {
    30. color: #0000FF;
    31. }
    32. .navigation > ul.navigationItems .icon, .navigation > ul.navigationMenuItems .icon, .navigation > ul.navigationIcons .icon {
    33. color: #FFFFFF;
    34. text-shadow: -1px -1px 0px #333;
    35. filter: dropshadow(color=#333, offx=-1, offy=-1);
    36. }
    37. .navigation > ul.navigationItems .icon:hover, .navigation > ul.navigationMenuItems .icon:hover, .navigation > ul.navigationIcons .icon:hover {
    38. color: #0000FF;
    39. }
    40. /*----------content----------Der Bereich links mit den Inhalten*/
    41. #main > div > div > .content {
    42. background-image: url(../images/new/background2.jpg); /*Pfad zur eingebunden Hintergrundgrafik*/
    43. background-repeat: reapeat -x-y; /*Angabe wie die Grafik wiederholt werden soll*/
    44. border-left:1px solid #999;
    45. }
    46. #main {
    47. border-right:1px solid #999;
    48. }
    49. /*----------sidebar----------Die schmalere Spalte rechts*/
    50. .sidebar {
    51. background-image: url(../images/new/background_sidebar.jpg); /*Pfad zur eingebunden Hintergrundgrafik*/
    52. background-repeat: reapeat -x-y; /*Angabe wie die Grafik wiederholt werden soll*/
    53. }
    54. #main > div > div > .sidebar > span > .collapsibleButton {
    55. background-image: url(../images/new/background_sidebar.jpg); /*Pfad zur eingebunden Hintergrundgrafik*/
    56. }
    57. /*----------navigationFooter----------Der Fussbereich des Content Bereiches*/
    58. .navigationFooter {
    59. background: rgb(201,201,201); /* Old browsers */
    60. background: -moz-linear-gradient(top, rgba(201,201,201,1) 0%, rgba(202,202,202,1) 3%, rgba(200,200,200,1) 7%, rgba(172,172,172,1) 48%, rgba(141,141,141,1) 52%, rgba(175,175,175,1) 93%, rgba(184,184,184,1) 100%); /* FF3.6+ */
    61. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(201,201,201,1)), color-stop(3%,rgba(202,202,202,1)), color-stop(7%,rgba(200,200,200,1)), color-stop(48%,rgba(172,172,172,1)), color-stop(52%,rgba(141,141,141,1)), color-stop(93%,rgba(175,175,175,1)), color-stop(100%,rgba(184,184,184,1))); /* Chrome,Safari4+ */
    62. background: -webkit-linear-gradient(top, rgba(201,201,201,1) 0%,rgba(202,202,202,1) 3%,rgba(200,200,200,1) 7%,rgba(172,172,172,1) 48%,rgba(141,141,141,1) 52%,rgba(175,175,175,1) 93%,rgba(184,184,184,1) 100%); /* Chrome10+,Safari5.1+ */
    63. background: -o-linear-gradient(top, rgba(201,201,201,1) 0%,rgba(202,202,202,1) 3%,rgba(200,200,200,1) 7%,rgba(172,172,172,1) 48%,rgba(141,141,141,1) 52%,rgba(175,175,175,1) 93%,rgba(184,184,184,1) 100%); /* Opera 11.10+ */
    64. background: -ms-linear-gradient(top, rgba(201,201,201,1) 0%,rgba(202,202,202,1) 3%,rgba(200,200,200,1) 7%,rgba(172,172,172,1) 48%,rgba(141,141,141,1) 52%,rgba(175,175,175,1) 93%,rgba(184,184,184,1) 100%); /* IE10+ */
    65. background: linear-gradient(to bottom, rgba(201,201,201,1) 0%,rgba(202,202,202,1) 3%,rgba(200,200,200,1) 7%,rgba(172,172,172,1) 48%,rgba(141,141,141,1) 52%,rgba(175,175,175,1) 93%,rgba(184,184,184,1) 100%); /* W3C */
    66. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9c9c9', endColorstr='#b8b8b8',GradientType=0 ); /* IE6-9 */
    67. }
    68. .navigation > ul.navigationItems > li > p {
    69. color: #FFFFFF;
    70. font-weight:bold;
    71. text-shadow: -1px -1px 0px #333;
    72. filter: dropshadow(color=#333, offx=-1, offy=-1);
    73. }
    74. /*Footer----------Der Fussbereich der Seite*/
    75. /*Dashboard----------Spezielle Einträge für das Dashboard*/
    76. /*Forum----------Spezielle Einträge für das Forum*/
    77. html body#tplEntryAdd div#main.layoutFluid div div section#content.content form#messageContainer div.container fieldset dl.wide dd div#cke_text.cke_1 div.cke_inner div#cke_1_contents.cke_contents {
    78. height: 450px!important;
    79. }
    80. /*Buttons----------Die Angaben für das Aussehen der Schaltflächen (Buttons)*/
    81. /*Effekte----------Angaben für spezielle Effekte*/
    82. #main, .navigationHeader, .navigationFooter {
    83. -moz-box-shadow: 10px 10px 15px 0px #333;
    84. -webkit-box-shadow: 10px 10px 15px 0px #333;
    85. box-shadow: 10px 10px 15px 0px #333;
    86. }


    Schon haben wir mehr als 100 Zeilen Code und wir haben nur einen kleinen Teil unserer Seite gestaltet, im nächsten Teil gehen wir an das User Panel, den Header bzw. den Logobereich und an das Hauptmenü.

    13.854 mal gelesen