Оформление красивой подписи к изображению

👍 Научим бесплатно правильно создавать сайты на WordPress. Подробнее →

Приветствую все пытливые умы, которые здесь бывают, которые помогают, и которые получают помощь. Сегодня мне хотелось бы поднять вопрос изменения стандартной подписи к изображению в WordPress, точнее изменению ее стилей.
Черный ящик!… Делая новый сайт, решил, что хочу изменить стиль подписи к изображению в WordPress, просто задумка в том, что подписи будут выводиться обязательно, поэтому это хотелось бы сделать очень приглядно и эстетически красиво. Честно говоря, серое поле не очень хорошо смотрится.
Внимание! Вопрос!… Подскажите, как можно изменить стиль вывода подписи к изображению? Если есть возможность, напишите пример стиля и куда его вставлять в файле стилей, а то я в этом деле не особо силен.
Еще вопрос. Можно ли как-то организовать подпись на самом изображении? Я думаю все видели, когда подпись к изображению накладывается на полупрозрачный черный или другой фон на самом изображении. Может быть это делается плагином? Если да, то каким? Сразу же исключаем вариант NextGEN. Галерея работает на стандартной галерее движка и вдобавок легкий лайтбокс.
Всем заранее спасибо за ответы. Думаю вопрос интересный и его разъяснение пригодится многим.

Создай свой первый сайт на WordPress

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

  1. tiaurus

    У себя в блоге tiaurus.ru я сделал такое оформление подписи к картинке:

    Для этого добавил в style.css:

    div .wp-caption{max-width:100%;}
    .wp-caption { text-align: left; padding:0; margin:0 10px 10px 0; position:relative !important;}
    .wp-caption.alignleft { margin: 0px 20px 20px 0px; float:left; }
    .wp-caption.alignright { margin: 0px 0px 20px 20px; float:right; }
    .wp-caption img { margin: 0 !important; padding: 0 !important; border: none !important; outline:none !important; }
    .wp-caption p.wp-caption-text { font-size: 13px; line-height: 1.2em; padding: 10px; margin: 0 20px 0 0; color:#000; bottom:20px; left:0px; display:inline-block; max-width:90%; position:absolute !important; opacity:0.6; filter:alpha(opacity=60); background:#fff; }
    

    Как видите, у подписи есть свои классы, которые можно индивидуально оформить:
    .wp-caption
    .wp-caption img
    .wp-caption p.wp-caption-text

    Ответить
  2. Alexander автор

    Ничего не получилось. Может не в тот раздел вставлял стиль?

    style.css имеет структуру

    0. CSS Reset ————————- All Theme Files
    1. Page: Common layout elements —— All Theme Files
    2. Page Structure: Header ————- header.php
    3. Navigation ———————— header.php
    4. Secondary Navigation ————— header.php
    5. Page Structure: Content ———— index.php, archive pages
    6. Posts & Custom Widgets ————- index.php, archive pages
    7. Sidebar and Footer widgets ——— sidebar.php
    8. Sidebar Main Menu —————— sidebar.php
    9. Single Post / Page —————— single.php, page.php
    10. Comments Styling —————— comments.php
    11. Footer ————————— footer.php
    12. Archives paged navigation
    13. Lightbox effect (ColorBox) styling

    Куда вставить код?

    Ответить
  3. Alexander автор

    Всё, разобрался, получилось. Код нужно вставлять в блок управления wp-caption в файле style.css, в некоторых шаблонах необходимо прописать в начале каждой строки перед точкой div.
    А так все работает. Спасибо за помощь.

    Ответить