Подскажите, как быть если нужно подменить все кнопки/фон страницы своими? Пример из п.12 Уроки стилистики (CSS) не совсем подошел, лишь:

.postdetails:after {content: url(/icon_user_online.png);
    visibility: visible; }
    
IMG[src="./styles/imageset/icon_user_online.png"] {
    display: none; }

И то, с потерей функционала...

знания темы околонулевые, прошу "подоходчивее" ,)

p.s хочется сделать день/ночь стили для нескольких сайтов... Или если кто пользуется stylish - может есть готовые универсальные?

Спасибо!
По "универсальному" что-то не нашлось многовариантных кнопок, или хотя бы dark|light|original. Color toggle и подобные все - двух(
Нашелся еще мощнейший Color That Site! - разбираюсь... Им вроде как-то и кнопки можно перекрасить / заменить...

p.s вопрос #1 остается в силе.)

Смотрел В-О, что-то не нашлось еще примеров... кто мимо проходит, не пожалейте времени - хочется таки разобраться)

Добавлю - нужно в первую очередь для форумов. Вот взять хотя бы за основу иконки данного ("Отсутствует" "Ответить" и т.п) - как?

Опять понадобилось "поправить", озадачен) каков правильный селектор для последнего <img>?

<td class="postdetails" style="border:0;">
    <img width="150" height="150" alt="Аватар" src="./download/file.php?avatar=1520.jpg"></img>
    <br></br>
    <br></br>
    <b
        Зарегистрирован:
    </b>
     Пт окт 04, 2013 12:29 pm
    <br></br>
    <b>
        Сообщения:
    </b>
     34
    <br></br>
    <img width="90" height="44" title="Не в сети" alt="Не в сети" src="./images/icon_user_offline.png"></img>
</td>

table + br, div.postbody + br {display:none !important;}

img[src$="/newtopic.png"]
{content:'newtopic'; !important; background:white;}

/* Все в одном селекторе */
.banner {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(http://notrealdomain2.com/newbanner.png) no-repeat;
width: 180px; /* ширина нового изображения */
height: 236px; /* высота нового изображения */
padding-left: 180px; /* размер отступа равен ширине нового изображения */
}

Проблема в том что целевой элемент "плавает" - аватара может не быть:

Заменить img, сохранив функцию ("online/offline") по таким атрибутам не получается, вот в чем дело...

Что делать когда нет уник. селектора или класса, и номер "прыгает"?))

это не проблема, просто в селекторе "якорных" элементов пару указать и всё. Хоть соседних.

не указывать [title="Не в сети"] и всё сохранится.

Тут, либо вы недопоняли - или до меня дойдет только на примере.)

[title="Не в сети"]
имя атрибута
значение для указанного атрибута

допустим, есть узел element с атрибутом attr принимающим значения on или off
element[attr="on"] - узел element подпадёт под такой селектор только если значение атрибута attr равно on.
element[attr="off"] - узел element подпадёт под такой селектор только если значение атрибута attr равно off.
element[attr] - узел element подпадёт под такой селектор только если у этого узла есть атрибут attr (и не важно с каким значением).

iDev.Pi увы, понятнее как написать код под задачу не стало -) Можно работающий пример замены img кнопки? (см. выше №7):

<img width="90" height="44" title="Не в сети" alt="Не в сети" src="./images/icon_user_offline.png">
<img width="90" height="44" title="В сети" alt="В сети" src="./images/icon_user_online.png">

1 пример есть в моей статье "уроки стилистики (CSS)".
А в остальном, okkamas_knife написал вполне справедливые утверждения:

Еще раз. Можно примеры на основе тех исходных что я приводил?
знаний нет, примеров нет. даже ответа, решаемо ли оно с помощью css -  тоже нет...

нет, тех исходных - недостаточно (по причине, связанной с тем, что сказал okkamas_knife).

Нашел подходящий шаблон в каком-то из "дефейсов" на userstyles.org:

img[src$="/icon_user_offline.png"]{
width:0px !important;
height:0px !important;
background-repeat: no-repeat;
padding-left:90px !important;
padding-top:44px !important;
background-image: url('http://.../icon_user_offline.png')!important;}

ну и еще пара ссылок в тему:
CSS Image Replacement Museum
Nine Techniques for CSS Image Replacement

h1#technique-one {
  width: 250px;
  height: 25px;
  background-image: url(logo.gif);}
h1#technique-one span {
  display: none;}

h1.technique-two {
  width: 2350px; height: 75px;
  background: url("images/header-image.jpg") top right;
  margin: 0 0 0 -2000px;}

h1.technique-three {
  width: 350px; 
  height: 75px;
  background: url("images/header-image.jpg");
  text-indent: -9999px;}

h1.technique-four {
    width: 350px; height: 75px;
    background: url("images/header-image.jpg");
    text-indent: -9999px;}

h1.technique-five {
    width: 350px; height: 75px;
    background: url("images/header-image.jpg");}
h1.technique-five span {
        display: none;}

h1.technique-six {
    width: 350px;
    padding: 75px 0 0 0;
    height: 0;
    background: url("images/header-image.jpg") no-repeat;
    overflow: hidden;}

h1.technique-seven {
    width: 350px; height: 75px;
    background: url("images/header-image.jpg") no-repeat;}
h1.technique-seven span {
        display: block;
        width: 0;
        height: 0;
        overflow: hidden;}

h1.technique-eight {
    width: 350px; height: 75px;
    position: relative;}
h1.technique-eight span {
        background: url("images/header-image.jpg");
        position: absolute;
        width: 100%;
        height: 100%;}

h1.technique-nine {
  width: 350px; height: 75px;
  background: url("images/header-image.jpg") no-repeat;
  font-size: 1px;
  color: white;}

img[src$="/newtopic.png"]
{content:'newtopic'; background:white;}

2. какие еще ресурсы по стилеписанию в рунете рекомендуете посетить?)

okkamas_knife, у вас первый пример (nigma.ru) работает? Ну и все таки как быть в случае форумных кнопок - замена через before/after не для таких случаев... Можно что нибудь из примеров по ссылкам сообразить, или поправить:

img[src$="/newtopic.png"]{
width:0px !important;
height:0px !important;
background-repeat: no-repeat;
padding-left:100px !important;
padding-top:29px !important;
content:"НОВАЯТЕМА";
border-width:1px 2px 2px 1px !important; 
border-style:solid !important; 
background:gray; 
font-size:11pt;}

спасибо ребят!

каких именно?

okkamas_knife, читайте первый пост темы, "урок учил" и ваши примеры я худо бедно применял еще в самом начале. Метод before/after не подходит для множественных замен, а в моих примерах почему-то не работает content:"НОВАЯТЕМА" !important; Еще как то можно заменить кнопку на текст?

p.s №1 после перезагрузки применился... но толку от них обоих?

кто-то может подсказать, как вместо картинки вставить ссылку с её текстом?
что-то типа:
неважно что:after {content: url(ссылка и текст ссылки);
т.е. предполагаю перенести один из элементов меню на одной странице в другое меню на другой странице.
получится так?

skynet281978
По идее:

IMG {
visibility: collapse !important;
}
IMG:before {
content: attr(alt) ': ' attr(href) !important;
visibility: visible !important;
}

Но не работает. Самому интересно, почему.