WCF 1.1 Code-Schnipsel

  • WCF 1.1 Code-Schnipsel

    Ich habe bei WBB 3 Stilen fast grundsätzlich die Forenliste verändert, da ich Proportionen nicht zugesagt haben. Hierfür habe ich nun auch einen "Standard"-CSS-Schnipsel gebastelt, den ich euch nicht vorenthalten möchte. Im Anhang oben das original und unten meine Version.

    CSS-Quellcode

    1. .boardlistCols-3 {
    2. width: 45%; /* board title */
    3. }
    5. .boardlistLastPost {
    6. float: right; /* optional: display last post on the right */
    7. width: 35%; /* last post */
    8. }
    10. .boardlistStats {
    11. width: 20%; /* post count */
    12. }
    14. #boardlist li ul .boardlistTitle .containerIcon, #boardlist li ul .boardlistTitle .containerContent {
    15. margin-left: 0; /* left align for board icon and title */
    16. }
    Alles anzeigen
    Bilder

    • better-boardlist.jpg

      53,52 kB, 952×127, 266 mal angesehen
    Aufgrund von Zeitmangel kann ich derzeit keine neuen Inhalte schreiben und biete lediglich Support im Bereich Webdesign und CSS.
    KEIN PN-Support.

    Dieser Beitrag wurde bereits 4 mal editiert, zuletzt von InitArt ()

  • Rahmen im Kopfbereich entfernen

    Bei einigen Designs stören die Rahmen im Kopfbereich, mit folgendem CSS-Code können diese entfernt werden:
    Ohne Hauptmenü

    CSS-Quellcode

    1. #header, #logo, .mainMenu, .mainMenu .mainMenuInner, .mainMenu a {
    2. border: 0;
    3. }
    5. .mainMenu li.first a, .mainMenu li.firstActive a {
    6. margin-left: 0;
    7. }
    Bilder

    • header-no-border.jpg

      46,7 kB, 760×148, 218 mal angesehen
    Aufgrund von Zeitmangel kann ich derzeit keine neuen Inhalte schreiben und biete lediglich Support im Bereich Webdesign und CSS.
    KEIN PN-Support.

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von InitArt ()

  • UserPanel in einem Block

    Mit diesem Code kann man das userPanel anstatt in einer langweiligen Reihe in einen Block verwandeln und somit auch seinen Avatar sehen.

    CSS-Quellcode

    1. .userPanel li {
    2. display: block;
    3. }
    5. #userPanel a {
    6. color: #FFF;
    7. }
    9. #userPanel a:hover {
    10. color: #FFF;
    11. }
    13. .userPanelInner {
    14. position: absolute;
    15. top: 15px;
    16. margin-left: 733px;
    17. width: 345px;
    18. height: 160px;
    19. z-index: 98;
    20. color: #FFF;
    21. }
    23. #userAvatar {
    24. position: absolute;
    25. right: 210px;
    26. top: 35px;
    27. display: block !important;
    28. height: 120px;
    29. width: 126px;
    30. text-align: center;
    31. }
    33. #userAvatar img {
    34. height: auto !important;
    35. width: auto !important;
    36. max-height: 100px;
    37. max-width: 100px;
    38. border: 0px solid #000;
    39. }
    41. #userNote {
    42. position: absolute;
    43. top: 0px;
    44. left: 28px;
    45. font-weight: bold;
    46. font-size: 12px;
    47. }
    49. #userMenu {
    50. position: absolute;
    51. top: 23px;
    52. left: 120px;
    53. width: 213px;
    54. }
    56. #userMenu li {
    57. margin: 2 0 0 0;
    58. float: none;
    59. padding: 1px 0px 1px 14px;
    60. width: 196px;
    61. }
    63. #userMenu a span {
    64. text-decoration: none;
    65. }
    67. .loginPopup {
    68. margin-left: 65px;
    69. }
    Alles anzeigen


    Dazu muss man das ganze an sein Design anpassen und einen Hintergrund für das userPanel im Header einrichten / einen Hintergrund so machen.

    Vorschau:
    [Blockierte Grafik: http://picapple.de/images/c3bue.png]

  • Schicke breadCrumbs

    Mit diesem Code können die breadCrumbs in einem Rahmen mit Pfeil dargestellt werden, lediglich die Farben müssen angepasst werden. Dabei werden keinerlei Grafiken verwendet.

    CSS-Quellcode

    1. /* == == == breadCrumbs == == == */
    2. #main > .breadCrumbs {
    3. font-size: 0px;
    4. }
    6. #main > .breadCrumbs li a {
    7. position: relative;
    8. float: left;
    9. text-decoration: none;
    10. display: block;
    11. background: #efefef;
    12. padding: 3px 3px 3px 16px;
    13. border: 1px solid #777;
    14. font-size: 12px;
    15. margin-bottom: 10px;
    16. }
    18. #main > .breadCrumbs li a:hover {
    19. background: #e0e0e0;
    20. }
    22. #main > .breadCrumbs li:first-child a {
    23. border-top-left-radius: 5px;
    24. border-bottom-left-radius: 5px;
    25. padding-left: 3px;
    26. }
    28. #main > .breadCrumbs li a:before {
    29. content: " ";
    30. display: block;
    31. width: 0;
    32. height: 0;
    33. border-top: 12px solid transparent;
    34. border-bottom: 12px solid transparent;
    35. border-left: 12px solid #777;
    36. position: absolute;
    37. top: 50%;
    38. margin-top: -12px;
    39. margin-left: 1px;
    40. left: 100%;
    41. z-index: 1;
    42. }
    44. #main > .breadCrumbs li a:after {
    45. content: " ";
    46. display: block;
    47. width: 0;
    48. height: 0;
    49. border-top: 12px solid transparent;
    50. border-bottom: 12px solid transparent;
    51. border-left: 12px solid #efefef;
    52. position: absolute;
    53. top: 50%;
    54. margin-top: -12px;
    55. left: 100%;
    56. z-index: 2;
    57. }
    59. #main > .breadCrumbs li a:hover:after {
    60. border-left: 12px solid #e0e0e0;
    61. }
    63. #main > .breadCrumbs li a, .breadCrumbs li span {
    64. font-size: 12px;
    65. }
    Alles anzeigen


    Editiert am 5. April 2012
    Code aktualisiert, einige Fehler behoben, sollten Sie diesen Code verwenden, empfehle ich dringen die neue Version zu benutzen!
    Bilder

    • breadCrumbs.jpg

      31,1 kB, 290×90, 191 mal angesehen
    Aufgrund von Zeitmangel kann ich derzeit keine neuen Inhalte schreiben und biete lediglich Support im Bereich Webdesign und CSS.
    KEIN PN-Support.

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von InitArt ()

  • Moderne Loginbox

    [Blockierte Grafik: http://dl.dropbox.com/u/70016420/screens/132007364.png]

    CSS-Quellcode

    1. .loginPopup input[type="text"], .loginPopup input[type="password"] { border-style: groove; padding: 6px 10px; border-bottom-color: #ACACAC;border-left-color: #8A8A8A;border-right-color: #8A8A8A; border-top-color: #757575; box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.298), inset 2px 2px 4px #C2C2C2 }
    2. .loginPopup .container-1 { padding: 14px 22px 10px; box-shadow: 0 0 8px #000 }
    3. .loginPopup p { border-top: 1px solid #DDDDDD; margin-top: 9px;padding-top: 3px }
    4. .loginPopup { border: none }
    5. .loginPopup .inputImage { background-color: #93C25A; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0px 1px 2px rgba(0, 0, 0, 0.3); color: #ffffff; text-shadow: 0px 0px #779162; border: 1px solid #779162; padding: 5px 12px; content:"Login"; font-size:12px; font-weight:700; margin-top: 8px; margin-right: 0; display:block; text-align:center }

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von dead ()