Разработка технической документации и технические писатели Технические писатели и разработка технической документации технические писатели в Телеграм 

 obmen_soobsheniyami.png Чат для технических писателей 
 Зарегистрируйтесь
Поиск  Пользователи  Правила  Войти
Форум » Программное обеспечение » Форум Help&Manual
Страницы: 1
RSS
Фон и рамки картинок в темах, использование ID и HTML Class(ов) картинок., Использование css при размещении картинок в темах
 
#1
Мне нравится1
12.02.2018 08:03:49
Кто разобрался как можно добавить рамку для картинки методами CSS.
Код
< cty le>
   img
   {
   border:3 px;
    border-right: 1px solid #D8D8D8;
   border-bottom: 1px solid #D8D8D8;   
   }
   
   #big_pic это ID картинки - не работает.
   {
   border:3 px;
    border-right: 1px solid #D8D8D8;
   border-bottom: 1px solid #D8D8D8;   
   }
   
  big_pic2 это HTML Class картинки - не работает.
   {
   border:3 px;
    border-right: 1px solid #D8D8D8;
   border-bottom: 1px solid #D8D8D8;   
   }
<sty le>
Как изменить свойства картинок, да и таблиц то же через CSS? Например сделать элементарное padding-left: 5px; для ячеек - то же нельзя. Ну смешно просто!!!
Свойства таблиц можно менять в стилях таблиц, но в 7-й версии, в сравнении с 4-й - зарублено много возможностей. Т.е. у 4-й версии CSS работали, а у 7-й нет.
CSS не работает как в шаблоне, так и в "багаже" в файле.
Смысл перехода с 4-й на 7-ю версию из-за "пыль в глаза" - сомнителен. Короче они переработали интерфейс, а возможностей стало НЕ БОЛЬШЕ.
:-(((

Изменено: openid.mail.ru/mail/ip-prog - 14.02.2018 13:45:57
 
 
 
#2
Мне нравится0
16.02.2018 12:55:59

Если правильно понял суть вопроса:

Для рисунков в H+M7 задается ряд инлайн-стилей (<img st yle=”” scr=””>): margin, width, height, border. Зависят от того, какие настройки заданы в окне Open Image. Значения Padding -> в стилях margin, например, “margin: 0px auto 0px auto;”, “border:none;”. Если задать Alignment = Left / Right of Text, в инлайн-стиль пропишется: “float:left;” или “float:right;”.

Чтобы к рисункам применить пользовательский стиль из custom.css, необходимо:

1)      Добавить в Baggage Files файл custom.css.

2)      Подключить его к проекту (если для сборки используется шаблон – к шаблону). При этом строка подключения custom.css должна быть первой из всех строк подключения таблиц стилей (см. снимок).


3)      Создать в custom.css идентификатор или класс для рисунков, например, класс “my_img”.

4)      Прописать для него необходимые свойства.

5)      Если они совпадают/конфликтуют с инлайн-стилями, повысить приоритет при помощи “!important” (см. снимок).


6)      Присвоить идентификатор или класс отдельным рисункам в окне Open Image -> Picture ID или HTML Class.

Всем рисункам проекта идентификатор или класс можно присвоить при помощи функции автозамены. Сохранить проект в формате .hmxp и в отдельную папку. В подпапке topics будут сохранены все xml-файлы топиков. Сделать автозамену при помощи Notepad++ во всех xml-файлах выбранной папки. Примерно так:

<image src      =>          <image class="my_img" src


Результат:
 
 
 
#3
Мне нравится0
16.02.2018 20:04:57
Если уже назначено, но изменить нельзя. В том числа и с помощью !Important.
Попробуйте сами сделать ТОЛЬКО левый отступ в таблице - например 5px. остальные - 0px.
И ещё мне нужно серая рамка вокруг рисунков справа и снизу толщиной 1 px.
В 4-версии это делается вот так: (и работает)

ttt - это ID таблицы (ВСЕХ ТАБЛИЦ)

  #ttt
    {
   border-collapse: collapse;
    }

  #ttt td
    {
  border: 1px solid #D8D8D8;
  padding-left: 3px;
    }
 
  big_pic - это ID рисунков - (ВСЕХ РИСУНКОВ).

  #big_pic
    {
     border-right: 1px solid #D8D8D8;
     border-bottom: 1px solid #D8D8D8;
    }  

Всё что я понял, так это если что задано в редакторе, то с помощью CSS изменить нельзя. Это проверено.
Может есть какие то другие методы., но я их не знаю.
Ковыряться с нотепад++ - незачем поскольку все это делается в 4-ке. Хотя не против бы перейти на более высокую версию.

Если у кого получится переназначить отступ слева ( например,  padding-left: 3px; а для остальных отспуп 0px) для ячеек таблиц, - думаю пригодится многим.
 
 
 
Страницы: 1
Читают тему