scrollbars.uc.js anpassen - geschafft und erledigt!

Sören Hentzschel

Zitat von Mira_Belle

Gibt es hier on Board denn wirklich kein JavaScipt-Experten?

Sören Hentzschel, 2002Andreas, .DeJaVu, Speravir, Endor.

Ich denke nicht, dass es hier einen JavaScript-Experten benötigt. In erster Linie ist das ja alles CSS. JavaScript wird lediglich genutzt, um das CSS anzupassen und in die Website zu injizieren.

Ich nutze jedenfalls macOS. Dort gibt es solche Buttons bei Scrollbalken nicht. Entsprechend eingeschränkt sind meine Möglichkeiten, das zu untersuchen.

Mira_Belle

Zitat von Sören Hentzschel

Ich denke nicht, dass es hier einen JavaScript-Experten benötigt. In erster Linie ist das ja alles CSS. JavaScript wird lediglich genutzt, um das CSS anzupassen und in die Website zu injizieren.

Dann bin ich halt bei CSS an meine bescheidenen Grenzen angekommen.

Das Resultat ist das Gleiche, das Script funktioniert nicht, wie gewünscht.

Wenn es aber "nur" CSS bedarf, 2002Andreas, .DeJaVu, Speravir, Endor, HILFE Bitte.

Endor

Hallo Mira_Belle

Wenn überhaupt, dann kann Dir nur aborix, unser Script Genie, helfen.

Mal abwarten.

Mfg.
Endor

Sören Hentzschel

Wie gesagt, die Lösung ist im CSS zu suchen. JavaScript wird hier für überhaupt keine Funktionalität verwendet, außer eben „Optionen“ anzubieten (aber wenn man weiß, was man will, braucht man keine Optionen) und das CSS letztlich einzufügen. Die Gestaltung selbst ist komplett CSS. Es sollte sich also nicht nur angesprochen fühlen, wer JavaScript kann.

BrokenHeart

Zitat von Sören Hentzschel

JavaScript wird hier für überhaupt keine Funktionalität verwendet, außer eben „Optionen“ anzubieten (aber wenn man weiß, was man will, braucht man keine Optionen) und das CSS letztlich einzufügen.

Das ist richtig! Der eigentliche Grund ist aber, dass die normale 'userChome.css' als 'USER_SHEET' registriert und ausgeführt wird. Damit kann man aber bestimmte Elemente(z.B. Scrollbars) der Firefox-Oberfläche nicht erreichen, bzw sie werden wieder überschrieben.

Deswegen hat Aris auch den CSS-Code in ein Skript verpackt. Das Skript ist nur ein Wrapper für den CSS-Code (das Skript besteht eigentlich nur aus CSS-Codes), der dann als 'AGENT_SHEET' mit höherer Priorität ausgeführt wird.

Sören Hentzschel

Das ist mir bekannt und sollte als Methode damit auch meinerseits gar nicht in Frage gestellt werden. Mir ging es viel mehr darum, dass mancher, der bei einem CSS-Problem vielleicht helfen könnte, sich unter Umständen direkt verabschiedet, wenn das Problem im Verantwortungsbereich von JavaScript verortet wird. Die Bastel-Fähigkeiten in diesem Forum sind bei CSS ja doch etwas ausgeprägter als bei JavaScript.

BrokenHeart

Deine Intention war mir schon klar .

Das Hauptproblem bei diesem CSS-"Einpacken" in ein JavaScript ist, dass es sehr schnell unübersichtlich wird und mit den vielen Optionen wird es dann erst recht mühsam, den roten Faden bei der Lösung zu finden bzw. nicht zu verlieren, wie ich es auch schon selber schmerzlich erfahren musste und wie man es gut an diesem Thread beobachten kann... .

Mira_Belle

Das mit den Symbolen habe ich nun hinbekommen!

Habe einfach mittels FF die Werte angepasst!

Nun habe ich nur noch das Problem, dass jeweils in den Scrollbars in den entgegengesetzten "Richtungen" beide

Symbole, ink. der entsprechenden Funktionen, sind (erscheinen).

Wenn dieses Problem gelöst wird/ist, dann wäre das Script fertig.

Hier DAS Script. (Welches angepasst und in Gebrauch ist)

JavaScript

"use strict";
/* Firefox 57+ userChrome.js tweaks - SCROLLBARS ********************************************** */
/* by Aris (aris-addons@gmx.net)*************************************************************** */
/* Github: https://github.com/aris-t2/customscrollbarsforfx *********************************** */
/* ******************************************************************************************** */
/* ******************************************************************************************** */
/* Custom Scrollbars for Firefox ************************************************************** */
/* version 1.0.6 ****************************************************************************** */
/* ******************************************************************************************** */
/* ***********************************************************************************************
 README
 
 !!! Important !!!
 
 Preferences have to be set to false, for this to work on recent Firefox builds (102+)
 
 about:config >
 widget.windows.overlay-scrollbars.enabled > false (Windows)
 widget.gtk.overlay-scrollbars.enabled > false (Linux/MacOSX)
 
 
 [!] 'Method 2' is required to prepare Firefox for custom JavaScript files
 [!] 'custom_scrollbars.uc.js' file belongs into Firefox profiles 'chrome' folder!
 -> finding profile folder: address bar > about:profiles > Root Directory > Open Folder
 -> add file to \chrome\ folder (create one, if needed)
 [!] STARTUP CACHE HAS TO BE DELETED AFTER EVERY CHANGE!
 -> finding 'startupCache' folder: address bar > about:profiles > Local Directory > Open Folder > startupCache
 -> close Firefox
 -> delete 'startupCache' folders content
 ENABLING options > set var to true
 DISABLING options > set var to false
 Modifying appearance > change values
 - color - name: red, blue, transparent / hex code: #33CCFF, #FFF
 - color - rgb(a): rgba(0,0,255,0.8) / hsl(a): hsla(240,100%,50%,0.8)
 - numbers: 1, 2, 3 ... 10, 11, 12 ...
 - opacity: 0.0 to 1.0 e.g. 1.4, 1,75
 - gradients: linear-gradient(direction, color, color, color)
 - gradients example: linear-gradient(to right, blue, #33CCFF, rgba(0,0,255,0.8))
 - predefined gradients: transparent,rgba(255,255,255,0.5),transparent -> transparent,rgba(255,255,255,0.0),transparent
 - button size with arrow (descriptions for vertical scrollbars - analogous for horizontal scrollbars)
 -- 1: space above arrow = arrow height
 -- 1.5: space above arrow = 0.5 * arrow height
 -- 2: no space above arrow
 
 NOTE
 - This is a tiny collection of scrollbar tweaks, not a port of 'NewScrollbars' add-on!
 - Small scrollbar width values will corrupt some parts of the ui!
 
*********************************************************************************************** */
// GENERAL SCROLLBAR SETTINGS
var hide_scrollbars = false; // default: hide_scrollbars = false
var hide_scrollbar_buttons = false; // default: hide_scrollbar_buttons = false
var custom_scrollbar_size = true; // default: custom_scrollbar_size = false
var custom_scrollbar_size_value = 16; // in px // default: custom_scrollbar_size_value = 17
var custom_scrollbar_opacity = false; // default: custom_scrollbar_opacity = false
var custom_opacity_value = "1.0"; // default: custom_opacity_value = "1.0"
// floating scrollbars
var enable_scrollbars_on_top_of_webcontent = false; // default: enable_scrollbars_on_top_of_webcontent = false // uses 'custom_scrollbar_size_value' inside its code
// custom scrollbars
var enable_custom_scrollbars = true; // default: enable_custom_scrollbars = true
// CUSTOM SCROLLBAR SETTINGS ("custom_scrollbar_" --> "cs_")
var cs_thumb_border = 1; // in px // default: cs_thumb_border = 0
var cs_thumb_roundness = 0; // in px // default: cs_thumb_roundness = 0
var cs_buttons_roundness = 0; // in px // default: cs_buttons_roundness = 0
var cs_buttons_as_arrows = false; // default: cs_buttons_as_arrows = false // uses 'custom_scrollbar_size_value' inside its code
var cs_arrows_on_buttons = true; // default: cs_arrows_on_buttons = true // uses 'custom_scrollbar_size_value' inside its code
// button size with arrow - 1: space above arrow = arrow height // 1.5: space above arrow = 0.5 * arrow height // 2: no space above arrow
var cs_arrows_on_buttons_buttons_size = 1; // default: cs_arrows_on_buttons_buttons_size = 1.5
// 'flat' scrollbars
var cs_ignore_color_gradients = false; // default: cs_ignore_color_gradients = false
var cs_thumb_minimal_size = 12; // in px
// CUSTOM SCROLLBAR COLORS/GRADIENTS
// - background
var cs_background_color = "#5b5b66"; // default: cs_background_color = "#DDDDDD"
var cs_background_image_vertical = "unset"; // default: cs_background_image_vertical = "unset"
var cs_background_image_horizontal = "unset"; // default: cs_background_image_horizontal = "unset"
// - corner
var cs_corner_background_color = "blue"; // default: cs_corner_background_color = "#DDDDDD"
var cs_corner_background_image = "unset"; // default: cs_corner_background_image = "unset"
// - thumb/slider
var cs_thumb_color = "#bfbfbf"; // default: cs_thumb_color = "#33CCFF"
var cs_thumb_image_vertical = "unset"; // default: cs_thumb_image_vertical = "unset"
var cs_thumb_image_horizontal = "unset"; // default: cs_thumb_image_horizontal = "unset"
var cs_thumb_hover_color = "orange"; // default: cs_thumb_hover_color = "#66FFFF"
var cs_thumb_hover_image_vertical = "unset"; // default: cs_thumb_hover_image_vertical = "unset"
var cs_thumb_hover_image_horizontal = "unset"; // default: cs_thumb_hover_image_horizontal = "unset"
var cs_thumb_border_color = "#5b5b66"; // default: cs_thumb_border_color = "#33CCFF" "#5b5b66"
// - buttons
var cs_buttons_image_vertical = "unset"; // default: cs_buttons_image_vertical = "unset"
var cs_buttons_image_horizontal = "unset"; // default: cs_buttons_image_horizontal = "unset"
var cs_buttons_hover_color = "#bfbfbf"; // default: cs_buttons_hover_color = "#33CCFF"
var cs_buttons_hover_image_vertical = "unset"; // default: cs_buttons_hover_image_vertical = "unset"
var cs_buttons_hover_image_horizontal = "unset"; // default: cs_buttons_hover_image_horizontal = "unset"
// unset background image color gradients -> flat scrollbars
if(cs_ignore_color_gradients==true)
    cs_background_image_vertical
    =cs_background_image_horizontal
    =cs_corner_background_image=cs_thumb_image_vertical
    =cs_thumb_image_horizontal
    =cs_thumb_hover_image_vertical
    =cs_thumb_hover_image_horizontal
    =cs_buttons_image_vertical
    =cs_buttons_image_horizontal
    =cs_buttons_hover_image_vertical
    =cs_buttons_hover_image_horizontal
    ="unset";
/* ******************************************************************************************** */
/* ******************************************************************************************** */
/* ******************************************************************************************** */
// Scrollbar code
Components.utils.import("resource://gre/modules/Services.jsm");
var ss =  Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);
var custom_scrollbars = {
  init: function() {
    var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
      \
      @namespace html url("http://www.w3.org/1999/xhtml");\
      \
      scrollbar, scrollcorner, scrollbar thumb, scrollbar scrollbarbutton[type="increment"], scrollbar scrollbarbutton[type="decrement"] {\
        -moz-appearance: none !important;\
        appearance: none !important;\
      }\
      scrollbar {\
        background-color: '+cs_background_color+' !important;\
      }\
      scrollbar[orient="vertical"] {\
        background-image: '+cs_background_image_vertical+' !important;\
      }\
      scrollbar[orient="horizontal"] {\
        background-image: '+cs_background_image_horizontal+' !important;\
      }\
      scrollcorner {\
        background-color: '+cs_corner_background_color+' !important;\
        background-image: '+cs_corner_background_image+' !important;\
      }\
      scrollbar thumb {\
        background-color: '+cs_thumb_color+' !important;\
        border-radius: '+cs_thumb_roundness+'px !important;\
        border: '+cs_thumb_border+'px solid '+cs_thumb_border_color+' !important;\
      }\
      scrollbar thumb[orient="vertical"] {\
        background-image: '+cs_thumb_image_vertical+' !important;\
        min-height: '+(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)+'px !important;\
      }\
      scrollbar thumb[orient="horizontal"] {\
      background-image: '+cs_thumb_image_horizontal+' !important;\
      min-width: '+(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)+'px !important;\
      }\
      scrollbar thumb:hover, scrollbar thumb:active {\
        background-color: '+cs_thumb_hover_color+' !important;\
      }\
      scrollbar thumb[orient="vertical"]:hover, scrollbar thumb[orient="vertical"]:active {\
        background-image: '+cs_thumb_hover_image_vertical+' !important;\
      }\
      scrollbar thumb[orient="horizontal"]:hover, scrollbar thumb[orient="horizontal"]:active {\
        background-image: '+cs_thumb_hover_image_horizontal+' !important;\
      }\
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"] {\
        mask-image: url("file:///C:/Users/.../chrome/icons/Chevron-down,_Web_Fundamentals_new.svg") !important;\
        mask-repeat: no-repeat;\
        mask-position: center;\
        display: block !important;\
        background-color: red !important;\
        content: url("file:///C:/Users/.../chrome/icons/Chevron-down,_Web_Fundamentals_new.svg") !important;\
        width: 16px !important;\
        height: 16px !important;\
      }\
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"] {\
        mask-image: url("file:///C:/Users/.../chrome/icons/Chevron-up,_Web_Fundamentals_new.svg") !important;\
        mask-repeat: no-repeat;\
        mask-position: center;\
        display: block !important;\
        background-color: red !important;\
        content: url("file:///C:/Users/.../chrome/icons/Chevron-up,_Web_Fundamentals_new.svg") !important;\
        width: 16px !important;\
        height: 16px !important;\
      }\
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"] {\
        mask-image: url("file:///C:/Users/.../chrome/icons/Chevron-right,_Web_Fundamentals_new.svg") !important;\
        mask-repeat: no-repeat;\
        mask-position: center;\
        display: block !important;\
        background-color: red !important;\
        content: url("file:///C:/Users/.../chrome/icons/Chevron-right,_Web_Fundamentals_new.svg") !important;\
        width: 16px !important;\
        height: 16px !important;\
      }\
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {\
        mask-image: url("file:///C:/Users/.../chrome/icons/Chevron-left,_Web_Fundamentals_new.svg") !important;\
        mask-repeat: no-repeat;\
        mask-position: center;\
        display: block !important;\
        background-color: red !important;\
        content: url("file:///C:/Users/.../chrome/icons/Chevron-left,_Web_Fundamentals_new.svg") !important;\
        width: 16px !important;\
        height: 16px !important;\
      }\
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"]:hover {\
        background-color: lime !important;\
      }\
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"]:hover {\
        background-color: lime !important;\
      }\
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"]:hover {\
        background-color: lime !important;\
      }\
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"]:hover {\
        background-color: lime !important;\
      }\
    '), null, null);
    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);
  }
};
var cs_scrollbars_scrollbar_button_arrows = {
  init: function() {
    var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
      \
      @namespace html url("http://www.w3.org/1999/xhtml");\
      \
      scrollbar scrollbarbutton, \
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"],\
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"],\
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"],\
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"],\
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"]:hover,\
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"]:hover,\
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"]:hover,\
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"]:hover {\
        background-color: unset !important;\
        background-image: unset !important;\
        border-radius: 0px !important;\
      }\
      scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {\
        height: 16px !important;\
        width: 16px !important;\
      }\
        scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"]{\
        height: 16px !important;\
        width: 16px !important;\
      }\
      scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {\
        height: 16px !important;\
        width: 16px !important;\
      }\
      scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {\
        height: 16px !important;\
        width: 16px !important;\
      }\
      \
    '), null, null);
    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);
  }
};
var cs_scrollbars_arrows_on_buttons = {
  init: function() {
    var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
      \
      @namespace html url("http://www.w3.org/1999/xhtml");\
      \
      scrollbar scrollbarbutton, \
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"],\
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"],\
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"],\
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"],\
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"]:hover,\
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"]:hover,\
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"]:hover,\
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"]:hover {\
        border-radius: 0px !important;\
      }\
      \
      scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {\
        height: 16px !important;\
        width: 16px !important;\
      }\
      scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {\
        height: 16px !important;\
        width: 16px !important;\
      }\
      scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {\
        height: 16px !important;\
        width: 16px !important;\
      }\
      scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {\
        height: 16px !important;\
        width: 16px !important;\
      }\
    '), null, null);
    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);
  }
};
var scrollbar_buttons = {
  init: function() {
    var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
      \
      @namespace html url("http://www.w3.org/1999/xhtml");\
      \
      scrollbar scrollbarbutton {\
        opacity: 0 !important;\
      }\
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"] {\
        min-height: 1px !important;\
        height: 1px !important;\
        max-height: 1px !important;\
      }\
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"] {\
        min-height: 1px !important;\
        height: 1px !important;\
        max-height: 1px !important;\
      }\
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"] {\
        min-width: 1px !important;\
        width: 1px !important;\
        max-width: 1px !important;\
      }\
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {\
        min-width: 1px !important;\
        width: 1px !important;\
        max-width: 1px !important;\
      }\
      \
    '), null, null);
    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);
  }
};
var scrollbar_size = {
  init: function() {
    var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
      \
      @namespace html url("http://www.w3.org/1999/xhtml");\
      \
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"] {\
        min-width: 0 !important;\
        width: 16px !important;\
      }\
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"] {\
        min-width: 0 !important;\
        width: 16px !important;\
      }\
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"] {\
        min-height: 0 !important;\
        height: 16px !important;\
      }\
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {\
        min-height: 0 !important;\
        height: 16px !important;\
      }\
      \
    '), null, null);
    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);
  }
};
var floating_scrollbars = {
  init: function() {
    var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
      \
      @namespace html url("http://www.w3.org/1999/xhtml");\
      \
      scrollbar {\
        position: relative !important;\
        z-index: 1000000000 !important;\
      }\
      scrollbar[orient="vertical"],\
      scrollbar[orient="horizontal"],\
      scrollbar, scrollcorner {\
        background-color: transparent !important; \
        background-image: unset !important; \
      }\
      scrollbar[orient="vertical"] {\
        margin-inline-start: -0px !important;\
        width: 16px !important;\
      }\
      scrollbar[orient="horizontal"] {\
        margin-top: -0px !important;\
        height: 16px !important;\
      }\
      \
    '), null, null);
    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);
  }
};
var scrollbar_opacity = {
  init: function() {
    var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
      \
      @namespace html url("http://www.w3.org/1999/xhtml");\
      \
      scrollbar {\
        opacity: 0.5 !important;\
      }\
      \
    '), null, null);
    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);
  }
};
var remove_scrollbars = {
  init: function() {
    var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
      \
      @namespace html url("http://www.w3.org/1999/xhtml");\
      \
      scrollbar, scrollcorner {\
        display: none !important;\
        visibility: collapse !important;\
      }\
      \
    '), null, null);
    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);
  }
};
// enable settings as configured above
if(enable_custom_scrollbars==true) custom_scrollbars.init();
if(cs_buttons_as_arrows==true && hide_scrollbars==false) cs_scrollbars_scrollbar_button_arrows.init();
if(cs_arrows_on_buttons==true && cs_buttons_as_arrows==false && hide_scrollbars==false) cs_scrollbars_arrows_on_buttons.init();
if(hide_scrollbar_buttons==true) scrollbar_buttons.init();
if(custom_scrollbar_size==true) scrollbar_size.init();
if(enable_scrollbars_on_top_of_webcontent==true) floating_scrollbars.init();
if(custom_scrollbar_opacity==true) scrollbar_opacity.init();
if(hide_scrollbars==true) remove_scrollbars.init();

Alles anzeigen

Wenn ich nur wüsste wo mein/der Fehler ist?

harff182

Zitat von Mira_Belle

Nun habe ich nur noch das Problem, dass jeweils in den Scrollbars in den entgegengesetzten "Richtungen" beide
Symbole, ink. der entsprechenden Funktionen, sind (erscheinen).
Wenn dieses Problem gelöst wird/ist, dann wäre das Script fertig.

Für mich ist es jetzt schon eine Bereicherung:

Ein wenig Fine-Tuning noch, dann meinen Code aufräumen/kommentieren und meinereiner is glücklich

DANKE für Deine Hartnäckigkeit...

Mira_Belle

Zitat von harff182

Für mich ist es jetzt schon eine Bereicherung:
Ein wenig Fine-Tuning noch, dann meinen Code aufräumen/kommentieren und meinereiner is glücklich
DANKE für Deine Hartnäckigkeit...

Du kannst mit dem FF die Symbole unter zu Hilfenahme der Browserwerkzeugen in der Größe ändern,

dann schaute es noch schöner, bzw. einheitlicher aus.

Bitte mach aber ein neues Thema auf, wenn ich es Dir erklären soll.

Gabbo

Mira_Belle

Du hast Dich ja ganz schön "fest gebissen" an dem Script von Aris,

es geht aber auch anders, minimalistischer.

"form follows function!"

Hier ein kurzes, knackiges Script, ohne Buttons, ohne Pfeile, Scrollbar nur bei mouseover zu sehen, css einfach zu verändern und in orange....

JavaScript

/*HideScrollbar.uc.js*/
(function () {
    var css = `
    .hidevscroll-scrollbar {
        appearance: none!important;
        margin-left: 4px!important;
        border: none!important;
        position: relative!important;
        background-color: transparent!important;
        padding: 0px!important;
        z-index: 3516351316854!important;
    }
    .hidevscroll-scrollbar[orient = "vertical"] {
        -moz-margin-start: -7px!important;
        min-width: 7px!important;
    }
    .hidevscroll-scrollbar[orient = "vertical"] thumb {
        min-height: 20px!important;
    }
    .hidevscroll-scrollbar thumb {
        appearance: none!important;
        border-width: 0px!important;
        border-radius: 0px!important;
        background-color: #f60!important;
        opacity: 0!important;
        transition: opacity 0.4s ease-in-out!important;
        -webkit-transform-style: preserve-3d!important;
        -webkit-backface-visibility: hidden!important;
    }
    .hidevscroll-scrollbar:hover thumb {
        background-color: #f60!important;
        opacity: 0.5!important;
        transition: opacity 0.06s ease-in-out!important;
        -webkit-transform-style: preserve-3d!important;
        -webkit-backface-visibility: hidden!important;
    }
    .hidevscroll-scrollbar thumb:active {
        background-color: #f60!important;
        opacity: 0.9!important;
        transition: opacity 0.06s ease-in-out!important;
        -webkit-transform-style: preserve-3d!important;
        -webkit-backface-visibility: hidden!important;
    }
    .hidevscroll-scrollbar scrollbarbutton, 
    .hidevscroll-scrollbar gripper {
        display: none!important;
    }
    :not(select):not(hbox) > scrollbar {
        appearance: none!important;
        position: relative;
        background-color: transparent;
        background-image: none;
        z-index: 3516351316854;
        padding: 0px;
    }
    :not(select):not(hbox) > scrollbar[orient = "vertical"] {
        -moz-margin-start: -7px;
        min-width: 7px;
        max-width: 7px;
    }
    :not(select):not(hbox) > scrollbar[orient = "vertical"] thumb {
        min-height: 20px;
    }
    :not(select):not(hbox) > scrollbar[orient = "horizontal"] {
        margin-top: -7px;
        min-height: 7px;
        max-height: 7px;
    }
    :not(select):not(hbox) > scrollbar[orient = "horizontal"] thumb {
        min-width: 20px;
    }
    :not(select):not(hbox) > scrollbar thumb {
        appearance: none!important;
        border-width: 0px!important;
        border-radius: 0px!important;
        background-color: #f60!important;
        opacity: 0!important;
        transition: opacity 0.4s ease-in-out;
        -webkit-transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
    }
    :not(select):not(hbox) > scrollbar:hover thumb {
        background-color: #f60!important;
        opacity: 0.5!important;
        transition: opacity 0.1s ease-in-out;
        -webkit-transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
    }
    :not(select):not(hbox) > scrollbar thumb:active {
        background-color: #f60!important;
        opacity: 0.9!important;
        transition: opacity 0.06s ease-in-out;
        -webkit-transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
    }
    :not(select):not(hbox) > scrollbar scrollbarbutton, 
    :not(select):not(hbox) > scrollbar gripper {
        display: none;
    }
    `,
        sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService),
        uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
    sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
})();

Alles anzeigen

Mira_Belle

Zitat von Gabbo

...

Hier ein kurzes, knackiges Script, ohne Buttons, ohne Pfeile, Scrollbar nur bei mouseover zu sehen, css einfach zu verändern und in orange....

CSS

/*HideScrollbar.uc.js*/
(function () {
    var css = `
    .hidevscroll-scrollbar {
        appearance: none!important;
        margin-left: 4px!important;
        border: none!important;
        position: relative!important;
        background-color: transparent!important;
        padding: 0px!important;
        z-index: 3516351316854!important;
    }
    .hidevscroll-scrollbar[orient = "vertical"] {
        -moz-margin-start: -7px!important;
        min-width: 7px!important;
    }
    .hidevscroll-scrollbar[orient = "vertical"] thumb {
        min-height: 20px!important;
    }
    .hidevscroll-scrollbar thumb {
        appearance: none!important;
        border-width: 0px!important;
        border-radius: 0px!important;
        background-color: #f60!important;
        opacity: 0!important;
        transition: opacity 0.4s ease-in-out!important;
        -webkit-transform-style: preserve-3d!important;
        -webkit-backface-visibility: hidden!important;
    }
    .hidevscroll-scrollbar:hover thumb {
        background-color: #f60!important;
        opacity: 0.5!important;
        transition: opacity 0.06s ease-in-out!important;
        -webkit-transform-style: preserve-3d!important;
        -webkit-backface-visibility: hidden!important;
    }
    .hidevscroll-scrollbar thumb:active {
        background-color: #f60!important;
        opacity: 0.9!important;
        transition: opacity 0.06s ease-in-out!important;
        -webkit-transform-style: preserve-3d!important;
        -webkit-backface-visibility: hidden!important;
    }
    .hidevscroll-scrollbar scrollbarbutton, 
    .hidevscroll-scrollbar gripper {
        display: none!important;
    }
    :not(select):not(hbox) > scrollbar {
        appearance: none!important;
        position: relative;
        background-color: transparent;
        background-image: none;
        z-index: 3516351316854;
        padding: 0px;
    }
    :not(select):not(hbox) > scrollbar[orient = "vertical"] {
        -moz-margin-start: -7px;
        min-width: 7px;
        max-width: 7px;
    }
    :not(select):not(hbox) > scrollbar[orient = "vertical"] thumb {
        min-height: 20px;
    }
    :not(select):not(hbox) > scrollbar[orient = "horizontal"] {
        margin-top: -7px;
        min-height: 7px;
        max-height: 7px;
    }
    :not(select):not(hbox) > scrollbar[orient = "horizontal"] thumb {
        min-width: 20px;
    }
    :not(select):not(hbox) > scrollbar thumb {
        appearance: none!important;
        border-width: 0px!important;
        border-radius: 0px!important;
        background-color: #f60!important;
        opacity: 0!important;
        transition: opacity 0.4s ease-in-out;
        -webkit-transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
    }
    :not(select):not(hbox) > scrollbar:hover thumb {
        background-color: #f60!important;
        opacity: 0.5!important;
        transition: opacity 0.1s ease-in-out;
        -webkit-transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
    }
    :not(select):not(hbox) > scrollbar thumb:active {
        background-color: #f60!important;
        opacity: 0.9!important;
        transition: opacity 0.06s ease-in-out;
        -webkit-transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
    }
    :not(select):not(hbox) > scrollbar scrollbarbutton, 
    :not(select):not(hbox) > scrollbar gripper {
        display: none;
    }
    `,
        sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService),
        uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
    sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
})();

Alles anzeigen

Danke für dieses Script.

Ich verstehe dennoch nur Bahnhof!

Ich verstehe nicht, wie es funktioniert.

Bei dem von mir geänderten Aris-Script blicke ich ein wenig durch.

Alles was mir nur nocht feht, ist die Stelle an der ich festlegen kann, dass nur noch ein

und zwar der richtige Button sammt Pfeil erscheint.

Sollte mir das nicht gelingen, bzw. mir niemand dabei helfen können,

werde ich mich in einem gesonderten Thema dann mit "Deinem" Script beschäftigen.

Gabbo

Zitat

werde ich mich in einem gesonderten Thema dann mit "Deinem" Script beschäftigen

Danke, nicht notwendig!

Mira_Belle

Zitat von Gabbo

Danke, nicht notwendig!

Ich finde schon, denn ich steige da z.Z. nicht durch!

Mira_Belle

Um hier

(RE: custom_scrollbars.uc.js anpassen)

mal wieder anzuknüpfen,

wie bekomme ich diesen Code unter?

CSS

@media (-moz-scrollbar-start-backward: 0) {
  scrollbarbutton[sbattr="scrollbar-up-top"] {
    display: none;
  }
}

@media (-moz-scrollbar-start-forward: 0) {
  scrollbarbutton[sbattr="scrollbar-down-top"] {
    display: none;
  }
}

@media (-moz-scrollbar-end-backward: 0) {
  scrollbarbutton[sbattr="scrollbar-up-bottom"] {
    display: none;
  }
}

@media (-moz-scrollbar-end-forward: 0) {
  scrollbarbutton[sbattr="scrollbar-down-bottom"] {
    display: none;
  }
}

Alles anzeigen

Und wo

Eventuell muss er auch noch etwas umgeschrieben werden,

Aber DAS ist das fehlende Puzzle.

harff182

Zitat von Mira_Belle

Aber DAS ist das fehlende Puzzle.

Wo kommt denn der Schnipsel her?

Vielleicht kann man aus dem Zusammenhang erkennen/ableiten, was zu tun ist...

Mira_Belle:

Frage:

Interessiert es Dich, daß statt den von Dir benutzten Pfaden wie:

url("file:///C:/Users/.../chrome/icons/Chevron-up,_Web_Fundamentals_new.svg")

auch sowas funktionieren könnte:

url("file:///../icons/Chevron-down,_Web_Fundamentals.svg")

Ich bevorzuge letzteren, den relativen Pfad, und bei mir hier funktionuckelt es...

Mira_Belle

Zitat von harff182

Zitat von Mira_Belle

Aber DAS ist das fehlende Puzzle.

Wo kommt denn der Schnipsel her?
Vielleicht kann man aus dem Zusammenhang erkennen/ableiten, was zu tun ist...

Aus FF selber!

Zitat von harff182

Frage:
Interessiert es Dich, daß statt den von Dir benutzten Pfaden wie:
url("file:///C:/Users/.../chrome/icons/Chevron-up,_Web_Fundamentals_new.svg")
auch sowas funktionieren könnte:
url("file:///../icons/Chevron-down,_Web_Fundamentals.svg")
Ich bevorzuge letzteren, den relativen Pfad, und bei mir hier funktionuckelt es...

Alles anzeigen

Und ich hatte, warum auch immer, Probleme damit.

Deshalb nutze ich den "absoluten" Pfad.

Aber Danke für den Hinweis.

Mira_Belle

Habe mal das JavaScript etwas "ausgedünnt"!

JavaScript

"use strict";
/* Firefox 57+ userChrome.js tweaks - SCROLLBARS ********************************************** */
/* Original by Aris (aris-addons@gmx.net)****************************************************** */
/* Github: https://github.com/aris-t2/customscrollbarsforfx *********************************** */
/* ******************************************************************************************** */
/* Customized by Mira************************************************************************** */
/* https://www.camp-firefox.de/forum/thema/135133-custom-scrollbars-uc-js-anpassen/ *********** */
/* ******************************************************************************************** */
/* Custom Scrollbars for Firefox ************************************************************** */
/* version 1.0.6 ****************************************************************************** */
/* ******************************************************************************************** */
/* ***********************************************************************************************
 README
 
 !!! Important !!!
 
 Preferences have to be set to false, for this to work on recent Firefox builds (102+)
 
 about:config >
 widget.windows.overlay-scrollbars.enabled > false (Windows)
 widget.gtk.overlay-scrollbars.enabled > false (Linux/MacOSX)
 
 
 [!] 'Method 2' is required to prepare Firefox for custom JavaScript files
 [!] 'custom_scrollbars.uc.js' file belongs into Firefox profiles 'chrome' folder!
 -> finding profile folder: address bar > about:profiles > Root Directory > Open Folder
 -> add file to \chrome\ folder (create one, if needed)
 [!] STARTUP CACHE HAS TO BE DELETED AFTER EVERY CHANGE!
 -> finding 'startupCache' folder: address bar > about:profiles > Local Directory > Open Folder > startupCache
 -> close Firefox
 -> delete 'startupCache' folders content
 ENABLING options > set var to true
 DISABLING options > set var to false
 Modifying appearance > change values
 - color - name: red, blue, transparent / hex code: #33CCFF, #FFF
 - color - rgb(a): rgba(0,0,255,0.8) / hsl(a): hsla(240,100%,50%,0.8)
 - numbers: 1, 2, 3 ... 10, 11, 12 ...
 - opacity: 0.0 to 1.0 e.g. 1.4, 1,75
 - gradients: linear-gradient(direction, color, color, color)
 - gradients example: linear-gradient(to right, blue, #33CCFF, rgba(0,0,255,0.8))
 - predefined gradients: transparent,rgba(255,255,255,0.5),transparent -> transparent,rgba(255,255,255,0.0),transparent
 - button size with arrow (descriptions for vertical scrollbars - analogous for horizontal scrollbars)
 -- 1: space above arrow = arrow height
 -- 1.5: space above arrow = 0.5 * arrow height
 -- 2: no space above arrow
 
 NOTE
 - This is a tiny collection of scrollbar tweaks, not a port of 'NewScrollbars' add-on!
 - Small scrollbar width values will corrupt some parts of the ui!
 
*********************************************************************************************** */
// GENERAL SCROLLBAR SETTINGS
var custom_scrollbar_size_value = 16; // in px // default: custom_scrollbar_size_value = 17
var custom_opacity_value = "1.0"; // default: custom_opacity_value = "1.0"
// floating scrollbars
// custom scrollbars
var enable_custom_scrollbars = true; // default: enable_custom_scrollbars = true
// CUSTOM SCROLLBAR SETTINGS ("custom_scrollbar_" --> "cs_")
var cs_thumb_border = 1; // in px // default: cs_thumb_border = 0 // Rahmen des Sliders
var cs_thumb_roundness = 15; // in px // default: cs_thumb_roundness = 0 // Rundung des Sliders
var cs_thumb_minimal_size = 12; // in px
// CUSTOM SCROLLBAR COLORS/GRADIENTS
// - background
var cs_background_color = "#5b5b66"; // default: cs_background_color = "#DDDDDD"
var cs_background_image_vertical = "unset"; // default: cs_background_image_vertical = "unset"
var cs_background_image_horizontal = "unset"; // default: cs_background_image_horizontal = "unset"
// - corner
var cs_corner_background_color = "red"; // default: cs_corner_background_color = "#DDDDDD"
var cs_corner_background_image = "unset"; // default: cs_corner_background_image = "unset"
// - thumb/slider
var cs_thumb_color = "#bfbfbf"; // default: cs_thumb_color = "#33CCFF"
var cs_thumb_image_vertical = "unset"; // default: cs_thumb_image_vertical = "unset"
var cs_thumb_image_horizontal = "unset"; // default: cs_thumb_image_horizontal = "unset"
var cs_thumb_hover_color = "orange"; // default: cs_thumb_hover_color = "#66FFFF"
var cs_thumb_hover_image_vertical = "unset"; // default: cs_thumb_hover_image_vertical = "unset"
var cs_thumb_hover_image_horizontal = "unset"; // default: cs_thumb_hover_image_horizontal = "unset"
var cs_thumb_border_color = "#5b5b66"; // default: cs_thumb_border_color = "#33CCFF" "#5b5b66"
// - buttons
var cs_buttons_image_vertical = "unset"; // default: cs_buttons_image_vertical = "unset"
var cs_buttons_image_horizontal = "unset"; // default: cs_buttons_image_horizontal = "unset"
var cs_buttons_hover_color = "#bfbfbf"; // default: cs_buttons_hover_color = "#33CCFF"
var cs_buttons_hover_image_vertical = "unset"; // default: cs_buttons_hover_image_vertical = "unset"
var cs_buttons_hover_image_horizontal = "unset"; // default: cs_buttons_hover_image_horizontal = "unset"
var cs_color_arrow = "#bfbfbf";
var cs_color_arrow_hover = "orange";
var cs_width = 16;
var cs_height = 16;
/* ******************************************************************************************** */
/* ******************************************************************************************** */
/* ******************************************************************************************** */
// Scrollbar code
Components.utils.import("resource://gre/modules/Services.jsm");
var ss =  Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);
var custom_scrollbars = {
  init: function() {
    var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
      \
      @namespace html url("http://www.w3.org/1999/xhtml");\
      \
      scrollbar, scrollcorner, scrollbar thumb, \
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"], \
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"], \
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"], \
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {\
        -moz-appearance: none !important;\
        appearance: none !important;\
      }\
      scrollbar {\
        background-color: '+cs_background_color+' !important;\
      }\
      scrollbar[orient="vertical"] {\
        background-image: '+cs_background_image_vertical+' !important;\
      }\
      scrollbar[orient="horizontal"] {\
        background-image: '+cs_background_image_horizontal+' !important;\
      }\
      scrollcorner {\
        background-color: '+cs_corner_background_color+' !important;\
        background-image: '+cs_corner_background_image+' !important;\
      }\
      scrollbar thumb {\
        background-color: '+cs_thumb_color+' !important;\
        border-radius: '+cs_thumb_roundness+'px !important;\
        border: '+cs_thumb_border+'px solid '+cs_thumb_border_color+' !important;\
      }\
      scrollbar thumb[orient="vertical"] {\
        background-image: '+cs_thumb_image_vertical+' !important;\
        min-height: '+(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)+'px !important;\
      }\
      scrollbar thumb[orient="horizontal"] {\
      background-image: '+cs_thumb_image_horizontal+' !important;\
      min-width: '+(cs_thumb_minimal_size+cs_thumb_roundness+cs_thumb_border)+'px !important;\
      }\
      scrollbar thumb:hover, scrollbar thumb:active {\
        background-color: '+cs_thumb_hover_color+' !important;\
      }\
      scrollbar thumb[orient="vertical"]:hover, scrollbar thumb[orient="vertical"]:active {\
        background-image: '+cs_thumb_hover_image_vertical+' !important;\
      }\
      scrollbar thumb[orient="horizontal"]:hover, scrollbar thumb[orient="horizontal"]:active {\
        background-image: '+cs_thumb_hover_image_horizontal+' !important;\
      }\
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"] {\
        mask-image: url("file:///C:/Users/.../chrome/icons/Chevron-down,_12.svg") !important;\
        mask-repeat: no-repeat;\
        mask-position: center;\
        display: block !important;\
        background-color: '+cs_color_arrow+';\
        content: url(" ") !important;\
        width: '+cs_width+'px !important;\
        height: '+cs_height+'px !important;\
      }\
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"] {\
        mask-image: url("file:///C:/Users/.../chrome/icons/Chevron-up,_12.svg") !important;\
        mask-repeat: no-repeat;\
        mask-position: center;\
        display: block !important;\
        background-color: '+cs_color_arrow+' !important;\
        content: url(" ") !important;\
        width: '+cs_width+'px !important;\
        height: '+cs_height+'px !important;\
      }\
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"] {\
        mask-image: url("file:///C:/Users/.../chrome/icons/Chevron-right,_12.svg") !important;\
        mask-repeat: no-repeat;\
        mask-position: center;\
        display: block !important;\
        background-color: '+cs_color_arrow+' !important;\
        content: url(" ") !important;\
        width: '+cs_width+'px !important;\
        height: '+cs_height+'px !important;\
      }\
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"] {\
        mask-image: url("file:///C:/Users/.../chrome/icons/Chevron-left,_12.svg") !important;\
        mask-repeat: no-repeat;\
        mask-position: center;\
        display: block !important;\
        background-color: '+cs_color_arrow+' !important;\
        content: url(" ") !important;\
        width: '+cs_width+'px !important;\
        height: '+cs_height+'px !important;\
      }\
      scrollbar[orient="vertical"] scrollbarbutton[type="increment"]:hover {\
        background-color: '+cs_color_arrow_hover+' !important;\
      }\
      scrollbar[orient="vertical"] scrollbarbutton[type="decrement"]:hover {\
        background-color: '+cs_color_arrow_hover+' !important;\
      }\
      scrollbar[orient="horizontal"] scrollbarbutton[type="increment"]:hover {\
        background-color: '+cs_color_arrow_hover+'!important;\
      }\
      scrollbar[orient="horizontal"] scrollbarbutton[type="decrement"]:hover {\
        background-color: '+cs_color_arrow_hover+' !important;\
      }\
      \
    '), null, null);
    ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);
  }
};
// enable settings as configured above
if(enable_custom_scrollbars==true) custom_scrollbars.init();

