Benutzerdefinierte Bildlaufleisten / Custom Scrollbars 
Autor: Andreas L.
Besucht 1615,
Followers 1,
Geteilt 0
Wenn manzusaätzlich das hier einfügt im <head>
<style>
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #7a7171;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #d81313;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #277edb;
}
/<style>
bekommt man ja als Ergebnis folgendes:
Eine Funktion in x5 wäre gut wenn man die Bildlaufleite / Scrollbar mit eigenen Farben definieren könnte zur Aufwertung der Webseite / Template. Ich weiß das IE und EDGE das nicht berücksichtigen aber im Chrome und Firefox funktioniert es. Da die meisten User diese beiden Browser benutzen wäre es ein zusätliches nettes Gimmick für Website x5.
Gepostet am
+
Dem kann ich nur zustimmen.
Autor
Bin mal gespannt
+
Das habe ich glaub schon vor 6 Jahren vorgeschlagen. Wäre toll wenn das kommen würde.
Wenn sowas eingebaut wird, dann sollte es auch für alle Browser funktionieren und auch dann automatisch abschaltbar sein für das mobile Design. Ich glaube bis V9 ist das noch eingebaut gewesen, aber dann entfernt worden.
So wie im Anhang sah es bei der V 8 aus.
Ich habe den Code unter Seo&Code-Erweitert vor und nach dem Head-Tag eingefügt, aber keine Reaktion. Wo kann kann den Code "im" Head einfügen?
Nach einem Neustart von WX5 klappt es.
Woran kann es liegen, dass der vor dem Head eingefühgte Code dazu führt, dass die Hintergrundgrafik im Header nicht mehr angezeigt, der zentrierte Text linksbündig gesetzt ist und unterhalb des Datenschutzbanners irgendein Codetext steht?
Bei der Gelegenheit würde ich gerne wissen, wo man einstellen kann, dass kein horizontaler Scrollbalken angezeigt wird.
Kann man nur Online feststellen!
Das ist nur ein Testprojekt. Nachstehend daher der Quelltext:
<!DOCTYPE html><!-- HTML5 --><html prefix="og: http://ogp.me/ns#" lang="de-DE" dir="ltr"><head><style> /* width */ ::-webkit-scrollbar { width: 10px; } /* Track */ ::-webkit-scrollbar-track { background: #7a7171; } /* Handle */ ::-webkit-scrollbar-thumb { background: #d81313; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #277edb; } /<style> <title>Neues Projekt</title> <meta charset="utf-8" /> <!--[if IE]><meta http-equiv="ImageToolbar" content="False" /><![endif]--> <meta property="og:locale" content="de" /> <meta property="og:type" content="website" /> <meta property="og:url" content="http://127.0.0.1:8081/index.html" /> <meta property="og:title" content="Homepage" /> <meta property="og:site_name" content="Neues Projekt" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" type="text/css" href="style/reset.css?13-1-8-23" media="screen,print" /> <link rel="stylesheet" type="text/css" href="style/print.css?13-1-8-23" media="print" /> <link rel="stylesheet" type="text/css" href="style/style.css?13-1-8-23" media="screen,print" /> <link rel="stylesheet" type="text/css" href="style/template.css?13-1-8-23" media="screen" /> <link rel="stylesheet" type="text/css" href="style/menu.css?13-1-8-23" media="screen" /> <link rel="stylesheet" type="text/css" href="pcss/index.css?13-1-8-23-636756702444102000" media="screen,print" /> <script type="text/javascript" src="res/jquery.js?13-1-8-23"></script> <script type="text/javascript" src="res/x5engine.js?13-1-8-23" data-files-version="13-1-8-23"></script> <script type="text/javascript" src="res/x5engine.offline.js?13-1-8-23-636756702443946000"></script> <script type="text/javascript"> window.onload = function(){ checkBrowserCompatibility('Der von Ihnen verwendete Browser unterstützt nicht die die Funktionen, die für die Anzeige dieser Website benötigt werden.','Der von Ihnen verwendete Browser unterstützt möglicherweise nicht die die Funktionen, die für die Anzeige dieser Website benötigt werden.','[1]Browser aktualisieren[/1] oder [2]Vorgang fortsetzen[/2].','http://outdatedbrowser.com/'); }; x5engine.utils.currentPagePath = 'index.html'; </script> <style>
#imCssLink { color: #111 !important;}
</style></head><body><div id="imHeaderBg"></div><div id="imFooterBg"></div><div id="imPage"><div id="imHeader"><h1 class="imHidden">Neues Projekt</h1><div id="imHeaderObjects"><div id="imHeader_imObjectImage_01_wrapper" class="template-object-wrapper"><div id="imHeader_imCell_1" class="" ><div id="imHeader_imCellStyleGraphics_1"></div><div id="imHeader_imCellStyle_1" ><img id="imHeader_imObjectImage_01" src="images/profile.png" title="" alt="" /></div></div></div><div id="imHeader_imObjectImage_02_wrapper" class="template-object-wrapper"><div id="imHeader_imCell_2" class="" ><div id="imHeader_imCellStyleGraphics_2"></div><div id="imHeader_imCellStyle_2" ><img id="imHeader_imObjectImage_02" src="images/White_facebook.png" title="" alt="" /></div></div></div><div id="imHeader_imObjectImage_03_wrapper" class="template-object-wrapper"><div id="imHeader_imCell_3" class="" ><div id="imHeader_imCellStyleGraphics_3"></div><div id="imHeader_imCellStyle_3" ><img id="imHeader_imObjectImage_03" src="images/White_twitter.png" title="" alt="" /></div></div></div><div id="imHeader_imObjectImage_04_wrapper" class="template-object-wrapper"><div id="imHeader_imCell_4" class="" ><div id="imHeader_imCellStyleGraphics_4"></div><div id="imHeader_imCellStyle_4" ><img id="imHeader_imObjectImage_04" src="images/youtube.png" title="" alt="" /></div></div></div><div id="imHeader_imTextObject_06_wrapper" class="template-object-wrapper"><div id="imHeader_imCell_6" class="" ><div id="imHeader_imCellStyleGraphics_6"></div><div id="imHeader_imCellStyle_6" ><div id="imHeader_imTextObject_06"><div class="text-tab-content" id="imHeader_imTextObject_06_tab0" style=""><div class="text-inner"><div style="text-align: center;"><span class="fs11 cf1"><b>LOREM IPSUM</b></span></div></div></div>
</div></div></div></div><div id="imHeader_imTextObject_07_wrapper" class="template-object-wrapper"><div id="imHeader_imCell_7" class="" ><div id="imHeader_imCellStyleGraphics_7"></div><div id="imHeader_imCellStyle_7" ><div id="imHeader_imTextObject_07"><div class="text-tab-content" id="imHeader_imTextObject_07_tab0" style=""><div class="text-inner"><div style="text-align: right;"><b class="fs10 cf1">Lorem ipsum dolor sit amet</b><span class="fs10 cf1">,</span></div><div style="text-align: right;"><span class="fs10 cf1"> consectetur adipiscing elit. </span></div><div style="text-align: right;"><span class="fs10 cf1">Donec eget velit facilisis, </span></div><div style="text-align: right;"><span class="fs10 cf1">feugiat purus et, placerat dolor.</span></div></div></div>
</div></div></div></div><div id="imHeader_imObjectTitle_08_wrapper" class="template-object-wrapper"><div id="imHeader_imCell_8" class="" ><div id="imHeader_imCellStyleGraphics_8"></div><div id="imHeader_imCellStyle_8" ><div id="imHeader_imObjectTitle_08"><span id ="imHeader_imObjectTitle_08_text">Lorem Ipsum </span ></div></div></div></div><div id="imHeader_imObjectSearch_09_wrapper" class="template-object-wrapper"><div id="imHeader_imCell_9" class="" ><div id="imHeader_imCellStyleGraphics_9"></div><div id="imHeader_imCellStyle_9" ><div id="imHeader_imObjectSearch_09"><form id="imHeader_imObjectSearch_09_form" action="imsearch.html" method="get" onsubmit="x5engine.utils.showOfflineMessage('Die Funktion \'Suchen\' wird nur aktiv, wenn die Website veröffentlicht wurde.'); return false;"><fieldset><input type="text" id="imHeader_imObjectSearch_09_field" name="search" value="" /><button id="imHeader_imObjectSearch_09_button">Cerca</button></fieldset></form><script>$('#imHeader_imObjectSearch_09_button').click(function() { $('#imHeader_imObjectSearch_09_form').submit(); return false; });</script></div></div></div></div></div></div><a class="imHidden" href="#imGoToCont" title="Ãœberspringen Sie das Hauptmenü">Direkt zum Seiteninhalt</a><a id="imGoToMenu"></a><p class="imHidden">Hauptmenü:</p><div id="imMnMnContainer"><div id="imMnMnGraphics"></div><div id="imMnMn" class="auto main-menu"><div class="hamburger-site-background menu-mobile-hidden"></div><div class="hamburger-button"><div><div><div class="hamburger-bar"></div><div class="hamburger-bar"></div><div class="hamburger-bar"></div></div></div></div><div class="hamburger-menu-background-container"><div class="hamburger-menu-background menu-mobile-hidden"><div class="hamburger-menu-close-button"><span>×</span></div></div></div><ul class="auto menu-mobile-hidden"><li id="imMnMnNode0" class="imPage imMnMnCurrent"><a href="index.html"><span class="imMnMnFirstBg"><span class="imMnMnTxt"><span class="imMnMnImg"></span><span class="imMnMnTextLabel">Homepage</span></span></span></a></li><li id="imMnMnNode3" class=" imPage"><a href="seite-1.html"><span class="imMnMnFirstBg"><span class="imMnMnTxt"><span class="imMnMnImg"></span><span class="imMnMnTextLabel">Seite 1</span></span></span></a></li><li id="imMnMnNode4" class=" imPage"><a href="seite-2.html"><span class="imMnMnFirstBg"><span class="imMnMnTxt"><span class="imMnMnImg"></span><span class="imMnMnTextLabel">Seite 2</span></span></span></a></li><li id="imMnMnNode5" class=" imPage"><a href="seite-3.html"><span class="imMnMnFirstBg"><span class="imMnMnTxt"><span class="imMnMnImg"></span><span class="imMnMnTextLabel">Seite 3</span></span></span></a></li></ul></div></div><div id="imContentContainer"><div id="imContentGraphics"></div><div id="imContent"><a id="imGoToCont"></a><div id="imPageRow_1" class="imPageRow"><div id="imPageRowContent_1" class="imContentDataContainer"><div id="imCell_1" class="" ><div id="imCellStyleGraphics_1"></div><div id="imCellStyle_1" data-responsive-sequence-number="1"><div id="imTextObject_01"><div class="text-tab-content" id="imTextObject_01_tab0" style=""><div class="text-inner"><a href="seite-1.html" class="imCssLink" onclick="return x5engine.utils.location('seite-1.html', null, false)">Test</a></div></div></div></div></div></div></div><div id="imFooPad"></div><div id="imBtMnContainer" class="imContentDataContainer"><div id="imBtMn"><a href="index.html">Homepage</a> | <a href="seite-1.html">Seite 1</a> | <a href="seite-2.html">Seite 2</a> | <a href="seite-3.html">Seite 3</a> | <a href="imsitemap.html">Seitenstruktur</a></div></div><div class="imClear"></div></div></div><div id="imFooter"><div id="imFooterObjects"><div id="imFooter_imTextObject_02_wrapper" class="template-object-wrapper"><div id="imFooter_imCell_2" class="" ><div id="imFooter_imCellStyleGraphics_2"></div><div id="imFooter_imCellStyle_2" ><div id="imFooter_imTextObject_02"><div class="text-tab-content" id="imFooter_imTextObject_02_tab0" style=""><div class="text-inner"><div style="text-align: center;"><span class="cf1"><b><span class="fs10">Lorem ipsum dolor sit amet</span></b><span class="fs10">,</span></span></div><div style="text-align: center;"><span class="fs10 cf1">consectetur adipiscing elit.</span></div></div></div>
</div></div></div></div><div id="imFooter_imObjectImage_03_wrapper" class="template-object-wrapper"><div id="imFooter_imCell_3" class="" ><div id="imFooter_imCellStyleGraphics_3"></div><div id="imFooter_imCellStyle_3" ><img id="imFooter_imObjectImage_03" src="images/Black_no.circle_position.png" title="" alt="" /></div></div></div><div id="imFooter_imTextObject_04_wrapper" class="template-object-wrapper"><div id="imFooter_imCell_4" class="" ><div id="imFooter_imCellStyleGraphics_4"></div><div id="imFooter_imCellStyle_4" ><div id="imFooter_imTextObject_04"><div class="text-tab-content" id="imFooter_imTextObject_04_tab0" style=""><div class="text-inner"><div style="text-align: left;"><span class="cf1"><b><span class="fs10">Lorem ipsum </span></b></span></div><div style="text-align: left;"><span class="cf1"><span class="fs10">Dolor sit amet 12</span><span class="fs10">,</span></span></div><div style="text-align: left;"><span class="fs10 cf1">12345 Consectetur </span></div><div style="text-align: left;"><span class="fs10 cf1">(Adipiscing)</span></div></div></div>
</div></div></div></div><div id="imFooter_imTextObject_05_wrapper" class="template-object-wrapper"><div id="imFooter_imCell_5" class="" ><div id="imFooter_imCellStyleGraphics_5"></div><div id="imFooter_imCellStyle_5" ><div id="imFooter_imTextObject_05"><div class="text-tab-content" id="imFooter_imTextObject_05_tab0" style=""><div class="text-inner"><div style="text-align: center;"><span class="fs20 cf1"><b><i>Lorem ipsum</i></b></span></div></div></div>
</div></div></div></div><div id="imFooter_imObjectImage_06_wrapper" class="template-object-wrapper"><div id="imFooter_imCell_6" class="" ><div id="imFooter_imCellStyleGraphics_6"></div><div id="imFooter_imCellStyle_6" ><img id="imFooter_imObjectImage_06" src="images/car.png" title="" alt="" /></div></div></div></div></div></div><span class="imHidden"><a href="#imGoToCont" title="Lesen Sie den Inhalt der Seite noch einmal durch">Zurück zum Seiteninhalt</a> | <a href="#imGoToMenu" title="Die Webseite neu einlesen">Zurück zum Hauptmenü</a></span><noscript class="imNoScript"><div class="alert alert-red">Um diese Website nutzen zu können, aktivieren Sie bitte JavaScript.</div></noscript></body></html>
Die Fehler treten auf, weil Du die Styledefinition mit /<style> abgeschlossen hast. Da gehört natürlich </style> hin.
Perfekt, das war es, ist also ein Fehler im Originalcode. Vielen Dank!
Wo und wie kann man einstellen, dass der horizontale Scrollbalken nicht angezeigt wird?
Autor
</style> ist natürlich richtig.
<body style="overflow:hidden;"> so werden die abgeschaltet.
Autor
<body style="overflow-y:hidden;"> rechter scrollbalken aus.
<body style="overflow-x:hidden;"> unterer scrollbalken aus.
Ich habe beide Codes unter Seo&Code - Erweitert eingefügt. Der rechte Scrollbalken aber bleibt.
Beim Ausführen der Websiteanalyse (Schritt 5) wird "Fehler im benutzerdefinierten Code" angezeigt.
Du sollst auch nicht den rechten Text( Fett markiert) in den Code einfügen!
@Andreas S.
Hier werden Sie ver...... oder?
?? Jetzt bin ich verwirrt!
Autor
Warum bekommt man von INCO zu Vorschläge & Ideen kein Feedback ?
Ein Ja, Nein oder vielleicht wäre dem Motivierten Forum Teilnehmern sicher ganz recht.
Anscheinend ist hier zuviel diskutiert worden! Normalerweise antworten sie nicht auf Ideen, denn das lesen sowieso die Entwickler (und aber geben keinen Kommentar ab). Vielleicht kommt noch eine Standardantwort....
Autor
Ja kann sein