1. Главная
  2. Блоги
  3. Блог ZanaDLucTyc

[РЕШЕНО] Обтекание текстом картинки, кастомизация шаблона

Главные вкладки

Аватар пользователя ZanaDLucTyc ZanaDLucTyc 5 октября 2011 в 15:01

Извиняюсь за набивший уже всем оскомину сабж, но никак не могу разобраться. И так, что мы имеем:

  • Drupal 7.8
  • Установлен бесплатный шаблон MAYO: слегка поигрался с цветовой гаммой и настройками - больше ничего не менял.
  • Установлен CSS Injector. Соответственно, вместо изменения style.css шаблона - пытался протолкнуть мелкие изменения данным инструментом.

Задача проста и понятна: необходимо организовать обтекание картинки в тизере (в ленте на главной) и в полной версии статьи для дефолтных типов материалов.

Я уже понял, что это организуется чем то типа

блаблабла img {
    float: left;
}

, но вот что конкретно туда вписывать и как это сработает - никак не могу понять. На друпал.ру много постов на эту тему, перечитал если не все - то многие. Суть везде одна. CSS, по сути, - не знаю. Поэтому методом тыка пробовал такой алгоритм:

1. Открываю код страницы (средствами Chrome), нахожу там кусочек, в который обернута моя картинка.

<div class="content">
  <div class="field field-name-field-image field-type-image field-label-hidden">
    <div class="field-items">
      <div class="field-item even" rel="og:image rdfs:seeAlso" resource="http://cogitatus.ru/sites/default/files/styles/medium/public/field/image...>
        <a href="/node/17"><img typeof="foaf:Image" src="http://cogitatus.ru/sites/default/files/styles/medium/public/field/image... alt=""></a>

/*Ну и там закрывающие тэги*/

2. Пробовал нечто вроде

div.content div.field.field-name-field-image.field-type-image.field-label-hidden div.field-items div.field-item.even img {
    float: left;
}

Видать, совсем что то бредовое написал - не заработало. Но когда навожу мышкой на соответствующую строчку кода, Chrome в всплывающей подсказке выдавал синтаксис типа такого: div.блаблабла

Пробовал что то типа

img {
    float: left;
}

или

.node img {
    float: left;
}

- тоже не помогло.

При чем, когда редактировал статью после иньекции, в предпросмотре вроде бы обтекание я видел и для полной и для сокращенной версий заметки. Ничего не понимаю.

1. Кто работает с CSS Injector - насколько его использование вообще оправдано на работающем сайте? Существует ли вероятность, что это модуль не отрабатывает как надо в моем случае?
2. Я немного опасаюсь редактировать файлы самого шаблона. При обновлении шаблона с drupal.org'а файл затрется, наверное? Или при редактуре бесплатного шаблона надо сделать новую подтему / тему? Как вообще это организовать профессионально?
3. Ну и наконец, я чуствую, что код привведенный не валиден. Но понять, что же я не так написал - не могу. И вообще, смысл написанного - тоже не понимаю, делал все наобум. Сказывается незнание CSS и верстки вообще. Может кто-то носом ткнуть?

P.S. Ссылка та сабж - тут.
P.P.S. Решить нужно именно так, как описано в самом начале: для всех страниц и статей - как для полной, так и для сокращенной версии.

Комментарии

Аватар пользователя ZanaDLucTyc ZanaDLucTyc 5 октября 2011 в 15:19

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

Я идиот Smile
Не увидел большой и славной кнопки в самом верху Smile

Аватар пользователя neltharian neltharian 5 октября 2011 в 16:54

едрить. Вот зачем извращаться с модулями которые для совсем тупых и ленифых? руками в самому в стайле впадло править?

2. Далее - я лично изменения делаю всюда даже в модулях если ОЧЕНЬ надо. НО оставляю запись о том что и где я поменял.

далее. Учимся пользоваться фаер багом или хромом.

Вы смотрели какой размер занимает див field-item even??? так вот он на всю ширину контента. Проверяем размер (и не только его)

ПС код в пункте 2 в принципе правилен но я бы сдела его чуть короче (обернул картинку на уровне шаблона в уникальный див)