Alles anzeigen

Zwei Bitten hätte ich da.

Kann jemand diese Version so überarbeiten, dass die letzte Zeile,

also das if(enable_custom_scrollbars==true) custom_scrollbars.init();

nicht mehr gebraucht wird,

und ich bräuchte noch immer Hilfe den CSS-Code da

so unter zubringen, dass oben nur der Chevron-up zu sehen ist,

und unten entsprechend nur der Chevron-down .

Sören Hentzschel

Zitat von Mira_Belle

Kann jemand diese Version so überarbeiten, dass die letzte Zeile,
also das if(enable_custom_scrollbars==true) custom_scrollbars.init();
nicht mehr gebraucht wird

Entferne einfach die Bedingung.

Alt:

JavaScript

if(enable_custom_scrollbars==true) custom_scrollbars.init();

Neu:

JavaScript

custom_scrollbars.init();

Entsprechend kann diese Zeile dann entfernt werden:

JavaScript

var enable_custom_scrollbars = true; // default: enable_custom_scrollbars = true

Mira_Belle

Zitat von Sören Hentzschel

Entferne einfach die Bedingung.
...

Vielen lieben Dank.

Es gibt fortschritte.

Ich habe es geschafft, dass die "falschen" Symbole (Pfeile) nicht mehr angezeigt werden.

So weit, so gut.

NUR der (böde) Button ist jetzt noch zu sehen.

Wenn ich jetzt nur wüsste, was ich nicht weis, ...

Wie kann ich nun den Button noch loswerden.

Nachtrag:

Das Codefragment!

JavaScript

      scrollbar[orient="vertical"] scrollbarbutton[sbattr="scrollbar-up-top"] {\
        mask-image: url("file:///C:/Users/.../chrome/icons/Chevron-up,_12.svg") !important;\
      }\
      scrollbar[orient="vertical"] scrollbarbutton[sbattr="scrollbar-down-top"] {\
        display: none;\
      }\
      scrollbar[orient="vertical"] scrollbarbutton[sbattr="scrollbar-down-bottom"] {\
        mask-image: url("file:///C:/Users/.../chrome/icons/Chevron-down,_12.svg") !important;\
      }\
      scrollbar[orient="vertical"] scrollbarbutton[sbattr="scrollbar-up-bottom"]\ {\
        display: none;\
      }\

Alles anzeigen

scrollbars.uc.js anpassen - geschafft und erledigt!

Ähnliche Themen

Scrollbar im Firefox ändern

Farbe des Scrollbalkens ändern