WS 3.0 Nero

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

    • 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
      Images
      • Mobile01.jpg

        35.8 kB, 516×599, viewed 115 times
      • Mobile02.jpg

        33.12 kB, 518×484, viewed 82 times
    • @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 Source Code

      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>
      Display All
      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 Source Code

      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. }
      Display All
      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?

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

    • Tom wrote:

      Füge das hinzu:

      CSS Source Code

      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. }
      Display All
      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

      The post was edited 4 times, last by 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 Source Code

      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 Source Code

      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: