Настройка внешнего вида Firefox в userChrome.css

iglis · №3076

В firefox входит тема Developer Edition (светлая и тёмная). включает её Developer Edition theme enabler. цвет - в инструментах разработки.
Для панели дополнений есть The Addon Bar (Restored).

villa7 · №3077

leshiy_odessa
Можно и без расширения, в Инициализацию любой кнопки бросить, перезагрузить браузер.

скрытый текст

Выделить код

Код:

(function(){
  if (document.getElementById("ctraddon_addon-bar") || document.getElementById("ctr_addon-bar"))
    return;

  const kNSXUL = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
  Components.utils.import("resource:///modules/CustomizableUI.jsm");

  // spring and wrapper
  let toolbarspring = document.createElementNS(kNSXUL, "spacer");
  toolbarspring.setAttribute("flex", "1");
  toolbarspring.setAttribute("id", "spring_revertAddonBarStatusBar");
  toolbarspring.setAttribute("removable", "false");
  let palette = document.getElementById("navigator-toolbox").palette;
  palette.appendChild(toolbarspring);

  let dmy = document.createElementNS(kNSXUL, "toolbaritem");
  dmy.setAttribute("id", "ucjs-status-bar");
  dmy.appendChild(document.getElementById("status-bar"));
  palette.appendChild(dmy);

  //create toolbar
  let addonbar = document.createElementNS(kNSXUL, "toolbar");
  addonbar.setAttribute("id", "ucjs-addon-bar");
  addonbar.setAttribute("customizable", "true");
  addonbar.setAttribute("mode", "icons");
  addonbar.setAttribute("iconsize", "small");
  addonbar.setAttribute("context", "toolbar-context-menu");
  addonbar.setAttribute("class", "toolbar-primary chromeclass-toolbar customization-target");
  addonbar.setAttribute("toolbarname", "UCJS Add-on Bar");
  addonbar.setAttribute("toolboxid", "navigator-toolbox");


  //register toolbar.id
  try {
    CustomizableUI.registerArea("ucjs-addon-bar", {
      type: CustomizableUI.TYPE_TOOLBAR,
      defaultPlacements: ["spring_revertAddonBarStatusBar", "ucjs-status-bar"]
    });
  } catch(ee) {}

  var bottombox = document.getElementById("browser-bottombox");
  bottombox.appendChild(addonbar);

  let style = ' \
    @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); \
    #ucjs-addon-bar { \
      border-top: 1px solid threedshadow; \
      border-bottom: 0 solid transparent; \
    } \
\
    #main-window[customizing] #ucjs-addon-bar { \
      border: 1px dotted threedshadow; \
    } \
\
    #main-window[customizing] #ucjs-addon-bar #status-bar { \
      border: 1px solid black; \
      opacity: 0.5; \
    } \
\
    #main-window[customizing] #spring_revertAddonBarStatusBar { \
      margin-left: 10px; \
      margin-right:10px; \
      border: 1px dashed threedshadow; \
    } \
    '.replace(/\s+/g, " ");

  let sspi = document.createProcessingInstruction(
    'xml-stylesheet',
    'type="text/css" href="data:text/css,' + encodeURIComponent(style) + '"'
  );
  document.insertBefore(sspi, document.documentElement);
  sspi.getAttribute = function(name) {
    return document.documentElement.getAttribute(name);
  };

  BookmarkingUI._updateCustomizationState();
})();

leshiy_odessa · №3078

iglis пишет

Для панели дополнений есть The Addon Bar (Restored).

Ну же написал, что задача избавится от дополнений.

villa7 пишет

в Инициализацию любой кнопки бросить, перезагрузить браузер.

Что-то я не совсем понял куда это сувать? Или вы тоже предлагаете ставить лишнее дополнение Custom Buttons?

Отредактировано leshiy_odessa (21-04-2017 15:14:40)

soldatovaua · №3079

Подскажите, пожалуйста, строки чтобы увеличить высоту панели вкладок и панели закладок для [seamonkey] . При этом, чтобы вкладки и значок открытия новой вкладки были по нижнему краю панели (увеличено место сверху), а закладки были вертикально по середине панели.
Заранее спасибо!

villa7 · №3080

leshiy_odessa
Custom Buttons как раз и заменить не одно расширение.

leshiy_odessa · №3081

villa7 пишет

Custom Buttons как раз и заменить не одно расширение.

А в Greasemonkey это можно переделать?

Rag · №3082

vurdalak:

Как сделать прямоугольные вкладки стилями или еще чем (не прибегая к левым темам и расширениями)

Я так понимаю у вас 53 версия.Вкладки можно изменить - дополнения - внешний вид. И там на выбор три темы для вкладок.

LittleMontana · №3083

сломался стиль, помогите плиз

скрытый текст

Выделить код

Код:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@-moz-document url("chrome://browser/content/browser.xul") {
/*AGENT_SHEET*/  
#navigator-toolbox #nav-bar #PanelUI-menu-button > stack {
    display: -moz-box !important;
    padding: 0 2px !important;
}
    
#PanelUI-menu-button > *:not(stack), #PanelUI-menu-button > stack > * {
    visibility: collapse !important;
    padding: 0 !important;
    border: none !important;
}

#PanelUI-menu-button > stack::before,
#PanelUI-menu-button > stack::after { 
    display: -moz-box;
    min-height: 22px;
    line-height: 1em;
    -moz-box-align: center;
    padding-right: 2px;
    padding-left: 2px;
}

:root[stylish-month="1"] #PanelUI-menu-button > stack::after {
    content: "Jan";
}

:root[stylish-month="2"] #PanelUI-menu-button > stack::after {
    content: "Feb";
}

:root[stylish-month="3"] #PanelUI-menu-button > stack::after {
    content: "Mar";
}

:root[stylish-month="4"] #PanelUI-menu-button > stack::after {
    content: "Apr";
}

:root[stylish-month="5"] #PanelUI-menu-button > stack::after {
    content: "May";
}

:root[stylish-month="6"] #PanelUI-menu-button > stack::after {
    content: "Jun";
}

:root[stylish-month="7"] #PanelUI-menu-button > stack::after {
    content: "Jul";
}

:root[stylish-month="8"] #PanelUI-menu-button > stack::after {
    content: "Aug";
}

:root[stylish-month="9"] #PanelUI-menu-button > stack::after {
    content: "Sep";
}

:root[stylish-month="10"] #PanelUI-menu-button > stack::after {
    content: "Oct";
}

:root[stylish-month="11"] #PanelUI-menu-button > stack::after {
    content: "Nov";
}

:root[stylish-month="12"] #PanelUI-menu-button > stack::after {
    content: "Dec";
}
:root[stylish-date="1"] #PanelUI-menu-button > stack::before {
    content: "1";
}

:root[stylish-date="2"] #PanelUI-menu-button > stack::before {
    content: "2";
}

:root[stylish-date="3"] #PanelUI-menu-button > stack::before {
    content: "3";
}

:root[stylish-date="4"] #PanelUI-menu-button > stack::before {
    content: "4";
}

:root[stylish-date="5"] #PanelUI-menu-button > stack::before {
    content: "5";
}

:root[stylish-date="6"] #PanelUI-menu-button > stack::before {
    content: "6";
}

:root[stylish-date="7"] #PanelUI-menu-button > stack::before {
    content: "7";
}

:root[stylish-date="8"] #PanelUI-menu-button > stack::before {
    content: "8";
}

:root[stylish-date="9"] #PanelUI-menu-button > stack::before {
    content: "9";
}

:root[stylish-date="10"] #PanelUI-menu-button > stack::before {
    content: "10";
}

:root[stylish-date="11"] #PanelUI-menu-button > stack::before {
    content: "11";
}

