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

Vitaliy V. · №2801

Duche пишет

А я поменял :after на :before и картинка оказалась под панелью.

Каким образом, она должна слева вверху на кнопке оказаться, если без отступов у меня так.

Duche · №2802

Vitaliy V. пишет

Вообще сначала делаю

Попробовал свой файл перегнать в SVG, Corel + Notepad++ , надо взять SVG в FF на вооружение.

Добавлено 30-08-2016 21:40:08

Duche пишет

Каким образом, она должна слева вверху

Почему "слева вверх" , когда право середина. Позиционированее я подогнал под себя.

Отредактировано Duche (30-08-2016 21:40:08)

Duche · №2803

Duche пишет

Позиционированее я подогнал под себя.

Vitaliy V. Вобщем закопался я . Позиционировал, подгонял и всё мимо. Вроде нормально , но такое ощущение что я подгоняю не фон под страницу сайта, а страницу сайта двигаю по фону. Появляются полосы прокрутки, вертикальные и горизонтальные , хотя страница пустая и имеет одну панель запроса. Прокручиваешь как будто страница заполнена и не помещается в окно. Поправьте пожалуйста код , так чтобы картинка фона была под панелью запроса Яндекс.
Выкладываю скрин что получилось, картинка фона имеет такой же размер что и оригинал 1 к 1. Vitaliy V прошу помощи , по возможности используйте не SVG, а путь к файлу как в коде.
Заранее спасибо.

Картинка:

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

https://cloud.mail.ru/public/LLBG/fgSrxoABk

Код что я наваял:

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

Выделить код

Код:

@-moz-document url("https://www.yandex.ru/") {
    form .search2__input:before {
        content: "" !important;
        position: absolute !important;
        width: 450px !important;
        height: 680px !important;
        background-image: url("resource://chrome/art-160021.png") !important;
        background-repeat: no-repeat !important; background-size: 100% !important;
        margin-top: -85px !important;
        margin-left: -125px !important;
        
    }
}
}

Пример, что получилось:

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

Отредактировано Duche (31-08-2016 10:23:19)

Vitaliy V. · №2804

Duche пишет

Код что я наваял:

Зачем же отрицательный margin-top делать, тут наоборот надо. И одна скобка закрывающая лишняя

Вот как у меня с вашим фоном

Отредактировано Vitaliy V. (31-08-2016 11:31:30)

Duche · №2805

Vitaliy V. пишет

Зачем же отрицательный margin-top делать

Если поправить по Вашим рекомендациям , то всё так и получается, как на Вашем скрине. Вот я , не могу поправить код чтобы получилось как у меня на скрине, но без большой (длинной) полосы прокрутки по вертикали . Как я писал выше страница пустая, имеет одну панель запроса Яндекса без новостных ,погодных и т.д. блоков . Полоса прокрутки такая, как будто внизу по центру что то есть и много, но там пустое белое поле. Весь сайт (окно) находится как бы вверху . Выглядит очень коряво . Я в тупике.

Отредактировано Duche (31-08-2016 12:33:58)

Vitaliy V. · №2806

Duche
У меня нет такого, подчистил страницу вот так выглядит, прокрутки нет

Попробуйте тогда ещё отрицательный margin-bottom: добавить

Duche · №2807

Vitaliy V. пишет

Попробуйте

На margin-bottom: не реагирует ни как . Паласа прокрутки пропадает если для фона задать - margin-top: -288, тогда фон находится справа вверху. Запарился. :whiteflag:

Развернул новый FF , результат ноль.

Отредактировано Duche (31-08-2016 13:36:30)

Vitaliy V. · №2808

Duche пишет

height: 680px !important;

По моему просто слишком большая высота, у вас изображение почти в три раза меньше, сделайте height: 252px !important; и должно быть нормально

Отредактировано Vitaliy V. (31-08-2016 14:08:17)

Duche · №2809

Vitaliy V. пишет

должно быть нормально

Фу-уууууу , отлегнуло. Подскажите , все остальные значения (отрицательный margin-top и т.д.) допустимы в коде, с точки зрения написания CSS.

