Как добавить изображение на странице продукта

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем SkyLine, 28 июн 2013.

  1. SkyLine

    SkyLine

    Регистрация:
    26 сен 2012
    Сообщения:
    342
    Симпатии:
    640
    Здравствуйте.
    Прошу помощи. Увидел в шаблоне kubera2 добавленные изображения на странице продукта. Brand, Product code...
    [​IMG]

    или посмотреть можно ТУТ
    как можно это реализовать? Заранее спасибо за оказанную помощь.
     
  2. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    560
    В данном случаи там прописаны стили для тегов <i class="icon-globe">
    Т.е. ты дописываешь перед названием теги <i> со своими уникальным классом.
    Затем идешь в таблицу стилей и пишешь:
    .product-info i{
    display:inline-block;
    width:16px;
    height:16px;
    margin-right:8px;
    }
    И для каждого теперь свою картинку
    .product-info i.icon-globe{
    background:url(../image/image.jpg) no-repeat;
    }
    Все.
     
    winner7 и SkyLine нравится это.
  3. brigadir

    brigadir

    Регистрация:
    23 ноя 2012
    Сообщения:
    38
    Симпатии:
    5
    А вчем сложность product.php в шаблоне в нужных местах в ставить <img> соответствующий?
     
  4. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    560
    )) Да в том, что проще всего это делать стилями или так называемыми спрайтами. Загрузил стили раз и все.
     
  5. SkyLine

    SkyLine

    Регистрация:
    26 сен 2012
    Сообщения:
    342
    Симпатии:
    640
    я на сайте использую спрайты но в этом случае затупил )) спасибо за наводку )) сделаю через спрайты. можно убить сообщение ) инфы полезной оно не несет)))
     
  6. Serik

    Serik

    Регистрация:
    13 июл 2013
    Сообщения:
    12
    Симпатии:
    0
    В данном случаи там прописаны стили для тегов <i class="icon-globe">
    Т.е. ты дописываешь перед названием теги <i> со своими уникальным классом.
    Затем идешь в таблицу стилей и пишешь:
    .product-info i{
    display:inline-block;
    width:16px;
    height:16px;
    margin-right:8px;
    }
    И для каждого теперь свою картинку
    .product-info i.icon-globe{
    background:url(../image/image.jpg) no-repeat;
    }
    Все.