Добавление эффекта градиента для заголовков на страницах сайта (кивок в сторону Web 2)

Добавление эффекта градиента для заголовков на страницах сайта

Интересно бывает пощупать joomla на предмет возможностей. Вот одна из них.
PS: исходный текст переработан и приведен к нормальному виду по пожеланию AmmiAk

Добавление эффекта градиента для заголовков
По сути это придание обычному шаблону достаточно симпотичного вида. Есть 2 варианта реализации данного эффекта - простой и второй . И третий - использовать в качестве заголовков просто изображения с текстом - "но это же не наш метод" ( (с) Приключения Шурика)
Потребуется
- стилевой файл шаблона = templates_css.css (но в некоторых шаблонах он может иметь другое название - смотрим индексный файл шаблона и сверяемся),
- content.html.php этот файл распологается по пути /cocmponents/com_content/ присутствует по умолчанию во всех сборках джумлы,
- index.php шаблона (присутствует во всех шаблонах),
- текстовый редактор (любой, от notepade до dreamviewer),
- PhotoShop (Gimp, etc) (в принципе, любой графический редактор, позволяющий работать с png, слоями, градиентом, прозрачностью),
- фтп-клиент

Простой.
1. доработка файла content.html.php
ищем конструкцию:

Код (PHP):

1. <?php
2.                         if($mosConfig_title_h1 or ($task=='view')and($mosConfig_title_h1_only_view))
3.                             echo '<h1>'.$row->title.'</h1>';
4.                         else
5.                             echo $row->title;
6. ?>
7.                     </a>
8.                 </td>
9.                 <?php
10.             } else {
11.                 ?>
12.                 <td class="contentheading<?php echo $params->get( 'pageclass_sfx' ); ?>" width="100%">
13.                 <?php HTML_content::EditIcon( $row, $params, $access ); ?>
14. <?php
15.                         if($mosConfig_title_h1 or ($task=='view')and($mosConfig_title_h1_only_view))
16.                             echo '<h1>'.$row->title.'</h1>';
17.                         else
18.                             echo $row->title;
19. ?>

и меняем ее на

Код (PHP):

1. <?php
2.                         if($mosConfig_title_h1 or ($task=='view')and($mosConfig_title_h1_only_view))
3.                             echo '<h1><span></span>'.$row->title.'</h1>';
4.                         else
5.                             echo $row->title;
6. ?>
7.                     </a>
8.                 </td>
9.                 <?php
10.             } else {
11.                 ?>
12.                 <td class="contentheading<?php echo $params->get( 'pageclass_sfx' ); ?>" width="100%">
13.                 <?php HTML_content::EditIcon( $row, $params, $access ); ?>
14. <?php
15.                         if($mosConfig_title_h1 or ($task=='view')and($mosConfig_title_h1_only_view))
16.                             echo '<h1><span></span>'.$row->title.'</h1>';
17.                         else
18.                             echo $row->title;
19. ?>

т.е. мы добавляем к выводу заголовка span. С этим файлом все
2. доработка templates_css.css:
добавляем в стилевой файл

Код (CODE):

1. h1 {
2.   position: relative; /* в этом суть - добавте в существующий h1 эту строку - просто эту строку -  position: relative; */
3. }

дописываем ниже

Код (CODE):

1. h1 span {
2.     background: url(../images/gradient.png) repeat-x; /* указываем путь к изображению с градиентом */
3.     position: absolute; /*позиционируем абсолютно */
4.     display: block;
5.     width: 100%; /*отображаем блоком на всю ширину заголовка */
6.     height: 31px; /*это высота градиентного изображения, можно изменить*/
7. }

3. создание градиентного изображения
создаем градиентное изображение в формате png (png-24) шириной 1px и высотой 31px (см h1 span - height: 31px, но, в принципе, высоту можно задать и свою, тогда в h1 span изменяем height: 31px; на нужное. Градиентную заливку в изображении делайте по своему желанию - цвет, % и прочее. Заливаем в папку /templates/vash_shablon/images/
4. доработка index.php шаблона
у IE он есть проблема с отображением изображений в png-24, поэтому добавляем между <head> и </head> следующий код

Код (CODE):

1. <!--[if lt IE 7]>
2. <style>
3. h1 span {
4.     background: none;
5.     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='<?php echo $mosConfig_live_site; ?>/templates/ваш_шаблон/images/gradient.png', sizingMethod='scale');
6. }
7. </style>
8. <![endif]-->

*Прим.: Вот это - <?php echo $mosConfig_live_site; ?>/templates/ваш_шаблон/images/ в разных шаблонах может отличаться - сверьтесь с синтаксисом шаблона
5. все соответственно заливаем измененные файлы обратно в соответствии с их первоначальным местоположением.
6. Перегружаем браузер (в опере может потребоваться чистка кэша). Градиент начинает отображаться либо при полном просмотре текста, либо в интро части в блоге, для создания такого эффекта в модулях вывода последних новостей/востребованных статей необходимо по аналогии доработать эти модули и либо их стилевой файл, либо класс в основном стилевом файле шаблона

Второй способ
если вы не хотите в коде пустой <span> тэг, то можно осуществить подобное действие через jQuery (библиотеку актуальную на сей момент берем тут),
1. заливаем в шаблонную папку (можно создать отдельную папку для js)
2. подключаем:

Код (CODE):

1. <script type="text/javascript" src="путь до скрипта в соответствии с синтаксисом вашего шаблона/jquery.js"></script>
2.  
3. <script type="text/javascript">
4. $(document).ready(function(){
5.  
6.   //prepend span tag to H1
7.   $("h1").prepend("<span></span>");
8.  
9. });
10. </script>

Для примера www.hospsurg.ru - осуществлен вывод заголовков через данный механизм (css)

Данная методика - адаптация для джумлы оригинальной статьи http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/

Возможно осуществление подобного действия, для придания изображениям подложки ака рамки, но проблема в фиксированном размере изображения (т.е. 100*100 если задать - градиентная рамка будет, а на > или < размерах уже нет). Попытаюсь на тестовом сайте настроить mosimage для этого, результат и механизм внедрения выложу

 

Что я могу сказать, doctorgrif, довольно основательно ты подошел к теме градиентных заголовков в модулях - побольше содержательности и литературности твоим комментариям и можно открывать собственный дизайнерский блог! Молодец!

P.S. Добавление строчных блоков span в заголовки открывает большие возможности по персонализации последних.

 

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

В принципе по поводу "Добавление строчных блоков span в заголовки открывает большие возможности по персонализации последних" - если поковыряться, то можно эти спаны засунуть в интро, и тогда будет гламурное отображение вводной части статьи/новости (прям как на ipod сайтах), но тут будут сложности с во-первых фильтрацией количества символов (графика хоть и тянется, но...), во-вторых, я пока не пробовал - теоретизирую, не выпадет ли эта гламурщина и хованщина при полном просмотре.
То же самое можно провернуть и с модулями кратких новостей - привести к web 2 (что проще, так как он стиль берет из своего файла, ну по крайней мере не дефолтный модуль)

 

Знаем, проходили Такой эффект ооочень здоро смотрится на сайтах, где типографика хорошая. Где размер шрифта хороший

Добавлено через 16 минут
И кстати, такой эффект ОЧЕНЬ здорово смотрится на mosimage

 

Простите, возможно меня сейчас закидают... что тут есть, чем тут можно закидать?... но в общем при чем тут web2.0?

 

если простите, то хз, но типа градиент и прочие гламурности на контенте почему то (ну не я) относят к web 2
если что пинать не меня, а других девелоперов мне просто формулировка понравилась, но, если хотите, смените название на "Добавление эффекта градиента для заголовков на страницах сайта" без Web 2

 

пробовал я его подключить - ну, если картинки ВСЕ одного размера, - срабатывает, если размер раазличается - не работает
вот сейчас и пытаюсь выявить алгорить подключения либо css либо jquery.js к mosimage
пока ...ну musculus gluteus - если админы простят, то переведу - жопа, короче

 

Конечно трудно спорить о том чего на самом деле нету... но все же я думал, что увеличение интерактивности есть главная черта web 2.0