Примите искреннюю благодарность за Вашу работу и терпение.

Отредактировано Duche (31-08-2016 14:21:27)

Vitaliy V. · №2810

Duche пишет

Подскажите , все остальные значения (отрицательный margin-top и т.д.) допустимы в коде, с точки зрения написания CSS.

Да конечно, маргины могут иметь отрицательные значения.

turbot · №2811

Vitaliy V.

Пытаюсь почистить свгшку, от мусора, но не выходит. Не подскажете, в чем тут проблема:

Выделить код

Код:

<svg xmlns='http://www.w3.org/2000/svg' height='16px' width='16px'> <g style='shape-rendering:crispEdges'><path d='M0,153v153h102l127.5,127.5v-408L102,153H0z M344.25,229.5c0-45.9-25.5-84.15-63.75-102v204    C318.75,313.65,344.25,275.4,344.25,229.5z M280.5,5.1v53.55C354.45,81.6,408,147.899,408,229.5S354.45,377.4,280.5,400.35V453.9    C382.5,430.949,459,339.15,459,229.5C459,119.85,382.5,28.049,280.5,5.1z' style='fill:rgb(121,124,128)'/></g></svg>

Оригинал:

Выделить код

Код:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   version="1.1"
   id="Capa_1"
   x="0px"
   y="0px"
   width="459px"
   height="459px"
   viewBox="0 0 459 459"
   style="enable-background:new 0 0 459 459;"
   xml:space="preserve"
   inkscape:version="0.91 r13725"
   sodipodi:docname="61051.svg"><metadata
     id="metadata42"><rdf:RDF><cc:Work
         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
     id="defs40" /><sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="1366"
     inkscape:window-height="715"
     id="namedview38"
     showgrid="false"
     inkscape:zoom="0.51416122"
     inkscape:cx="229.5"
     inkscape:cy="229.5"
     inkscape:window-x="-5"
     inkscape:window-y="-5"
     inkscape:window-maximized="1"
     inkscape:current-layer="Capa_1" /><g
     id="g3"
     style="fill:#797c80;fill-opacity:1"><g
       id="volume-up"
       style="fill:#797c80;fill-opacity:1"><path
         d="M0,153v153h102l127.5,127.5v-408L102,153H0z M344.25,229.5c0-45.9-25.5-84.15-63.75-102v204    C318.75,313.65,344.25,275.4,344.25,229.5z M280.5,5.1v53.55C354.45,81.6,408,147.899,408,229.5S354.45,377.4,280.5,400.35V453.9    C382.5,430.949,459,339.15,459,229.5C459,119.85,382.5,28.049,280.5,5.1z"
         id="path6"
         style="fill:#797c80;fill-opacity:1" /></g></g></svg>

Vitaliy V. · №2812

turbot
Просто уменьшить размер холста не достаточно получится вот что

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

Координаты соответственно тоже должны быть пересчитаны под размер холста. Либо масштабированы с transform=

Вот как то так, размер 16x16

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

Выделить код

Код:

<svg xmlns='http://www.w3.org/2000/svg' height='16px' width='16px'><g><path d='M 9.8,14 C 15.4,12.6 15.4,3.4 9.8,2 L 9.8,0 C 18,2 18,14 9.8,16 Z M 3.6,10.8 0,10.8 0,5.2 3.6,5.2 8,0.8 8,15.2 Z M 9.8,4.4 C 12.2,5.6 12.2,10.4 9.8,11.6 Z' style='fill:rgb(121,124,128)'/></g></svg>

Да и shape-rendering:crispEdges здесь не нужно

Отредактировано Vitaliy V. (31-08-2016 19:36:19)

turbot · №2813

Vitaliy V. пишет

Координаты соответственно тоже должны быть пересчитаны под размер холста.

А, вот оно что. Спасибо. Черт, придется, значит, inkscape'ом всерьез заняться. Раз на тяп-ляп тут не обойдешься.

Отредактировано turbot (31-08-2016 19:35:19)

