Как убрать рамку в картинках на блоге?

Здравствуйте дорогие друзья. Сегодня с расскажу, как убрать рамку в картинках на блоге wordpress. Этот вопрос может касаться всех, если у них возникнет такая проблема.

как убрать рамку в картинках

Я с этой проблемой столкнулся совсем недавно. А именно, когда начал искать новый дизайн для блога, точнее тему. Кстати, в начале июня блог изменился.

Начал просматривать тему через админку и вижу, чтобы посмотреть, чего не хватает на блоге. Например счетчика посещаемости, виджета обменом трафиком и так далее. Смотрю, что во всех картинках с белым фоном есть рамка темного цвета. И это смотрелось не красиво.

Тем более я стал наполнять статьи необычными картинками с заголовками, которые просто хорошо смотрятся без рамки, и даже лучше воспринимаются на глаз, чем обычные картинки.

Ладно, давайте ближе к теме. Все подобные штучки, рода:

  • Цвет шрифта
  • Его размер
  • И рамка для картинки

Все они изменяются в файле css нашего блога. Кстати можете почитать статью про этот файл, я там все подробно объяснил. На самом деле все проще простого и я разобрался с этой проблемой легко.

Как убрать рамку в картинках на блоге?

Для начала нужно открыть ваш css файл. Есть 2 способа:

  1. Скачав файл с хостинга
  2. Или просто открыв его через админ панель вашего блога.

Каждый способ по своему удобен и выбирайте как вам угодно. Значит перед нами открытый файл и как нам найти именно ту строчку, которая отвечает за рамку в картинках среди такого количества кода?

Запросто. Нажимаем комбинацию клавиш ctrl+F, и перед нами откроется окошко поиска. В онлайн режиме(через админ панель) окошко будет выглядеть вот так

поиск в файле

А скачав файл на компьютер, и открыв его, а так же нажав эту комбинацию клавиш, перед вами откроется это окошко.

поиск кода

Теперь нам надо вставить следующую строчку в строку поиска:

  • art-article img, img.art-article

Этим действием вы найдете следующий код.

.art-article img, img.art-article
{
	border: solid 1px #C4C4C4;
	margin: 1em;

И сразу можно заметить, что рамка равна 1 пиксель и она темно-серого оттенка. Чтобы это исправить нам нужно вместо 1, поставить 0 и все будет в порядке.

После того, как замените код, у нас будет строка следующего содержания.

border: solid 0px #C4C4C4;

Пускай даже цвет остался, это не придаст никакого значения, ведь рамка равна 0. А ноль как известно — это пустое место.

Теперь вы знаете, как убрать рамку в картинках на блоге и знаете, что проблема заключена в коде, а именно в файле css.

На этом у меня все, желаю удачи — до новых встреч.

P.S. Подписывайте на обновление блога, чтобы следить за мини-конкурсами, экспериментами и успехами блога.

Успехов вам и продвижения

С уважением, Фокеев Тимофей

 

 

 

5 комментариев на “Как убрать рамку в картинках на блоге?”

  • Я хотел бы добавить, что не у всех для картинок на блоге заданы такие классы «.art-article img, img.art-article». Здесь я бы посоветовал (если браузер Опера) находясь на странице, нажать правой кнопкой мыши и из списка выбрать пункт «Проинспектировать элемент». Далее нажать левой кнопкой мыши на картинку и можно будет узнать какие именно классы приписаны этой (и другим) картинке. Если через Google Chrome, то нужно нажать на «Просмотр кода элемента».

  • Николай:

    Огромное спасибо!!!

  • В шаблоне gardening_theme

    надо вырезать вот этот код тогда точно рамка вокруг картинки удалим, иначе ничего не помогло.

    .art-article img, img.art-article

    {

    border: solid 1px #A6A6A6;

    margin: 10px;

    }

    .art-metadata-icons img

    {

    border: none;

    vertical-align: middle;

    margin: 2px;

    }

    .art-article table, table.art-article

    {

    border-collapse: collapse;

    margin: 1px;

    width: auto;

    }

    .art-article table, table.art-article .art-article tr, .art-article th, .art-article td

    {

    background-color: Transparent;

    }

    .art-article th, .art-article td

    {

    padding: 2px;

    border: solid 1px #B5B5B5;

    vertical-align: top;

    text-align: left;

    }

    .art-article th

    {

    text-align: center;

    vertical-align: middle;

    padding: 7px;

    }

  • Большое спасибо!!! Очень выручили!!!!

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

Качайте и зарабатывайте
Подписка на обновление

Введите ваш e-mail:

Получать статьи о:

- заработке в интернете

- личном росте

- seo и раскрутке блогов

Подписывайтесь на канал
Лучшие видео на блоге

Главная|Все статьи | Обо мне | Обратная связь | Мои курсы