Аватар пользователя ZanaDLucTyc ZanaDLucTyc 5 октября 2011 в 18:18

"neltharian" wrote:
едрить. Вот зачем извращаться с модулями которые для совсем тупых и ленифых? руками в самому в стайле впадло править?
2. Далее - я лично изменения делаю всюда даже в модулях если ОЧЕНЬ надо. НО оставляю запись о том что и где я поменял.
далее. Учимся пользоваться фаер багом или хромом.
Вы смотрели какой размер занимает див field-item even??? так вот он на всю ширину контента. Проверяем размер (и не только его)
ПС код в пункте 2 в принципе правилен но я бы сдела его чуть короче (обернул картинку на уровне шаблона в уникальный див)

По поводу модуля - оукей, попробую непосредственно с шаблоном поработать, логируя действия где нибудь.

По поводу field-item.even не понял? При чем тут это? Контент то все равно будет занимать указанную ширину - мне просто надо внутри него перераспределить указанные сущности (текст и картинку). Я упускаю что то очевидное. Серьезно, вообще не понимаю - что вы имеете ввиду.

*Ушел читать мануалы по CSS*

Да и потом. Код типа

img {
    float: left;
}

тоже не сработал. Если я правильно понял, он должен был везде и к любой картинке применить данный стиль. Не?

"neltharian" wrote:
я бы сдела его чуть короче (обернул картинку на уровне шаблона в уникальный див)

То есть? Описать каким-то образом новый уникальный div - и дальше только его использовать?

мой_новый_див img {
float: left
}

Так?

P.S. Похоже, действительно пора перелопатить какой-нибудь талмуд по CSS. А то все эти div'ы, class'ы, синтактис - как китайский язык. Smile

Аватар пользователя neltharian neltharian 5 октября 2011 в 23:19

"ZanaDLucTyc" wrote:
По поводу field-item.even не понял?

он у тебя занимает всю ширину и тексту некуда подняться чтобы обтекать картинку. поставь этому диву размер картинки и обтекание. увидиш

"ZanaDLucTyc" wrote:
мой_новый_див img {
float: left
}

да.

и вообще надо читать прежде чем начинать и спрашивать

Аватар пользователя ZanaDLucTyc ZanaDLucTyc 8 октября 2011 в 17:56

Update. Немного почитал мануалы, повозился с css.

1. Я так и не смог вкурить, по какому принципу и что надо оставить в css, что бы конкретно это поле отображалось нужным мне способом. В шапке темы описывал код, который сделал просто перечислением всех обертывающих его div'ов. Сказали, что по какой то причине - не правильно. Ну извините, я идиот. Впору писать большими буквами "F1 F1 F1". Никто не сможет кинуть готовый код?

2. Пробовал варианты указать float:left и для .field-field-image (на d.org для CCK полей именно такие рекомендации встретил), и img (ну это то должно было в любом случае сработать - для всего подряд и для статьи в частности) и .node img (это должно было сработать тоже, насколько я понимаю или не понимаю механизм работы css) - и ничего (!) не сработало. Почему? Вот это интересно было бы узнать.

3. Пробовал самые разные варианты кода (см. пункт 2) вписывать в style.css, модулях CSS Injector и Code per Node. Для Code per Node пробовал код включать на уровне типа материала и непосредственно в конкретную ноду. Ничего из перечисленного выше не помогло. Но заметил интересную особенность: при редактировании материала (если то важно, то в оверлее редактирование у меня) есть функция предпросмотра. Так вот, при предпросмотре картинку текст таки обтекает - все зашибись. Но при сохранении / просмотре ноды (в любом виде - и в ленте и в полной версии) - обтекания все таки нет!

4. Последнее, чтоя сделал - в .node img помимо float: left добавил свойство margin: 10px 10px 10px 10px. На 100% не ручаюсь, но вроде-бы это свойство таки сработало. Визуально картинка слегка сдвинулась от края блока с контентом.

Словом, я опять ничего не понимаю. Возможно, это особенность выбранного шаблона (MAYO)? Но ведь с другим шаблоном img {float: left;} тоже не работало. И если margin все-таки сработал, то почему float нет?

P.S. Продублирую ка я тут ссылку на сабж: тыц.