:root[stylish-date="12"] #PanelUI-menu-button > stack::before {
    content: "12";
}

:root[stylish-date="13"] #PanelUI-menu-button > stack::before {
    content: "13";
}

:root[stylish-date="14"] #PanelUI-menu-button > stack::before {
    content: "14";
}

:root[stylish-date="15"] #PanelUI-menu-button > stack::before {
    content: "15";
}

:root[stylish-date="16"] #PanelUI-menu-button > stack::before {
    content: "16";
}

:root[stylish-date="17"] #PanelUI-menu-button > stack::before {
    content: "17";
}

:root[stylish-date="18"] #PanelUI-menu-button > stack::before {
    content: "18";
}

:root[stylish-date="19"] #PanelUI-menu-button > stack::before {
    content: "19";
}

:root[stylish-date="20"] #PanelUI-menu-button > stack::before {
    content: "20";
}

:root[stylish-date="21"] #PanelUI-menu-button > stack::before {
    content: "21";
}

:root[stylish-date="22"] #PanelUI-menu-button > stack::before {
    content: "22";
}

:root[stylish-date="23"] #PanelUI-menu-button > stack::before {
    content: "23";
}

:root[stylish-date="24"] #PanelUI-menu-button > stack::before {
    content: "24";
}

:root[stylish-date="25"] #PanelUI-menu-button > stack::before {
    content: "25";
}

:root[stylish-date="26"] #PanelUI-menu-button > stack::before {
    content: "26";
}

:root[stylish-date="27"] #PanelUI-menu-button > stack::before {
    content: "27";
}

:root[stylish-date="28"] #PanelUI-menu-button > stack::before {
    content: "28";
}

:root[stylish-date="29"] #PanelUI-menu-button > stack::before {
    content: "29";
}

:root[stylish-date="30"] #PanelUI-menu-button > stack::before {
    content: "30";
}
:root[stylish-date="31"] #PanelUI-menu-button > stack::before {
    content: "31";
}
}

самое мне не понятное - в попытках скопировать весь код, или большую его часть мне вместо кода вставляло символ "-". пытался сохранить вручную, через save+, результат один и тот же

upd: можно ли добавить в данное меню плеера YT "открыть видео на ютубе в новой вкладке" с данным функционалом? http://puu.sh/vsnk3/0f1cb68ee6.png

Отредактировано LittleMontana (22-04-2017 12:27:24)

vurdalak · №3084

Переключил на compact lite тему, кое-что изменил в юзерхроме, и получилось что цвета индикатора на вкладке немного не те...:

trouble.gif?psid=1

Как изменить, чтобы белый ставал как стандартный синий?

Отредактировано vurdalak (24-04-2017 11:06:27)

Vitaliy V. · №3085

LittleMontana пишет

сломался стиль, помогите плиз

Этот стиль как бы для Stylish зачем он в этой теме?

скрытый текст

Выделить код

Код:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@-moz-document url("chrome://browser/content/browser.xul") {
/*AGENT_SHEET*/   
#navigator-toolbox #nav-bar #PanelUI-menu-button > stack {
    display: -moz-box !important;
    padding: 0 2px !important;
}
    
#PanelUI-menu-button > *:not(stack), #PanelUI-menu-button > stack > *:not(.toolbarbutton-icon) {
    display: none !important;
}

#PanelUI-menu-button > stack > .toolbarbutton-icon {
    list-style-image: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    border: none !important;
}
    
#PanelUI-menu-button > stack::before,
#PanelUI-menu-button > stack::after { 
    display: -moz-box;
    min-height: 22px;
    line-height: 1em;
    -moz-box-align: center;
    padding-right: 2px;
    padding-left: 2px;
}

:root[stylish-month="1"] #PanelUI-menu-button > stack::after {
    content: "Jan";
}

:root[stylish-month="2"] #PanelUI-menu-button > stack::after {
    content: "Feb";
}