Dumby · №2814

turbot пишет

придется, значит, inkscape'ом всерьез заняться

«почистить свгшку, от мусора» или «Вот как то так, размер 16x16»?
Не совсем одно и то же. Вот, глянь, например, как кругляши неодинаковы.

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

Выделить код

Код:

var orig = `
    <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        viewBox="0 0 459 459"
    >
        <g style="fill:#797c80;">
            <path d="M0,153v153h102l127.5,127.5v-408L102,153H0z M344.25,229.5c0-45.9-25.5-84.15-63.75-102v204    C318.75,313.65,344.25,275.4,344.25,229.5z M280.5,5.1v53.55C354.45,81.6,408,147.899,408,229.5S354.45,377.4,280.5,400.35V453.9    C382.5,430.949,459,339.15,459,229.5C459,119.85,382.5,28.049,280.5,5.1z"/>
         </g>
    </svg>
`;
var conv = `
    <svg
        xmlns='http://www.w3.org/2000/svg'
        height='16px'
        width='16px'
    >
        <g>
            <path d='M 9.8,14 C 15.4,12.6 15.4,3.4 9.8,2 L 9.8,0 C 18,2 18,14 9.8,16 Z M 3.6,10.8 0,10.8 0,5.2 3.6,5.2 8,0.8 8,15.2 Z M 9.8,4.4 C 12.2,5.6 12.2,10.4 9.8,11.6 Z' style='fill:rgb(121,124,128)'/>
        </g>
    </svg>
`;
var origURL = "data:image/svg+xml," + encodeURIComponent(orig);
var convURL = "data:image/svg+xml," + encodeURIComponent(conv);

var k = 22;
setTimeout(br => {
    var {body} = br.contentDocument, img;

    (body.appendChild(new Image())).src = origURL;
    img = body.appendChild(new Image());
    img.width = 16*k; img.src = origURL;

    (body.appendChild(new Image())).src = convURL;
    img = body.appendChild(new Image());
    img.width = 16*k; img.src = convURL;

}, 500, (gBrowser.selectedTab = gBrowser.addTab()).linkedBrowser);

turbot · №2815

Dumby пишет

Не совсем одно и то же.

Ну, в общем, и то и то надо. "Как-то так" - в первую очередь. У меня-то стиль не дает большим иконкам CB-кнопок расползаться, а если выкладывать, так надо править, чтоб не втюхивать еще и стиль в нагрузку.

кругляши неодинаковы

У. Но хоть что-то.

Dumby · №2816

turbot пишет

стиль не дает большим иконкам CB-кнопок расползаться

OK. Что мне нужно сделать, чтобы иконка этой кнопки расползлась?

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

Выделить код

Код:

custombutton://%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0D%0A%3Ccustombutton%20xmlns%3Acb%3D%22http%3A//xsms.nm.ru/custombuttons/%22%3E%0A%20%20%3Cname/%3E%0A%20%20%3Cimage%3E%3C%21%5BCDATA%5Bdata%3Aimage/svg+xml%2C%250A%2509%253Csvg%250A%2509%2509xmlns%253D%2522http%253A%252F%252Fwww.w3.org%252F2000%252Fsvg%2522%250A%2509%2509width%253D%252216%2522%250A%2509%2509height%253D%252216%2522%250A%2509%2509viewBox%253D%25220%25200%2520459%2520459%2522%250A%2509%253E%250A%2509%2509%253Cg%2520style%253D%2522fill%253A%2523797c80%253B%2522%253E%250A%2509%2509%2509%253Cpath%2520d%253D%2522M0%252C153v153h102l127.5%252C127.5v-408L102%252C153H0z%2520M344.25%252C229.5c0-45.9-25.5-84.15-63.75-102v204%2520%2520%2520%2520C318.75%252C313.65%252C344.25%252C275.4%252C344.25%252C229.5z%2520M280.5%252C5.1v53.55C354.45%252C81.6%252C408%252C147.899%252C408%252C229.5S354.45%252C377.4%252C280.5%252C400.35V453.9%2520%2520%2520%2520C382.5%252C430.949%252C459%252C339.15%252C459%252C229.5C459%252C119.85%252C382.5%252C28.049%252C280.5%252C5.1z%2522%252F%253E%250A%2509%2509%253C%252Fg%253E%250A%2509%253C%252Fsvg%253E%250A%5D%5D%3E%3C/image%3E%0A%20%20%3Cmode%3E0%3C/mode%3E%0A%20%20%3Cinitcode%3E%3C%21%5BCDATA%5B/*Initialization%20Code*/%5D%5D%3E%3C/initcode%3E%0A%20%20%3Ccode%3E%3C%21%5BCDATA%5BgBrowser.selectedTab%20%3D%20gBrowser.addTab%28%22view-source%3A%22%20+%20self.image%29%3B%5D%5D%3E%3C/code%3E%0A%20%20%3Caccelkey%3E%3C%21%5BCDATA%5B%5D%5D%3E%3C/accelkey%3E%0A%20%20%3Chelp%3E%3C%21%5BCDATA%5B%5D%5D%3E%3C/help%3E%0A%20%20%3Cattributes/%3E%0A%3C/custombutton%3E

