Вид изображений на страницах сайта uCoz

Все статьи на сайтах uCoz удобнее всего писать в динамических модулях, таких как Каталог статей или Новости сайта. Способов добавления изображений в статью несколько. Подробно об этом я уже писала в Как вставить изображение на сайт .

Для меня, самым удобным является способ через форму добавления материалов. Плюсом этого способа является автоматический эффект Fancybox. Но есть важный минус. Картинки эти в самой форме сложно редактировать: размер, положение на странице и другие нюансы.

Но это очень просто сделать с помощью CSS стилей. Предлагаю Вашему вниманию несколько простых вариантов.

✪ DEMO⇊ СКАЧАТЬ

Эти вариинаты на самом деле являются примером редактирования изображений на сайте. Если Вы знаете CSS стили,то Вам не составит труда откорректировать предложенный вариант. Ну а я в свою очередь расскажу как это сделать и какой стиль за что отвечает. В примере везде будет фигурировать серый стиль. Цветовую гамму для других вариантов Вы можете придумать сами или скачать в исходнике, где присутствуют еще голубая и розовая цветовые гаммы.

CSS стили $IMAGE…$

Для того чтобы все изображения в Вашей статье имели один и тот же стиль нужно задать CSS стили для тега img внутри класса eText.

Для этого перейти: Перейти: Панель управления — Дизайн — Управление дизайном (CSS) и в самом конце вставить следующий стиль:

где
border — цвет и ширина границы рамки;
background — фон рамки;
padding — ширина рамки;
width — ширина изображения, высота автоматическая;
margin-left: auto; и margin-right: auto; — автоматтческое выравнивание изображения на странице.

Применив этот стиль все изображения в Ваших статьях будут иметь дегкую серую рамку, а ширина всех изображений будет 500 пикселей.

Но, что делать если Вы хотите применить стили только к одной из картинок. Для этого не обойтись уже без HTML

HTML

Для того,чтобы применить стили только к одной картинке, ее нужно вставлять через панель HTML кодов. Изображение $INAME…$ помещаем между двумя тегами <div> с указанием класса.

Номер IMAGE написать тот, который нужен.

CSS

Теперь CSS стили класса vstavit_img будут отвечать за вид этого изображения.

Вот так, с помощью CSS стилей Вы можете отредактировать вид изображений. Мой пример самый простой. Добавляйте свои стили и экспериментируйте.


Подпишитесь на RSS канал - если Вы хотите первыми узнавать о новых статьях на сайте!!!

Статьи по теме:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *