Поддержка Проблемы и решения Как убрать рамку вокруг отдельных изображений

  • Здравствуйте.
    Вокруг всех картинок отображается рамка.
    Можно ли убрать эту рамку только вокруг некоторых картинок?
    Вот код картинки, где хотелось бы убрать рамку:
    <img class="size-full wp-image-298 alignnone" title="назв.картинки" src="http://ladyinfo.biz/wp-content/uploads/2012/03/Urok-1.png" alt="" width="209" height="43" />

Просмотр 7 ответов — с 1 по 7 (всего 7)
  • Просто добавьте border=»0″ после height=»43″

    Там дело не в border (или по крайней мере не только в border).
    Эта тема оформления окружает все пользовательские изображения padding’ом в несколько пикселей.

    В файле стилей темы styles.css нужно после строчки
    «.entry img{трам-пам-пам чего-то там;}»
    добавить строчку
    «.entry img.noframe {padding:0px; margin:0px; border:0px;}»
    и поменять код картинки на
    <img class="size-full wp-image-298 alignnone noframe" title="назв.картинки" src="http://ladyinfo.biz/wp-content/uploads/2012/03/Urok-1.png" alt="" width="209" height="43" />

    Простое добавление border=»0″ не помогло. (Попробовала сразу его, как более легкое) :).
    Пойду разбирать второй вариант. 🙂

    Получается, в каждую картинку нужно добавлять noframe, перед именем картинки.

    Интересно, а как вы поступаете, если много кнопочек надо вставлять в сайте. А кнопочки раз — и обводятся такой рамкой…
    Каждую кнопку перекодировать, или в стилях отказаться от рамок вообще?

    Рамки добавляют симпатичности… 🙂 Вроде как совсем отказываться бы не хотелось…

    Кнопок на сайте не так уж и много. Ну 10, 20, 50, в конце концов. Можно класс проставить для каждой.

    Удобно делать это так: в визуальном редакторе при наведении на изображение появляется кнопочка, по нажатию на которую открываются свойства изображения. Там во вкладке «дополнительно» можно указать свой класс для этого изображения. Может это легче окажется, нежели вручную код (т.е. страничку в html-режиме) править.

    Более легкого способа решить поставленную задачу я не вижу. Либо отказываться от рамок вообще везде, либо как-то помечать изображения, где кнопок быть не должно. Третьего не дано, учитывая что и кнопки, и другие изображения находятся прямо в тексте страниц (т.е. внутри класса .entry) и друг от друга ничем принципиальным не отличаются.

    Как на своем сайте поступил бы я? Я бы ни в жизни не стал отдельно стоящие кнопочки делать картинками. Для этого есть единственно правильный инструмент — CSS. Т.е. блок с текстом для «кнопки» помечаем особым классом и… и всё! Вся остальная работа делается средствами CSS.

    Второй вариант тоже не помог.
    Вот кусочек кода, который, как я думаю, отвечает за рамку (в точности такого кусочка нет, как Вы написали).
    Вон где я вставила вашу строчечку:

    /* Image borders */
    img[class*="align"],
    img[class*="wp-image-"],
    #content .gallery .gallery-icon img {
    	border: 1px solid #ddd;
    	padding: 6px;
    }
    ".entry img.noframe {padding:0px; margin:0px; border:0px;}"
    .wp-caption img {
    	border-color: #eee;
    }
    a:focus img[class*="align"],
    a:hover img[class*="align"],
    a:active img[class*="align"],
    a:focus img[class*="wp-image-"],
    a:hover img[class*="wp-image-"],
    a:active img[class*="wp-image-"],
    #content .gallery .gallery-icon a:focus img,
    #content .gallery .gallery-icon a:hover img,
    #content .gallery .gallery-icon a:active img {
    	background: #eee;
    	border-color: #bbb;
    }
    .wp-caption a:focus img,
    .wp-caption a:active img,
    .wp-caption a:hover img {
    	background: #fff;
    	border-color: #ddd;
    }

    Еще выше был кусочек кода, который начинался вот так:

    /* Images */
    .entry-content img,
    .comment-content img,
    .widget img {
    	max-width: 97.5%; /* Fluid images for posts, comments, and widgets */
    }
    img[class*="align"],
    img[class*="wp-image-"] {
    	height: auto;
    }
    img.size-full {
    	max-width: 97.5%;
    	/* width: auto; */ /* Prevent stretching of full-size images with height and width attributes in IE8 */
    }
    .entry-content img.wp-smiley {
    	border: none;
    	margin-bottom: 0;
    	margin-top: 0;
    	padding: 0;
    }

    Какой из них нужный?

    1. Ну Семён-Семёныч… Кавычки-то надо убрать!
    2. В Вашей теме вместо класса .entry (как у меня) используется класс .entry-content. Строчка должна быть такой:
    .entry-content img.noframe {padding:0px; margin:0px; border:0px;}
    где её располагать — безразлично, но из соображений удобства дальнейшей поддержки сайта целесообразно сделать это после:

    .entry-content img,
    .comment-content img,
    .widget img {
    	max-width: 97.5%; /* Fluid images for posts, comments, and widgets */
    }

    3. И вообще, для того, чтобы всё гарантированно получилось, надо посмотреть, какие классы реально браузер использует при отображении картинки. Вы можете посмотреть это самостоятельно через Opera Dragonfly или Firefox Firebug, либо дать мне ссылку на страничку с таким образом внедренной картинкой, посмотрю я.

    4. Можно вообще не париться с изменением CSS и тупо использовать класс wp-smiley для кнопок. Кривовато с точки зрения чистоты кода, но работать будет 100%.

    Не, строчку вставила в стили, не работает.
    А в свойствах картинки добавила в дополн. — wp-smiley —
    и фсё! Как по волшебству рамочка исчезла!
    Класс!
    Спасибо! 🙂

Просмотр 7 ответов — с 1 по 7 (всего 7)
  • Тема «Как убрать рамку вокруг отдельных изображений» закрыта для новых ответов.