CSS 3 Вставляем картинко в sidebar на my.opera.com

— Posted inUncategorized — 1 min read

Для Mor-goth и для тех, кому может пригодиться.

Зачем это?
Чтоб получить вот такое:

Что сделать?

1. Идём в настройки боковой панели:
https://my.opera.com/ ЛОГИН /account/sidebars.dml
и отмечаем Links в sidebar

2. Заходим в http://my.opera.com/ ЛОГИН /links/ и жмём кнопку "New category".

3. Заполняем, как на скриншоте:

где URL — это адрес, на который нас будет перекидывать при нажатии на картинку (может быть любым).

4. Идём в https://my.opera.com/ ЛОГИН /account/usercss.dml#user-css-edit
и вставляем код:


 
 div.linkinfo a[href*="http://ССЫЛКА В БОКОВОЙ ПАНЕЛИ"],
 div.sidelinx a[href*="http://ССЫЛКА В БОКОВОЙ ПАНЕЛИ"]
 {
   display: block;
   padding-left: 2500px;
   height: 266px;
   line-height: 20px;
   background-image: url("http://ССЫЛКА НА КАРТИНКУ");
   background-repeat: no-repeat;
   background-position: 4px 0px;
 }

где "ссылка в боковой панели" — это URL из пункта 3,
height — высота картинки

5. (Важно!) Ждём минут 10—20…

Другие статьи на тему CSS оформления в my.opera.com

Join the Conversation

  3. класс! спасибо! :)Олег, почаще выкладывай уроки 🙂 очень интересно

  4. Я, эта. :left: Сперва не стал делать отдельную категорию ссылок. Картинка появилась сразу, но была без заголовка (есессно). Сделал новую категорию под неё и… пока что жду. В раздумьях: появится или нет :whistle:

  7. Не поставил галочку Show this category in my blog sidebar ))))Спасибо!! :yes:

  8. Originally posted by overly:padding-left: 2500px;Почему такие поля?А width почему не задан?Кстати, еще бы неплохо поставить content:»;, чтобы текст самой ссылки не показывался.

  9. Хых, Антон, тебе виднее, я уже не помню, почему такой отступ, ширину надо было бы задать, да. А текст ссылки и так вроде не отображается (у меня по-крайней мере). Честно сказать, большей частью параметры подобраны методом тыка, потому что я тогда в css понимал намного меньше, чем сейчас…

  10. Понял, поле нужно, чтобы задвинуть надпись в лес. Так делать нежелательно. Вдруг в каком-то браузере скроллбар появится. Лучше использовать пустой content (не везде работает). Для подстраховки можно сделать текст прозрачным и нулевого размера.А вот width всё-таки задавать необязательно, так как ширина блочным элементов растягивается по ширине родительского элемента.В общем, кавайный код будет примерно таким:div.linkinfo a[href*=»http://ССЫЛКА В БОКОВОЙ ПАНЕЛИ»],
    div.sidelinx a[href*=»http://ССЫЛКА В БОКОВОЙ ПАНЕЛИ»]
    {
    display: block;
    height: 266px;
    background-image: url(«http://ССЫЛКА НА КАРТИНКУ»);
    background-repeat: no-repeat;
    background-position: 4px 0px;
    content: »;
    color: transparent !important; /* подстраховка 1 */
    font-size: 0px; /* подстраховка 2 */
    }

  12. Поправил одно свойство:color: transparent !important;Проверил в браузерах. В последних версиях четырех «нормальных» браузеров код работает. В Эксплорере работает только с версии 7, потому что предыдущие не поддерживают атрибутивные селекторы CSS3 (как a[href*=»…»])

  13. Originally posted by AntonDiaz:предыдущие не поддерживают атрибутивные селекторы CSS3Я как-то давно открыл свой блог в IE6 посмотреть… Он много чего там не поддерживал)

  14. проще перечислить что он поддерживает

Comment