суббота, 15 ноября 2008 г.

Удаление рамок изображений в Blogger

Как удалить рамки изображений в Blogger?
У меня, например, для изображений внутри блоков сообщений определены следующие стили.

CSS: Изображение с рамкой и отступом


.post img {
padding:4px;
border:1px solid $bordercolor;
}

Что трансформируется в следующее:
.post img {
padding:4px;
border:1px solid #E3635C;
}

То есть: внутри блока сообщения все изображения отображаются с отступом 4 пикселя «внутрь» и рамкой цвета, заданного в разделе «Шрифты и Цвета» как Цвет рамки.

И большую часть времени меня это устраивает ;). Но иногда изображение выглядит заметно лучше без рамки и прочих «выкрутасов».

Логотип Ruby в оформлении рамкойЛоготип Ruby без рамкиТак выглядит логотип Ruby с бордюром и без него, соответственно.

Чтобы избавиться от бордюра вокруг изображений, существует множество способов. Лично я, поскольку «безбордюрные» картинки мне нужны лишь время от времени, просто добавил еще один CSS-класс для изображений, у которых рамка мне не нужна. И назвал этот класс noborder.

CSS: Изображение без рамки и отступа


.post img.noborder {
border-width: 0px;
}


И добавил этот код CSS в шаблон Blogger. Теперь прикрепленному изображению, где мне хочется избавиться от бордюра я просто присваиваю class="noborder". Например:
<img class="noborder" style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 100px; height: 100px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv88kwFA4oy1QDYq-LE1b3i1Wxz1rTOSeB7ZOli4d5vmMbk7kh_sNvDMSWCeIr46jdecPR7durVq06r-pqN-z5SwhWGUEMIBshhILnpsVPpbdY5A3TQTHq5eXc3PtRhSE-8WXaA-OIwzwH/s400/Ruby_logo.gif" border="0" alt="Логотип Ruby без рамки" id="BLOGGER_PHOTO_ID_5268639454841268082" />

9 Комментариев :

Ingward комментирует...

О, спасибо за мануал! Как раз это мне и было нужно!

Кирилл Власюк комментирует...

Спасибо, отличная инструкция!

Den3er комментирует...

Прикольно, как всегда на высоте :) Мне понравилось: с белой рамкой в один пиксель и черной обводкой, прикольно смотрится ..
Я, тут расширил свой блог, но значения положения сообщений блога/дополнительной информации/поиска и т.п. остались стандартными, не нашел где менять - помоги пожалуйста.

Croaker комментирует...

Ширина основной части задается для блока id="content-wrap", боковой панели у тебя нет, «подвал» вроде и так вписывается.

А симпатично шаблон смотрится, только пока как-то незавершенно.

Den3er комментирует...

"Сообщение блога" встало, как, я и хотел, отлично - Спасибо. А, что делать с моей боковой панелью - Писать отдельно координаты в каждом гаджете html кода? Ой, да с радостью - Лижбы работало :) Только не знаю, куда писать, вот к примеру гаджет поиска, там в обще без каких либо координат написано, чудеса .. как лучше сделать?

Изначально хотел сделать в белых тонах, пока получилось так, да и не окончательный это вариант .. Будем расти над собой :)

Croaker комментирует...

Набросал «коротенько» (на 6 оборотов колесика мыши) инструкцию Как вернуть сайдбар в Blogger.

Сидоряка Марина комментирует...

А как добавить такой стиль? Это ж "шаблон" - "настроить" - "дополнительно" - "добавить CSS"? прямо туда?
Можно для совсем чайников - что именно туда вписать?

Croaker комментирует...

Как все в blogger поменялось…

Сидоряка Марина, я бы сделал так: "Изменить HTML" → "Приступить" и вписал стиль между
<b:skin><![CDATA[
и
]]></b:skin>

но сейчас, думаю, через "добавить CSS" будет правильней.

Nemesis комментирует...

После добавления CSS и его применения ничего не произошло. Изменил содержание CSS на

.post img.noborder {
padding: 0;
margin: 0px;
border-width: 0px;
}
и всё сработало!

Отправить комментарий

Жги!