:root[stylish-month="3"] #PanelUI-menu-button > stack::after {
    content: "Mar";
}

:root[stylish-month="4"] #PanelUI-menu-button > stack::after {
    content: "Apr";
}

:root[stylish-month="5"] #PanelUI-menu-button > stack::after {
    content: "May";
}

:root[stylish-month="6"] #PanelUI-menu-button > stack::after {
    content: "Jun";
}

:root[stylish-month="7"] #PanelUI-menu-button > stack::after {
    content: "Jul";
}

:root[stylish-month="8"] #PanelUI-menu-button > stack::after {
    content: "Aug";
}

:root[stylish-month="9"] #PanelUI-menu-button > stack::after {
    content: "Sep";
}

:root[stylish-month="10"] #PanelUI-menu-button > stack::after {
    content: "Oct";
}

:root[stylish-month="11"] #PanelUI-menu-button > stack::after {
    content: "Nov";
}

:root[stylish-month="12"] #PanelUI-menu-button > stack::after {
    content: "Dec";
}

:root[stylish-date="1"] #PanelUI-menu-button > stack::before {
    content: "1";
}

:root[stylish-date="2"] #PanelUI-menu-button > stack::before {
    content: "2";
}

:root[stylish-date="3"] #PanelUI-menu-button > stack::before {
    content: "3";
}

:root[stylish-date="4"] #PanelUI-menu-button > stack::before {
    content: "4";
}

:root[stylish-date="5"] #PanelUI-menu-button > stack::before {
    content: "5";
}

:root[stylish-date="6"] #PanelUI-menu-button > stack::before {
    content: "6";
}

:root[stylish-date="7"] #PanelUI-menu-button > stack::before {
    content: "7";
}

:root[stylish-date="8"] #PanelUI-menu-button > stack::before {
    content: "8";
}

:root[stylish-date="9"] #PanelUI-menu-button > stack::before {
    content: "9";
}

:root[stylish-date="10"] #PanelUI-menu-button > stack::before {
    content: "10";
}

:root[stylish-date="11"] #PanelUI-menu-button > stack::before {
    content: "11";
}

:root[stylish-date="12"] #PanelUI-menu-button > stack::before {
    content: "12";
}

:root[stylish-date="13"] #PanelUI-menu-button > stack::before {
    content: "13";
}

:root[stylish-date="14"] #PanelUI-menu-button > stack::before {
    content: "14";
}

:root[stylish-date="15"] #PanelUI-menu-button > stack::before {
    content: "15";
}

:root[stylish-date="16"] #PanelUI-menu-button > stack::before {
    content: "16";
}

:root[stylish-date="17"] #PanelUI-menu-button > stack::before {
    content: "17";
}

:root[stylish-date="18"] #PanelUI-menu-button > stack::before {
    content: "18";
}

:root[stylish-date="19"] #PanelUI-menu-button > stack::before {
    content: "19";
}

:root[stylish-date="20"] #PanelUI-menu-button > stack::before {
    content: "20";
}

:root[stylish-date="21"] #PanelUI-menu-button > stack::before {
    content: "21";
}

:root[stylish-date="22"] #PanelUI-menu-button > stack::before {
    content: "22";
}

:root[stylish-date="23"] #PanelUI-menu-button > stack::before {
    content: "23";
}

:root[stylish-date="24"] #PanelUI-menu-button > stack::before {
    content: "24";
}

:root[stylish-date="25"] #PanelUI-menu-button > stack::before {
    content: "25";
}

:root[stylish-date="26"] #PanelUI-menu-button > stack::before {
    content: "26";
}

:root[stylish-date="27"] #PanelUI-menu-button > stack::before {
    content: "27";
}

:root[stylish-date="28"] #PanelUI-menu-button > stack::before {
    content: "28";
}

:root[stylish-date="29"] #PanelUI-menu-button > stack::before {
    content: "29";
}

:root[stylish-date="30"] #PanelUI-menu-button > stack::before {
    content: "30";
}

:root[stylish-date="31"] #PanelUI-menu-button > stack::before {
    content: "31";
}
}

LittleMontana пишет

в попытках скопировать весь код, или большую его часть мне вместо кода вставляло символ "-"

about:config - dom.event.clipboardevents.enabled - true

vurdalak пишет

Как изменить, чтобы белый ставал как стандартный синий?

Выделить код

Код:

.tabbrowser-tab .tab-throbber[progress] {
  list-style-image: url("chrome://global/skin/icons/loading.png") !important;
}

@media (min-resolution: 1.1dppx) {
  .tabbrowser-tab .tab-throbber[progress] {
    list-style-image: url("chrome://global/skin/icons/loading@2x.png") !important;
  }
}

Отредактировано Vitaliy V. (24-04-2017 11:34:33)

vurdalak · №3086

Vitaliy V.
Спасибо.

Как не скрывать #forward-button если нет перехода вперед, а лишь сделать disabled и че там .... (как в Edge или Chrome)...

Сам сделал:

Выделить код

Код:

#forward-button[disabled=true] {
    visibility: visible !important;
    margin: inherit !important;  
}

Отредактировано vurdalak (24-04-2017 12:48:48)

Vitaliy V. · №3087

vurdalak пишет

Как не скрывать #forward-button если нет перехода вперед... Сам сделал:

Лучше так

Выделить код

Код:

#urlbar-wrapper > #forward-button {
  transition: none !important;
  margin-left: 0 !important;
}

#urlbar-wrapper #identity-box {
  padding-inline-start: 5px !important;
  transition: none !important;
}

Annet · №3088

Добрый день. Скажите, пож-та, как убрать прямоугольное выделение папки на панели закладок?

скрытый текст

Vitaliy V. · №3089

Annet

Выделить код

Код:

#personal-bookmarks toolbarbutton.bookmark-item {
   -moz-appearance: none !important;
   border-width: 1px !important;
}

#personal-bookmarks toolbarbutton.bookmark-item[container="true"] {
   background: none !important;
   border-color: transparent !important;
   box-shadow: none !important;
}

Annet · №3090

Vitaliy V. пишет

Annet

Выделить код

Код:

#personal-bookmarks toolbarbutton.bookmark-item {
   -moz-appearance: none !important;
   border-width: 1px !important;
}

#personal-bookmarks toolbarbutton.bookmark-item[container="true"] {
   background: none !important;
   border-color: transparent !important;
   box-shadow: none !important;
}

Большое спасибо. UPD . Немного не так выразилась, а совсем убрать можно прямоугольное выделение? Имею ввиду и со значков и с расширений...в общем отовсюду?

Добавлено 24-04-2017 15:06:14
Ребят и еще помогите очень прошу. Никак не удается изменить высоту омнибокса Пользовалась поиском, правила css . Меняется все, кроме высоты. Может есть еще идеи?

Отредактировано Annet (24-04-2017 15:18:52)

Vitaliy V. · №3091

Annet пишет

не удается изменить высоту омнибокса

Если правильно понял то так + высота поиска
только для win 10 (потому что для других ОС не нужно)

скрытый текст

Выделить код

Код:

@-moz-document url("chrome://browser/content/browser.xul") {
  @media (-moz-os-version: windows-win10) {
    :root {
      --toolbarbutton-vertical-inner-padding: 2px !important;
      --toolbarbutton-vertical-outer-padding: 5px !important;
      --backbutton-urlbar-overlap: 6px !important;
    }

    #urlbar,
    .searchbar-textbox {
      font-size: 100% !important;
      min-height: 0px !important;
    }

    window:not([chromehidden~="toolbar"]):not([style*="defaultthemes/compact.header.png"]) #urlbar-wrapper {
      clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path") !important;
    }
  }
}