Vitaliy V. · №2817

Не совсем одно и то же

Да уменьшить размер и почистить от мусора не одно и тоже.
Подправил поточнее

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

Выделить код

Код:

<svg xmlns='http://www.w3.org/2000/svg' height='16px' width='16px'><g><path d='M 9.79,14 C 15.6,12.1 15.6,3.97 9.79,2.02 L 9.79,0.128 C 18,2.11 18,13.9 9.79,15.9 Z M 3.58,10.8 0,10.8 0,5.25 3.58,5.25 7.94,0.896 7.94,15.1 Z M 9.79,4.42 C 12.7,5.82 12.7,10.2 9.79,11.6 Z' style='fill:rgb(121,124,128)'/></g></svg>

Про viewBox= в курсе но предпочитаю без него обходится, зачем масштабировать...

Отредактировано Vitaliy V. (01-09-2016 00:52:39)

turbot · №2818

Dumby
Расползались. Раньше. Из-за стилей CTR. Был неправ, подзабыл. Сейчас уже не расползаются и без стиля, видимо Aris поправил.

Vitaliy V.
Спасибо.

Duche · №2819

Добрый день. Прошу помощи по правке кода. Как видно код используется для замены фона . Работает вроде нормально , но есть не большой огрех . При масштабировании окна FF ("свернуть в маленькое окно, меньше четверти экрана 19") у фона появляются незаполненные фоном (белые) зоны ( низ , правая сторона ). В остальных режимах, нормальное окно, полноэкранный режим фон масштабируется нормально. Прошу поправить код в плане заполнения окна во всех режимах окна.

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

Выделить код

Код:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url(https://www.nnm.ru/) {
  body, html {background: url(WWW.jpg) !important; background-attachment: inherit !important;    background-clip: border-box !important;    background-origin: padding-box !important; background-position: center !important; background-repeat: no-repeat !important; background-size: 100% 100% !important} 
}

Отредактировано Duche (03-09-2016 19:23:30)

Vitaliy V. · №2820

Duche

Выделить код

Код:

body {
    background-image: url("изображение") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}

Duche · №2821

Vitaliy V. Результат такой же что и в старом коде. Изображение в маленьком окне, как бы начинается от левого верхнего угла. Если по скролить в маленьком окне появляются белые поля.

Отредактировано Duche (03-09-2016 20:36:06)

Vitaliy V. · №2822

Duche
Что за сайт? Попробуйте добавить к body и/или html
height: 100% !important;
width: 100% !important;

Duche · №2823

Vitaliy V. пишет

Что за сайт

Яндекс

Duche · №2824

Vitaliy V. пишет

Попробуйте добавить к body и/или html

Добавил к body- html , всё получилось.
Спасибо

Vitaliy V. · №2825

Duche пишет

Яндекс

Только нужно auto добавить к html

Выделить код

Код:

html {
    height: auto !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