1. Es freut uns dass du in unser Minecraft Forum gefunden hast. Hier kannst du mit über 130.000 Minecraft Fans über Minecraft diskutieren, Fragen stellen und anderen helfen. In diesem Minecraft Forum kannst du auch nach Teammitgliedern, Administratoren, Moderatoren , Supporter oder Sponsoren suchen. Gerne kannst du im Offtopic Bereich unseres Minecraft Forums auch über nicht Minecraft spezifische Themen reden. Wir hoffen dir gefällt es in unserem Minecraft Forum!

WBB4 seitliches User Panel

Dieses Thema im Forum "Webentwicklung" wurde erstellt von ripehostess54, 25. Juni 2015.

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. ripehostess54
    Offline

    ripehostess54

    Registriert seit:
    13. Januar 2015
    Beiträge:
    43
    Ort:
    Dresden
    Mal eine Frage. Wie bekomme ich das UserPanel bei WBB4 Seitlich wie im folgendem Bild?
    [​IMG]

    Muss ich das via Templatesystem oder Css machen?
    MfG Ripehostess54
     
    #1
  2. Werbung
    Online

    Werbung

  3. ripehostess54
    Offline

    ripehostess54

    Registriert seit:
    13. Januar 2015
    Beiträge:
    43
    Ort:
    Dresden
    Gelöst.
    HTML:
    1.  
    2. [LIST=1]
    3. [*]#topMenu {
    4. [*]background-color: rgba(45, 45, 45, 1);
    5. [*]height: 100%;
    6. [*]position: fixed;
    7. [*]}
    8. [*]#topMenu {
    9. [*]max-width: 45px;
    10. [*]}
    11. [*]#pageHeader ul.userPanelItems {
    12. [*]position: relative;
    13. [*]top: 50px;
    14. [*]height: auto;
    15. [*]margin-left: 5px;
    16. [*]z-index: 200;
    17. [*]background-color: rgba(0,0,0,0);
    18. [*]}
    19. [*].userPanelItems > li > a {
    20. [*]display: block!important;
    21. [*]height: auto;
    22. [*]}
    23. [*]#pageHeader .userPanel > div > ul.userPanelItems > li {
    24. [*]float: none;
    25. [*]}
    26. [*].userPanelItems > li > a > span:nth-child(2) {
    27. [*]display: none;
    28. [*]}
    29. [*].userPanel > div > ul.userPanelItems > li > a:hover, .userPanel > div > ul.userPanelItems > li > div:hover:not(.dropdownMenu) {
    30. [*]background-color: rgba(0,0,0,0);
    31. [*]text-decoration: none;
    32. [*]}
    33. [*].userPanel > div > ul.userPanelItems > li > .framed > img {
    34. [*]left: -4px;
    35. [*]border-radius: 25px;
    36. [*]}
    37. [*]/* --------------------------------- Login */
    38. [*]#userLogin a::before {
    39. [*]color: #fff;
    40. [*]content: "";
    41. [*]font-family: FontAwesome;
    42. [*]font-size: 2rem;
    43. [*]}
    44. [*]#userLogin a {
    45. [*]overflow: hidden;
    46. [*]}
    47. [*]#userLogin a:not(.icon) {
    48. [*]color: rgba(0, 0, 0, 0);
    49. [*]}
    50. [*]#pageLanguageContainer-languageChooser .box24 div h3 {
    51. [*]display: none;
    52. [*]}
    53. [*]#pageLanguageContainer-languageChooser .iconFlag {
    54. [*]top: 7px;
    55. [*]left: -6px;
    56. [*]position: relative;
    57. [*]border-radius: 25px
    58. [*]}
    59. [*]/* --------------------------------- Searchbar */
    60. [*].userPanel > div > .searchBar {
    61. [*]position: absolute;
    62. [*]top: 10px;
    63. [*]left: 5px;
    64. [*]background-color: rgba(0,0,0,0);
    65. [*]}
    66. [*].userPanel > div > .searchBar::before {
    67. [*]color: #ffffff;
    68. [*]content: "";
    69. [*]font-family: FontAwesome;
    70. [*]font-size: 14px;
    71. [*]left: 10px;
    72. [*]position: absolute;
    73. [*]top: 12px;
    74. [*]}
    75. [*].userPanel > div > .searchBar > form input[type="search"] {
    76. [*].transition(all, .2s);
    77. [*]width: 36px;
    78. [*]padding: 6px 10px 5px 26px;
    79. [*]}
    80. [*].userPanel > div > .searchBar > form input[type="search"]:hover,
    81. [*].userPanel > div > .searchBar > form input[type="search"]:focus {
    82. [*].transition(all, .2s);
    83. [*]width: 240px;
    84. [*]background-color: #2D2D2D;
    85. [*]}
    86. [*].userPanel {
    87. [*]overflow: visible;
    88. [*]}
    [/LIST]
    #closed
     
    #2
Status des Themas:
Es sind keine weiteren Antworten möglich.