Web WBB4 seitliches User Panel

Dieses Thema im Forum "Programmierung" 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. 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.