Возможно ли добавить задний фон в расширение?

atnet2233 · №1

очень нравится данное расширение, заменяющее стандартную стартовую страницу - https://addons.mozilla.org/ru/firefox/addon/quickstart/
К сожалению в нем нет функции добавления заднего фона, он просто серый. Возможно ли как-то заменить этот серый фон на собственное изображение?

mokujin · №2

можно. Узнай(посмотри внутри расширения или при помощи Инструментов разраба) url и\или id фона и установи свою картинку\цвет\градиент.
Как пример, фон для newtab: (userContent.css)

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

Выделить код

Код:

@-moz-document url("about:newtab") {

    body {
        background-image: -moz-radial-gradient(center, ellipse cover, #444 0%, #111 100%) !important;
        }
  }


/* или картинка, лежит рядом с userContent.css. Размер картинки лучше не превышать(размер монитора) и почитать про [i]background-size[/i] и [i]background-repeat[/i] */

body {
	background-image: url("./mozaiq.jpg") !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;

	}

Отредактировано mokujin (08-10-2020 21:33:52)

atnet2233 · №3

mokujin пишет

можно. Узнай(посмотри внутри расширения или при помощи Инструментов разраба) url и\или id фона и установи свою картинку\цвет\градиент.
Как пример, фон для newtab: (userContent.css)
скрытый текст
Выделить код
Код:
@-moz-document url("about:newtab") {

    body {
        background-image: -moz-radial-gradient(center, ellipse cover, #444 0%, #111 100%) !important;
        }
  }


/* или картинка, лежит рядом с userContent.css. Размер картинки лучше не превышать(размер монитора) и почитать про [i]background-size[/i] и [i]background-repeat[/i] */

body {
	background-image: url("./mozaiq.jpg") !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;

	}

Класс) постараюсь разобраться, никогда ничего не менял внутри расширения, только в userContent.css

atnet2233 · №4

mokujin пишет

можно. Узнай(посмотри внутри расширения или при помощи Инструментов разраба) url и\или id фона и установи свою картинку\цвет\градиент.
Как пример, фон для newtab: (userContent.css)
скрытый текст
Выделить код
Код:
@-moz-document url("about:newtab") {

    body {
        background-image: -moz-radial-gradient(center, ellipse cover, #444 0%, #111 100%) !important;
        }
  }


/* или картинка, лежит рядом с userContent.css. Размер картинки лучше не превышать(размер монитора) и почитать про [i]background-size[/i] и [i]background-repeat[/i] */

body {
	background-image: url("./mozaiq.jpg") !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;

	}

все, я нашел и параметр для фона и где можно сделать больше столбоцв в ряд. Уже подставлял свои значения и они менялись. вот скрины: https://ibb.co/pRY0rsB и https://ibb.co/9HdQLF9

А как теперь мне все это теперь закрепить, чтобы постоянно работали значения, которые я прописываю? номер (id) приложения я нашел через "справка" , в папке extensions я нашел .xpi фаил с таким же id, который я открыл с помощью zip

Отредактировано atnet2233 (09-10-2020 02:02:36)

sandro79 · №5

atnet2233 пишет

К сожалению в нем нет функции добавления заднего фона, он просто серый. Возможно ли как-то заменить этот серый фон на собственное изображение?

https://forum.mozilla-russia.org/viewto … 43#p784843

А как теперь мне все это теперь закрепить, чтобы постоянно работали значения, которые я прописываю?

Прописать в userContent.css, вам же выше сказали. Проще чем расширение править, его же надо ещё будет подписать после правки или через костыль неподписанное ставить.

mokujin · №6

atnet2233 пишет

никогда ничего не менял внутри расширения, только в userContent.css

sandro79 пишет

Прописать в userContent.css, вам же выше сказали.

... копаться в расширении нужно только чтоб найти нужные id, изменения добавляй в ~~userChrome~~userContent.css
А кол-во колонок, наверное нужно вписывать в :root ибо судя по фоткам это переменные в коде CSS расширения. Изучите CSS-переменные за 5 минут
Типа того:

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

Выделить код

Код:

@-moz-document url-prefix("moz-extension://твое_расширение/") {

:root {
    --nr-columns: 12 !important;
    }

.....а дальше стили для боди с фоном.

}

Отредактировано mokujin (09-10-2020 03:33:14)

atnet2233 · №7

скрины: https://ibb.co/515PbvG https://ibb.co/RjTwLvX хм, может я что-то не так делаю, но не удается внести изменения. Браузер перезагружал после внесения и пробовал еще отключить и включить расширение. пробовал еще точно как тут делать: https://forum.mozilla-russia.org/viewto … 43#p784843

Отредактировано atnet2233 (09-10-2020 03:10:18)

mokujin · №8

во-первых в userContent надо(выше я ошибся, поправил). А во-вторых, синтаксис CSS неверный, посмотри примеры, найди ошибки. backgroun-image у тебя к какому элементу относится? - никакому. А должен хотяб к body(забудь за скрины с кодом, так делают дурни. приводи свой код в тексте в тэгах 'code', так проще будет всем):

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

Выделить код

Код:

/*  userContent.css  */

@-moz-document url-prefix("moz-extension://ИД_твоего_расширения/") {
  :root{ .. код с переменными..}

  body {   ..... твой код для фона с картинкой ....   }
}

atnet2233 · №9

все работает, спасибо вам большущее за помошь!)
"--nr-columns: 12 !important;" это тоже body был.
Единственное, что не меняется (пробовал и с root: и с body) это "padding:var(--spacing-large)" , где нужно large на small заменить.

Выделить код

Код:

._2-Cvn83C8WTdWQ1hsW9LcO {
 display:flex;
 flex-direction:column;
 min-height:100vh;
 padding:var(--spacing-large)
}

mokujin · №10

atnet2233 пишет

это "padding:var(--spacing-large)"

Перевожу код: установить свойство элемента padding взяв значение из переменной --spacing-large (которая определенна в :root). Яж выше давал ссылку на стотью где доступно за переменные разжёвано. Изучите CSS-переменные за 5 минут
Можешь 'отступ' padding задать сам в пикселях или процентах, (padding: 20px !important;) не используя переменные. Везде где в значении идет var(--что-то-там) можешь ставить пиксели или проценты, смотря что принимает свойство.
В общем, почитай трошки за CSS, будет проще и быстрей.

atnet2233 · №11

mokujin пишет

atnet2233 пишет
это "padding:var(--spacing-large)"
Перевожу код: установить свойство элемента padding взяв значение из переменной --spacing-large (которая определенна в :root). Яж выше давал ссылку на стотью где доступно за переменные разжёвано. Изучите CSS-переменные за 5 минут
Можешь 'отступ' padding задать сам в пикселях или процентах, (padding: 20px !important;) не используя переменные. Везде где в значении идет var(--что-то-там) можешь ставить пиксели или проценты, смотря что принимает свойство.
В общем, почитай трошки за CSS, будет проще и быстрей.

Доброго дня) изменяю "large" на "small" или на свое значение в "padding:var(--spacing-large)" , но в расширении изменения не вносятся, ничего не меняется.
Пробовал с :root прописывать в разном виде, изучил тему по ссылке "Изучите CSS-переменные за 5 минут" - начал пробовать с root.style.setProperty прописывать и некоторыми другими значениями из статьи (хотя скорее всего это совершенно не то, что необходимо использовать, но я на всякий случай попробовал).
Вот скриншоты расположения этого кода: https://ibb.co/M76Xz77 и https://ibb.co/bLygxHj
И еще раз сам код ниже:

Выделить код

Код:

._2-Cvn83C8WTdWQ1hsW9LcO {
 display:flex;
 flex-direction:column;
 min-height:100vh;
 padding:var(--spacing-large)
}

заранее извиняюсь, возможно что-то упускаю

Отредактировано atnet2233 (09-10-2020 18:10:58)

mokujin · №12

А не обратил внимание, что везде где я или sandro79 приводили примеры кода, везде после значений стоит ключевое слово !important Тыж пейсал, что ковырялся в userContent. Если ты хочешь перебить значение CSS расширения\страницы, своим значением - нужно вписывать !important везде где должно быть перебито.

У тебя должно быть как-то так:

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

Выделить код

Код:

:root {
    --spacing-large: 20px !important;  <---- здесь не уверен, надо ли. но лучше тупо завести переменную свою, с другим именем чем в ориг. файле и уже работать со своей var↓
    --space-large: 20px;
    }

._2-Cvn83C8WTdWQ1hsW9LcO {
 display:flex;
 flex-direction:column;
 min-height:100vh;
 padding:var(--space-large) !important;    < ------------------ импотант !!111
}

или просто

Выделить код

Код:

._2-Cvn83C8WTdWQ1hsW9LcO {
 display:flex;
 flex-direction:column;
 min-height:100vh;
 padding: 20px !important;      < ------------------ импотант !!111
}

atnet2233 · №13

mokujin пишет

А не обратил внимание, что везде где я или sandro79 приводили примеры кода, везде после значений стоит ключевое слово !important Тыж пейсал, что ковырялся в userContent. Если ты хочешь перебить значение CSS расширения\страницы, своим значением - нужно вписывать !important везде где должно быть перебито.
У тебя должно быть как-то так:
скрытый текст
Выделить код
Код:
:root {
    --spacing-large: 20px !important;  <---- здесь не уверен, надо ли. но лучше тупо завести переменную свою, с другим именем чем в ориг. файле и уже работать со своей var↓
    --space-large: 20px;
    }

._2-Cvn83C8WTdWQ1hsW9LcO {
 display:flex;
 flex-direction:column;
 min-height:100vh;
 padding:var(--space-large) !important;    < ------------------ импотант !!111
}
или просто
Выделить код
Код:
._2-Cvn83C8WTdWQ1hsW9LcO {
 display:flex;
 flex-direction:column;
 min-height:100vh;
 padding: 20px !important;      < ------------------ импотант !!111
}

Все работает) спасибо тебе огромное! нужно было добавить !important к изменяемому значению и все)

mokujin · №14

Все работает) нужно было добавить !important к изменяемому значению и все)

Ну, дЫк, кавабанга! Да будет :rock: & :iron:

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