Dunkler Forenstyle

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

  • Ist kein Meisterwerk und funktioniert nur im Nostale BB4 stil, da ich dadrauf aufgebaut habe.
    Alle zu überschreiben wäre sinnlos (und lokal fast unmöglich), dann könnte ich auch direkt ein komplettes Forendesign entwickeln. :D
    Es ist auch nicht alles perfekt, die Main Navigation habe ich noch nicht angepasst, da diese doch etwas komplexer ist und daher immer total doof aussieht wenn ichs versuche.
    Ach und ich brauch einen Zwischenpost, zeichenbegrenzung und so.

    CSS Source Code

    1. @namespace url(http://www.w3.org/1999/xhtml);
    3. @-moz-document domain("board.de.nostale.gameforge.com") {
    5. /* -- Variables -- */
    7. :root{
    9. /* Background-Color*/
    10. --body-bg-color: #0b0b0b; /* body */
    11. --main-bg-color: #121212; /* content area */
    12. --side-bg-color: #1c1c1c; /* side area + hover effect */
    13. --data-bg-color: #232323; /* Content-Data area */
    14. --note-bg-color: #ffffff; /* hover effect */
    16. /* Font-Color */
    17. --main-ft-color: #c0c0c0; /* headline + sublines */
    18. --text-ft-color: #888888; /* default text */
    19. --note-ft-color: #e44c2c; /* hover effect */
    20. --post-ft-color: #000000; /* Inputfield text */
    22. /* Border-Color */
    23. --main-br-color: #888888; /* default border */
    24. }
    26. /* -- General -- */
    28. /* text without definition - default color */
    29. body{
    30. color: var(--text-ft-color);
    31. text-shadow: none !important;
    32. }
    33. /* link without definition - main-color */
    34. a{
    35. color: var(--main-ft-color);
    36. }
    38. /* -- Main Areas -- */
    40. /* remove useless Border */
    41. #main{
    42. border-right: none;
    43. }
    44. /* bg color main area */
    45. #main > div > div > .content,
    46. #main > div > div > .sidebar,
    47. .navigationFooter,
    48. .navigationHeader{
    49. background-color: var(--main-bg-color);
    50. }
    52. /* -- Sidebar -- */
    54. /* Flat-Design sidebar */
    55. #main > div > div > .sidebar{
    56. border: none;
    57. box-shadow: none;
    58. border-radius: 0!important;
    59. }
    60. /* CollapsibleButton */
    61. #main > div > div > .sidebar > span > .collapsibleButton{
    62. background: var(--body-bg-color);
    63. border-color: var(--body-bg-color);
    64. }
    65. /* Headline */
    66. .sidebar fieldset > legend,
    67. .sidebar fieldset > legend > a{
    68. color: var(--main-ft-color);
    69. }
    70. /* Menu */
    71. .sidebar fieldset > nav ul > li > a{
    72. color: var(--main-ft-color);
    73. }
    74. /* Menu-Item active */
    75. .sidebar fieldset > nav ul > li.active{
    76. background: none;
    77. }
    78. .sidebar fieldset > nav ul > li.active > a{
    79. color: var(--note-ft-color);
    80. }
    81. /* Sidebar user without shadow */
    82. .sidebar fieldset > div > ul > li span{
    83. text-shadow: none !important;
    84. }
    85. /* Time */
    86. .sidebar .sidebarBoxHeadline > h3 time{
    87. color: var(--text-ft-color);
    88. }
    89. /* Quote */
    90. .quoteBox.container{
    91. background-color: var(--body-bg-color);
    92. }
    94. /* -- Sub Navigation -- */
    96. /* Flat-Design Nav-Items */
    97. .navigation > ul.navigationMenuItems{
    98. border: none;
    99. padding-bottom: 10px;
    100. }
    101. /* text|icon color */
    102. .navigation > ul.navigationMenuItems > li > a,
    103. .navigation > ul.navigationItems > li > a,
    104. .navigation > ul.navigationIcons .icon{
    105. color: var(--main-ft-color);
    106. }
    107. .navigation > ul.navigationItems > li > p,
    108. .navigation > ul.navigationItems .icon{
    109. color: var(--text-ft-color);
    110. }
    112. /* -- Breadcrumbs -- */
    114. /* Flat-Design Breadcrumbs */
    115. .breadcrumbs{
    116. border-radius: 0;
    117. border: none;
    118. }
    119. /* bg color */
    120. .breadcrumbs,
    121. .breadcrumbs > ul > li{
    122. background-color: var(--data-bg-color);
    123. }
    124. /* text|icon color */
    125. .breadcrumbs > ul > li > a,
    126. .breadcrumbs > ul > li:first-child > a::before{
    127. color: var(--main-ft-color);
    128. }
    129. /* Hover */
    130. .breadcrumbs > ul > li:hover > a{
    131. background: var(--side-bg-color);
    132. color: var(--note-ft-color);
    133. }
    134. /* Pointer without Hover */
    135. .breadcrumbs > ul > li:hover > .pointer > span{
    136. border-color: transparent transparent transparent var(--main-ft-color);
    137. }
    139. /* -- Dialog -- */
    141. /* Header|Footer bg color */
    142. .dialogTitlebar,
    143. .dialogContent .formSubmit{
    144. background-color: var(--side-bg-color);
    145. }
    146. /* content bg color */
    147. .dialogContent{
    148. background-color: var(--main-bg-color);
    149. }
    151. /* -- Content Tables -- */
    153. /* reset main areas */
    154. .tabularBox,
    155. .container{
    156. border-radius: 0;
    157. border: none;
    158. background: none;
    159. box-shadow: none;
    160. }
    161. /* listheader */
    162. .table th{
    163. background: var(--side-bg-color);
    164. border-bottom: 1px solid var(--main-ft-color);
    165. }
    166. /* default row background*/
    167. .table td,
    168. .table > tbody > tr:nth-child(2n) > td,
    169. .wbbBoardList .wbbBoardNode1{
    170. background-color: var(--data-bg-color);
    171. }
    172. /* hover effect */
    173. .table > tbody > tr:hover > td,
    174. .wbbBoardList .wbbBoard:hover{
    175. background: var(--side-bg-color) !important;
    176. }
    177. /* placeholder ? */
    178. .containerList > li:hover,
    179. .containerList > li:nth-child(2n){
    180. background: none;
    181. }
    182. /* DescriptionList font color */
    183. dl:not(.plain) > dt,
    184. dl:not(.plain) > dd > label,
    185. dl.statsDataList > dd{
    186. color: var(--text-ft-color);
    187. }
    188. /* CommentList Gaestebuch */
    189. .commentList > li:hover:not(.commentAdd),
    190. .commentList > li:hover:nth-child(2n):not(.commentAdd){
    191. background: none;
    192. }
    194. /* -- Dropdown Menu -- */
    196. /* default menu user interaction*/
    197. .interactiveDropdown{
    198. background-color: var(--side-bg-color);
    199. border: 1px solid var(--main-br-color);
    200. }
    201. /* menu content bg color */
    202. .interactiveDropdown > .interactiveDropdownItemsContainer > .interactiveDropdownItems > li,
    203. .interactiveDropdown > .interactiveDropdownItemsContainer > .interactiveDropdownItems > li:hover:not(.loading):not(.noItems){
    204. background-color: var(--main-bg-color);
    205. }
    206. /* Title */
    207. .interactiveDropdown{
    208. color: var(--main-ft-color);
    209. }
    210. /* default menu reactor-box properties*/
    211. .dropdownMenu{
    212. background-color: var(--body-bg-color);
    213. }
    214. /* link */
    215. .dropdownMenu li > a{
    216. color: var(--main-ft-color);
    217. }
    218. /* hover bg */
    219. .dropdownMenu li:hover:not(.dropdownDivider):not(.dropdownList):not(.dropdownText){
    220. background-color: var(--body-bg-color);
    221. }
    222. /* hover link */
    223. .dropdownMenu li > a:hover{
    224. color: var(--note-ft-color);
    225. }
    Display All
    Seite wird neu aufgesetzt
    es war einmal....     Tsuki tenshi QQ

  • Sami^^ wrote:

    Wie würde man denn so einen Code überhaupt implementieren? Oder wird das vom Boardpersonal gemacht? :o
    Also hab das wie die anderen mit den firefox addon stylish gemacht, dafür sind auch die ersten 2 zeilen quasi.

    Source Code

    1. /* color picker */
    2. .redactor-dropdown-box-fontcolor > li.redactorColorPallet > a{
    3. border-color: var(--body-bg-color);
    4. }
    5. .redactor-dropdown-box-fontcolor > li.redactorColorPallet:hover{
    6. background-color: var(--body-bg-color) !important;
    7. }
    9. /* -- Headline + Text -- */
    11. /* Box-Headlines */
    12. .boxHeadline > h1,
    13. .boxHeadline > h1 a,
    14. .boxSubHeadline > h2,
    15. .boxSubHeadline > h2 a,
    16. .containerHeadline > h3{
    17. color: var(--main-ft-color);
    18. }
    19. /* Box-Text */
    20. .boxHeadline > p{
    21. color: var(--text-ft-color);
    22. }
    23. /* Text without shadow */
    24. .usersOnlineInfoBox span {
    25. text-shadow: none !important;
    26. }
    27. /* Headline Properties */
    28. fieldset > legend{
    29. color: var(--main-ft-color);
    30. }
    32. /* -- Button -- */
    34. /* default button */
    35. .button,
    36. .button.active,
    37. .button.buttonPrimary,
    38. .contentNavigation > nav:not(.pageNavigation) > ul:not(.buttonGroup) > li:not(:last-child) > a,
    39. .tabMenu > ul > li > a,
    40. button:not([disabled]),
    41. button#previewButton,
    42. button.buttonPrimary:not([disabled]),
    43. input[type="submit"]:not([disabled]){
    44. box-shadow: none !important;
    45. border-radius: 0 !important;
    46. font-weight: normal !important;
    47. background: var(--data-bg-color);
    48. border-color: var(--main-br-color);
    49. color: var(--main-ft-color);
    50. }
    51. /* hover effect */
    52. .button:hover,
    53. .button.active:hover,
    54. .button.buttonPrimary:hover,
    55. .button:hover .icon,
    56. .contentNavigation > nav:not(.pageNavigation) > ul:not(.buttonGroup) > li:not(:last-child) > a:hover,
    57. .pageNavigation ul li:hover:not(.disabled) > a,
    58. button:hover:not([disabled]),
    59. button#previewButton:hover,
    60. button.buttonPrimary:hover:not([disabled]),
    61. input[type="submit"]:not([disabled]):hover{
    62. background: var(--side-bg-color);
    63. border-color: var(--main-br-color);
    64. color: var(--note-ft-color);
    65. }
    66. /* active */
    67. .button.active{
    68. background: var(--side-bg-color);
    69. color: var(--note-ft-color);
    70. }
    71. /* disabled Pagenavigation */
    72. .pageNavigation ul li.disabled{
    73. box-shadow: none;
    74. border-radius: 0 !important;
    75. background: var(--main-bg-color);
    76. border-color: var(--main-br-color);
    77. padding: 1px 0 2px 0;
    78. }
    79. /* Icon (Button) */
    80. .contentNavigation > nav:not(.pageNavigation) > ul:not(.buttonGroup) > li .button .icon{
    81. color: var(--main-ft-color);
    82. }
    83. /* Pagenavigation arrow */
    84. .pageNavigation ul li.skip > a span{
    85. padding: 2px 0 3px 0;
    86. }
    87. /* Tabmenu button hover */
    88. .tabMenu > ul > li:not(.ui-state-active) > a:hover,
    89. .tabMenu > ul > li.ui-state-active > a{
    90. background: var(--side-bg-color);
    91. border: 1px solid var(--main-br-color);
    92. color: var(--note-ft-color);
    93. }
    94. /* Tabmenu button active */
    95. .tabMenu > ul > li.ui-state-active > a{
    96. margin: 0;
    97. font-size: 1.1rem;
    98. }
    100. /* -- Inputfields -- */
    102. /* default Inputbox */
    103. input[type="text"],
    104. input[type="search"],
    105. input[type="date"],
    106. input[type="email"],
    107. input[type="number"],
    108. input[type="url"],
    109. input[type="password"],
    110. textarea{
    111. box-shadow: none !important;
    112. border: none !important;
    113. color: var(--post-ft-color);
    114. }
    115. /* hover effect */
    116. input[type="text"]:hover,
    117. input[type="search"]:hover,
    118. input[type="date"]:hover,
    119. input[type="email"]:hover,
    120. input[type="number"]:hover,
    121. input[type="url"]:hover,
    122. input[type="password"]:hover,
    123. textarea:hover,
    124. select[multiple]:hover{
    125. background-color: var(--note-bg-color);
    126. }
    127. /* default CodeBox */
    128. .codeBox > div{
    129. box-shadow: none;
    130. background-color: var(--body-bg-color);
    131. }
    132. /* active background */
    133. .codeBox > div > ol > li:target{
    134. background-color: var(--body-bg-color);
    135. }
    136. .codeBox.minimized > .codeBoxExpand{
    137. box-shadow: none;
    138. background-color: var(--body-bg-color);
    139. }
    141. /* -- Messages -- */
    143. /* default Message */
    144. .message{
    145. border-radius: 0;
    146. border: none;
    147. background: none;
    148. box-shadow: none;
    149. }
    150. /* content area */
    151. .message .messageContent{
    152. background-color: var(--data-bg-color);
    153. box-shadow: none !important;
    154. border-radius: 0 !important;
    155. }
    156. /* nth-child */
    157. li:nth-child(2n+1) .message .messageContent{
    158. background-color: var(--side-bg-color);
    159. }
    160. /* left border */
    161. .message.messageSidebarOrientationLeft .messageContent{
    162. border-left: none;
    163. }
    164. /* body text */
    165. .messageBody{
    166. color: var(--text-ft-color);
    167. }
    168. /* MessageBadge */
    169. .message .newMessageBadge,
    170. .message .newMessageBadge::before{
    171. background: var(--body-bg-color);
    172. border-color: var(--body-bg-color);
    173. }
    174. /* Headline */
    175. .message .messageContent .messageHeader .messageHeadline > h1{
    176. color: var(--main-ft-color);
    177. }
    178. /* Likes footer */
    179. .messageFooterNote{
    180. background: none;
    181. border-radius: 0;
    182. border-color: var(--main-br-color);
    183. border-left-width: 1px;
    184. color: var(--main-ft-color);
    185. }
    186. /* -- Redactor-Box -- */
    187. /* Toolbar */
    188. .redactor-toolbar{
    189. background-color: var(--data-bg-color);
    190. }
    191. .redactor-toolbar > li > a > i::before,
    192. .redactor-toolbar > li > a::before{
    193. color: var(--main-ft-color);
    194. }
    195. /* Hover */
    196. .redactor-toolbar > li > a:hover:not(.redactor-button-disabled),
    197. .redactor-toolbar > li > a.redactor-act,
    198. .redactor-toolbar > li > a.dropact{
    199. background-color: var(--side-bg-color);
    200. }
    201. .redactor-toolbar > li > a:hover:not(.redactor-button-disabled) > i:before,
    202. .redactor-toolbar > li > a:hover:not(.redactor-button-disabled):before,
    203. .redactor-toolbar > li > a.redactor-act:before,
    204. .redactor-toolbar > li > a.dropact:before{
    205. color: var(--note-ft-color);
    206. }
    207. /* Editor */
    208. .redactor-editor{
    209. background-color: var(--side-bg-color);
    210. box-shadow: none;
    211. }
    212. .redactor-editor .codeBox .redactorEditCodeBox{
    213. background: none;
    214. }
    215. .redactor-editor .codeBox .redactorEditCodeBox > div{
    216. color: var(--main-ft-color);
    217. }
    218. /* BBCode Textarea override */
    219. .redactor-box textarea,
    220. .redactor-box textarea:hover{
    221. background: var(--side-bg-color);
    222. color: var(--text-ft-color);
    223. }
    224. /* Navigation */
    225. .messageTabMenu > nav.messageTabMenuNavigation > ul,
    226. .messageTabMenu > div,
    227. .messageTabMenu > div > nav,
    228. .messageTabMenu > fieldset{
    229. background-color: var(--data-bg-color);
    230. }
    231. .messageTabMenu > div > nav ul li a{
    232. color: var(--main-ft-color);
    233. }
    234. .messageTabMenu > nav.messageTabMenuNavigation > ul > li > a{
    235. color: var(--main-ft-color);
    236. }
    237. .messageTabMenu > nav.messageTabMenuNavigation > ul > li.active > a,
    238. .messageTabMenu > nav.messageTabMenuNavigation > ul > li > a:hover{
    239. background: none;
    240. color: #88a825;
    241. }
    242. }
    Display All
    Das ist der Hauptcode erstmal, hab noch paar zusatzfunktionen, aber das kommt dann im nächsten wieder....xD
    Seite wird neu aufgesetzt
    es war einmal....     Tsuki tenshi QQ

  • SchwarzerBlitz wrote:

    okay was mach ich jetzt damit^^?
    Ich dachte Fear hat dich bereits aufgeklärt gehabt? D:
    Also im Firefox kannste dir das addon stylish installieren und dann gibts oben rechts das symbol dafür, dort klickste auf neuen style erstellen für "such dir was aus", dann kopierste mein code über den vorhandenen da drinnen und speicherst das ab. Dann musste es gegenbenenfalls noch aktivieren, wieder oben beim icon.
    (in chrome gibts glaube auch stylish, aber obs da genauso abläuft keine ahnung, musste halt mal lesen xD)

    Hab auch noch paar zusätze. Die müssen in die Hauptdefinition (also vor der letzen } klammer im hauptscript)
    1. Die Farben Border von Teamlern entfernen.

    CSS Source Code

    1. .message .messageContent{
    2. border: none !important;
    3. }

    2. Den kompletten hintergrund entfernen und den Header direkt mit (das Banner lass ich mal, sonst wird orli bestimmt böse)

    CSS Source Code

    1. body{
    2. background: var(--main-bg-color);
    3. }
    4. .logo{
    5. display: none;
    6. }
    7. .mainMenu{
    8. margin-top: 75px;
    9. }
    Die Hauptnavigation mach ich wie gesagt später noch
    Seite wird neu aufgesetzt
    es war einmal....     Tsuki tenshi QQ

  • Killerderneun wrote:

    Boa, da sist ja fast genauso umständlich wie vorher.
    Du verlangst also das ich ein komplettes Design erstelle, damit es in die Forensoftware übernommen werden könnte (weil das keiner macht), nur damit du es nicht so umständlich hast? o.ô

    Ach und hab grad gesehn das ich ein fehler drinnen habe, fügt mal noch das hinzu bitte

    CSS Source Code

    1. .dialogContent{
    2. color: var(--text-ft-color);
    3. }
    4. .wbbBoardList .wbbBoardNode2{
    5. background-color: var(--data-bg-color);
    6. }
    Seite wird neu aufgesetzt
    es war einmal....     Tsuki tenshi QQ

  • Weltraumente wrote:

    Ich dachte Fear hat dich bereits aufgeklärt gehabt? D:
    Also im Firefox kannste dir das addon stylish installieren und dann gibts oben rechts das symbol dafür, dort klickste auf neuen style erstellen für "such dir was aus", dann kopierste mein code über den vorhandenen da drinnen und speicherst das ab. Dann musste es gegenbenenfalls noch aktivieren, wieder oben beim icon.
    fear hat n eigenes ad-on geschrieben, das musste ich dann vom rechner aus hochladen^^.

    aber thx

    edit. sry bin überfordert. hab den quellcode jetzt in den style geschrieben und gespeichert, wie aktivier ich das jetzt?
    Meine Klinge ist blutig, das Schlachtfeld ist rot

    Schnell wie der Blitz bring ich euch den Tod.

    The post was edited 1 time, last by SchwarzerBlitz ().


  • so muss das aussehen und dann unten halt die Klammer wieder schließen, eigentlich wenn du beide css (die ersten beiden )nacheinander rein kopierst sollte das gehen? kannst ja erstmal die zusätzlichen weg lassen.

    (Wieso fängst du bei colorpicker an? das muss bei den variablen anfangen) ist es so schwer 2 code zitate zu kopieren? :mädchen:
    Seite wird neu aufgesetzt
    es war einmal....     Tsuki tenshi QQ