Подмена элементов IMG

4Lexx · №1

Подскажите, как быть если нужно подменить все кнопки/фон страницы своими? Пример из п.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 - может есть готовые универсальные?

Отредактировано 4Lexx (23-11-2013 13:12:19)

4Lexx · №2

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

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

Отредактировано 4Lexx (24-11-2013 00:56:54)

4Lexx · №3

okkamas_knife пишет

есть несколько вариантов

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

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

Отредактировано 4Lexx (26-11-2013 07:29:23)

4Lexx · №4

Опять понадобилось "поправить", озадачен) каков правильный селектор для последнего <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;}

и замена <img> с помощью CSS

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

Выделить код

Код:

/* Все в одном селекторе */
.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; /* размер отступа равен ширине нового изображения */
}

желательно на примерах - буду особо благодарен!)

4Lexx · №5

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

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

tr.row2:nth-child(2) > td:nth-child(1) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(1) > img:nth-child(8)
tr.row1:nth-child(3) > td:nth-child(1) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(1) > img:nth-child(5)

Есть (не подходящее) решение похожей проблемы у Ferguss114 - чуствую, что истина где то рядом,)

Отредактировано 4Lexx (06-12-2013 10:55:46)

4Lexx · №6

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

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

iDev.Pi · №7

4Lexx пишет

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

4Lexx пишет

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

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

4Lexx пишет

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

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

4Lexx · №8

iDev.Pi пишет

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

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

iDev.Pi · №9

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

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

Отредактировано iDev.Pi (10-12-2013 15:20:17)

4Lexx · №10

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">

iDev.Pi · №11

4Lexx пишет

Можно работающий пример замены img кнопки?

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

okkamas_knife пишет

в вопросах-ответах есть несколько вариантов.
насколько я понимаю универсального шаблона нет потому картинки могут вставляться разными способами

okkamas_knife пишет

каждый случай отдельно что соответственно требует знаний как оно работает и что можно сделать.

4Lexx · №12

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

Отредактировано 4Lexx (11-12-2013 17:30:31)

iDev.Pi · №13

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

4Lexx · №14

Нашел подходящий шаблон в каком-то из "дефейсов" на 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;}

Вопросы:
1. как заменить img кнопки текстом, или почему не работает такое:

Выделить код

Код:

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

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

Отредактировано 4Lexx (17-12-2013 07:39:53)

4Lexx · №15

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;}

4Lexx · №16

универсального шаблона нет

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

тех исходных - недостаточно

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

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

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

Отредактировано 4Lexx (19-12-2013 08:29:10)

skynet281978 · №17

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

Отредактировано skynet281978 (21-12-2014 18:47:50)

turbot · №18

skynet281978
По идее:

Выделить код

Код:

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

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

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