WS 3.0 Nero

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • Hallo zusammen,

      ich nutze bisher die RelexBar, die wird ja wohl wie es ausschaut nicht für WCF3 kommen.
      Daher nutze ich die Zeit bis bis EasyMedia für WCF3 erscheint um Nero etwas an die Farben von RelexBar zu bekommen, soweit geht das schon.

      Wo ich aber Probleme habe ist die mobile Darstellung, in der Navigation taucht immer ein schwarzer Farbton auf, da finde ich keine Einstellung um das zu ändern.
      Gibt es dafür keine Möglichkeit? Hänge mal zwei Bilder an.

      Danke und Gruß
      Stefan
      Bilder
      • Mobile01.jpg

        35,8 kB, 516×599, 95 mal angesehen
      • Mobile02.jpg

        33,12 kB, 518×484, 61 mal angesehen
    • @Tom Kann es sein, dass für .boxesBottom (für Boxen Unter Inhaltsbereich) nicht wirklich etwas definiert ist oder da etwas vergessen wurde? Mit einem banalen

      CSS-Quellcode

      1. .boxesBottom {
      2. background: rgba(235, 242, 245, 1);
      3. border-top:0;
      4. }
      habe ich das bei mir, im Livebetrieb, erstmal behoben. Damit kann den dort abgelegten Text oder die Boxen überhaupt erst lesen.

      In meiner Testinstallation hat der Bereich sonst auch nur die Hintergrundfarbe des Stils selbst. Kann mir schwerlich vorstellen, dass das gewollt ist. 8|
    • So weit ich weiss sind den Bereichen keine Farben zugeordnet, wenn du die hinzu fügst dann musst du das entsprechend anpassen. Da im Stil von WoltLab einfach immer alles weiss ist fällt das dort nicht auf.

      Hier ist das Update für das mobile Menü. Dazu muss der Inhalt des Templates pageNavbarTop mit diesem ersetzt werden:

      Smarty-Template

      1. <div class="pageNavigation">
      2. <div class="layoutBoundary">
      3. {if $skipBreadcrumbs|empty}{include file='breadcrumbs'}{/if}
      4. <ul class="pageNavigationIcons jsPageNavigationIcons">
      5. {if $headerNavigation|isset}{@$headerNavigation}{/if}
      6. {event name='navigationIcons'}
      7. <li id="sidebarRightExpand" onClick="a_onClickExpandSidebarRight()" style="display:none;">
      8. <a class="jsTooltip" title="{lang}wcf.cls-design.expandSidebarRightGlobal{/lang}">
      9. <span class="icon icon16 fa-expand"></span></a>
      10. </li>
      11. <li id="sidebarRightCollapse" onClick="a_onClickCollapseSidebarRight()">
      12. <a class="jsTooltip" title="{lang}wcf.cls-design.collapseSidebarRightGlobal{/lang}">
      13. <span class="icon icon16 fa-compress"></span></a>
      14. </li>
      15. </ul>
      16. </div>
      17. </div>
      18. <script data-relocate="true">
      19. function button_onClickCollapseSidbarRight() {
      20. $("#sidebarCollapseRight").click();
      21. }
      22. function a_onClickCollapseSidebarRight() {
      23. $("#content").addClass( "sidebarRightCollapsed" );
      24. $(".boxesSidebarRight").addClass( "sidebarRightCollapsed" );
      25. $("#sidebarRightCollapse").css("display","none");
      26. $("#sidebarRightExpand").css("display","block");
      27. localStorage.collapseSidebarRightStorage=1;
      28. }
      29. function button_onClickExpandSidebarRight() {
      30. $("#sidebarExpandRight").click();
      31. }
      32. function a_onClickExpandSidebarRight() {
      33. $("#content").removeClass( "sidebarRightCollapsed" );
      34. $(".boxesSidebarRight").removeClass( "sidebarRightCollapsed" );
      35. $("#sidebarRightCollapse").css("display","block");
      36. $("#sidebarRightExpand").css("display","none");
      37. localStorage.collapseSidebarRightStorage=2;
      38. }
      39. if(localStorage.collapseSidebarRightStorage == '1') {
      40. $("#content").addClass( "sidebarRightCollapsed" );
      41. $(".boxesSidebarRight").addClass( "sidebarRightCollapsed" );
      42. $("#sidebarRightCollapse").css("display","none");
      43. $("#sidebarRightExpand").css("display","block");
      44. }
      45. if(localStorage.collapseSidebarRightStorage == '2') {
      46. $(".boxesSidebarRight").removeClass( "sidebarRightCollapsed" );
      47. }
      48. if ($(".boxesSidebarRight")[0]){
      49. $(".pageNavigation").css("position","relative");
      50. } else {
      51. $("#sidebarRightCollapse").css("display","none");
      52. $("#sidebarRightExpand").css("display","none");
      53. }
      54. if ($(window).width() < 1024) {
      55. $( "#sidebarRightExpand" ).remove();
      56. $( "#sidebarRightCollapse" ).remove();
      57. }
      58. </script>
      Alles anzeigen
      TwitterFacebook

      Mein Blog: TwentyMag <- Lesen, Teilen, Liken, Kommentieren, Abonnieren. Ihr wisst bescheid, was labere ich hier groß rum
      :eyes:
    • Hallo :) Ich bin gerade mit eine eigene OnePage am bauen:

      warhawksexile.de

      Ich habe bisher folgenden CSS angewendet:

      CSS-Quellcode

      1. body[data-page-id="56"] {
      2. // Box-Styling mit Hintergrund über die gesamte Breite
      3. .boxesHero {
      4. background-image: url('../images/nero/background.jpg');
      5. background-size: cover;
      6. display: flex;
      7. min-height: calc(100vh - 50px);
      8. }
      9. // Anpassung, damit kein leerer Raum dargestellt wird
      10. .pageHeaderFacade > .layoutBoundary {
      11. padding: 0 !important;
      12. }
      13. @include screen-md-down {
      14. // Darstellung des mobilen Logos erzwingen
      15. .pageHeaderLogo,
      16. .pageHeaderLogoSmall {
      17. display: block;
      18. }
      19. }
      20. }
      21. // logo und breadcrumbs ausblenden
      22. .pageHeaderLogo,
      23. .pageNavigation {
      24. display: none;
      25. }
      Alles anzeigen
      Jetzt würde ich gerne folgendes noch weg bekommen:




      Dann hat sich durch das ausblenden des Seitenlogos folgendes ergeben:


      Kann man das irgendwie fest rechtsbündig in die Navigation packen und die Suche entfernen?



      Zudem würde ich gerne unter dem Hero Image einen Container haben der genauso breit ist wie das Hero Image, bei dem ich sogesagt eine "Feature List" machen kann mit 6 Einträgen - 3 nebeneinander, in 2 Reihen - gesamt also 6 mit jeweils einem Icon für jedes Feature. (Eigentlich so wie es Woltlab selbst hat)

      Hat da vielleicht paar CSS Snippets rumfliegen und kann mir helfen?

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

    • Tom schrieb:

      Füge das hinzu:

      CSS-Quellcode

      1. #userMenu > a::before {
      2. background-color: rgba(0, 0, 0, 0);
      3. color: $wcfHeaderMenuLink;
      4. font-family: FontAwesome;
      5. font-size: 28px;
      6. line-height: 32px;
      7. padding: 5px 2px;
      8. }
      9. #userMenu > a::before {
      10. content: "\f2be";
      11. }
      12. #userMenu > a > img {
      13. display: none;
      14. }
      Alles anzeigen
      Wie kann ich dem Icon noch einen Hover geben?
    • Ist es möglich, dass das Design eine veraltete fontawesome icon Datei mit einbindet? Ich habe nämlich Probleme mit einem anderen Plugin, welche das fa-twitch Icon nicht anzeigt. Nach einem kurzen Gespräch mit dem Autor stellte sich heraus, dass es überschrieben wird und deswegen nicht angezeigt wird und meinte, dass es am Design liegen könnte

      Edit: es liegt an einem anderen Plug-in
      LG

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

    • Hallo,

      ich würde gerne die HIntegrundfarbe ändern. Momentan ist ein Hintergrundbild eingebunden, was durch eine einfache Farbe ersetzt werden soll. Auf Basis des vorhandenen CSS habe ich folgende Anpassung vorgenommen:

      CSS-Quellcode

      1. body {
      2. background-color: #99B7CE;
      3. background-size: cover;
      4. background-attachment: fixed;
      5. }
      Die Änderung funktioniert grundlegend auch, wenn man die Seite lädt, ist die blaue Farbe kurz sichtbar, wird dann allerdings wieder sofort vom Hintergerundbild überschrieben. Was habe ich falsch gemacht bzw. vergessen? :D
    • Servus Leute!

      Für das Forum welches ich administriere habe ich diverse verschiedene Styles mit dem einzigen Unterschied, dass die Farbgebung dem Hintergrundbild angepasst ist.
      Nun ist mir aufgefallen, dass in der mobilen Darstellung auf meinem Handy, ein ganz kleiner und unscheinbarer, aber trotzdem sichtbarer Makel ist: nämlich wird in der oberen rechten Ecke bei dem Button des Benutzerprofils, das Hintergrundbild eingeblendet - aber nur auf die Größe des Buttons hin skaliert!

      Wenn ich mir das ganze aber im Chrome Browser mit den Dev-Mitteln anschaue - und auf eine Bildschirmauflösung meines Handys einstelle - ist dies nicht so...

      hier mal ein Vergleich:



      Google Chrome Browser

      mobiler Google Chrome Browser



      woran liegt das genau, und was müsste ich ggf. im Quellcode vom Theme anpassen?

      LG
    • Ist wohl irgend ein Browserfehler, das kannszt du hier ändern:

      CSS-Quellcode

      1. #pageHeaderPanel,
      2. #pageHeaderUserPanel {
      3. background-image: url('#{$style_image_path}background.jpg');
      4. background-color: #000;
      5. background-size: cover;
      6. background-attachment: fixed;
      7. }
      TwitterFacebook

      Mein Blog: TwentyMag <- Lesen, Teilen, Liken, Kommentieren, Abonnieren. Ihr wisst bescheid, was labere ich hier groß rum
      :eyes: