Einen Stil für das WBB 4 erstellen (Teil 4 User Panel, Header, Logobereich und Hauptmenü)

  • Als erstes noch mal eine Übersicht was bereits in den CSS Bereich eingetragen wurde im 3. Teil (CSS für Body und Content):

    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. }


    In diesem Teil wollen wir uns mit den Bereichen "User Panel, Header, Logo und Hauptmenü" beschäftigen.

    Fangen wir mit dem UserPanel an, das ist die Leiste die in den Standard Stilen ganz oben zu finden ist und unseren Nicknamen und das Eingabefeld für die Suche beinhaltet.

    447 mal gelesen