Если ещё добавить

Выделить код

Код:

#back-button {
  padding-top: 1px !important;
  padding-bottom: 1px !important;
}

то и панель навигации уменьшится

Отредактировано Vitaliy V. (24-04-2017 16:03:35)

LittleMontana · №3092

Vitaliy V.
бомбануло, перепутал. каюсь. спасибо за помощь! очень своевременно, уже отчаялся, что никто не напишет)

Vitaliy V. · №3093

del

Отредактировано Vitaliy V. (28-04-2017 17:44:45)

vurdalak · №3094

Подскажите, возможно ли как-то перенести #urlbar-reload-button в левую сторону, чтобы она находилась чуть правее кнопок "назад", "вперед"?

villa7 · №3095

vurdalak

Выделить код

Код:

#urlbar .autocomplete-textbox-container,
#urlbar > .autocomplete-textbox-container {
-moz-box-ordinal-group: 2 !important;}

#urlbar .autocomplete-history-dropmarker,
#urlbar > .autocomplete-history-dropmarker {
-moz-box-ordinal-group: 3 !important;} 

#urlbar-reload-button, #urlbar-stop-button {border: none !important; }

Можно ещё ход конём. Этим удалить дефолтную кнопку

Выделить код

Код:

#urlbar-reload-button, #urlbar-stop-button {display: none !important;}

и создать кнопку которую можно поместить куда душе угодно

Выделить код

Код:

content.window.location.reload(false);

Отредактировано villa7 (25-04-2017 04:36:56)

vurdalak · №3096

moz-box-ordinal-group: 2 - это по горизонтали типа?

Создать кнопку с помощью custom buttons?

P.s.спасибо за помощь.

Отредактировано vurdalak (25-04-2017 08:49:01)

villa7 · №3097

vurdalak
Первый вариант - стиль, второй - custom buttons.

_zt · №3098

Случайно потерял стиль выделяющий сообщения выбранных пользователей на этом форуме, помогите найти!?

Coroner · №3099

_zt, не этот?

скрытый текст

Выделить код

Код:

@-moz-document domain("mozilla-russia.org") {
div.postleft a[href="profile.php?id=ID"] {
-moz-binding: url("data:text/xml,<bindings xmlns='http://www.mozilla.org/xbl'><binding id='profile' bindToUntrustedContent='true'><implementation><constructor><![CDATA[ this.parentNode.parentNode.parentNode.parentNode.parentNode.setAttribute(%22applystyles%22, true); ]]></constructor></implementation></binding></bindings>#profile") !important;
}
div[applystyles], div[applystyles] div.postleft, div[applystyles] div.postright {
background-color: #403030 !important;
border-color: #403030 !important;
}
}

Annet · №3100

Vitaliy V. пишет

Annet пишет
не удается изменить высоту омнибокса
Если правильно понял то так + высота поиска
только для win 10 (потому что для других ОС не нужно)
скрытый текст
Выделить код
Код:
@-moz-document url("chrome://browser/content/browser.xul") {
  @media (-moz-os-version: windows-win10) {
    :root {
      --toolbarbutton-vertical-inner-padding: 2px !important;
      --toolbarbutton-vertical-outer-padding: 5px !important;
      --backbutton-urlbar-overlap: 6px !important;
    }

    #urlbar,
    .searchbar-textbox {
      font-size: 100% !important;
      min-height: 0px !important;
    }

    window:not([chromehidden~="toolbar"]):not([style*="defaultthemes/compact.header.png"]) #urlbar-wrapper {
      clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path") !important;
    }
  }
}
Если ещё добавить
Выделить код
Код:
#back-button {
  padding-top: 1px !important;
  padding-bottom: 1px !important;
}
то и панель навигации уменьшится

Нет, строка поиска наоборот стала очень тоньше. А мне нужно наоборот.

Полезная информация

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Код:

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Код:

Board footer