Разработчикам

css

RSS

css, подключение нескольких стилей к шаблону

Пользователь 45193

Посетитель

Сообщений: 83 Баллов: 6 Регистрация: 08.07.2009

11.07.2009 18:43:31

Вообщем есть следующая проблемка. Необходимо подключить к шаблону дополнительный стиль, который будет исправлять баг с отображением png-рисунков для IE6 и младше. Как лучше это сделать? Заранее спасибо за ответ

Пользователь 10869 Гуру Сообщений: 1710 Баллов: 265 Регистрация: 09.04.2007	#2 11.07.2009 19:07:44 http://htmlbook.ru/ www.yunaliev.ru \| Хостинг для 1с-Bitrix

Пользователь 45193

Посетитель

Сообщений: 83 Баллов: 6 Регистрация: 08.07.2009

11.07.2009 19:22:10

ну это понятно, я вот что имел в виду. в шаблоне можно подключить стиль - через файл стилей шаблона(template_styles.css). Хотелось узнать, есть ли автоматическая возможность подключения еще одного файла, "добавить файл стилей", но как я понял ее видимо нет. Ладно, ручками пропишем

Пользователь 23714 Эксперт Сообщений: 288 Баллов: 62 Регистрация: 18.04.2008	#4 11.07.2009 20:27:35 $APPLICATION->SetAdditionalCSS("/bitrix/templates/demo/additional.css"); Консультации по маркетплейсу. Установка, настройка, доработка решений

Пользователь 45193 Посетитель Сообщений: 83 Баллов: 6 Регистрация: 08.07.2009	#5 11.07.2009 21:25:58 большое спасибо

Пользователь 45193

Посетитель

Сообщений: 83 Баллов: 6 Регистрация: 08.07.2009

15.07.2009 23:11:52

что-то никак не удается правильно отображать png-картинки в IE 6
Пользуюсь следующим решением (IE PNG FIX): http://www.twinhelix.com/css/iepngfix/
на локальном хосте битрикса не стоит и шаблон у меня отлично работает, все правильно отображается
никак не получается заставить данное решение на хостинге с битриксом

есть шаблон test. в его каталог залил три файла: pngfix.css, iepngfix.htc и blank.gif
т.е. путь до них следующий /bitrix/templates/test/

содержимое файла pngfix.css следующее:
допустим для лого
#header_logo {
behavior: url(/bitrix/templates/test/iepngfix.htc);
}
пробовал прописывать и относительные пути, но успеха это не принесло

стиль pngfix.css добавлял и вручную, и с помощью $APPLICATION->SetAdditionalCSS("/bitrix/templates/test/pngfix.css"), однако и это на результат не повлияло...

вот... где копать, что делать?

Пользователь 10869 Гуру Сообщений: 1710 Баллов: 265 Регистрация: 09.04.2007	#7 15.07.2009 23:24:13 я так делаю .style { background: url("../img/bg_right.png"); //background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=img/main_win/bg_right.png, sizingMethod=scale); } www.yunaliev.ru \| Хостинг для 1с-Bitrix

Пользователь 45193 Посетитель Сообщений: 83 Баллов: 6 Регистрация: 08.07.2009	#8 15.07.2009 23:34:32 у меня еще для файлов iepngfix.htc и blank.gif права следующие - -rw-r--r-- хотя мне кажется, они тут никак повлиять не могут... Рамиль, а поподробнее можно ли узнать? знак // обязательно ставить?

Пользователь 10869

Гуру

Сообщений: 1710 Баллов: 265 Регистрация: 09.04.2007

15.07.2009 23:38:46

Цитата
theo_ пишет: знак // обязательно ставить?

это хак для всех версий IE он обязателен

www.yunaliev.ru | Хостинг для 1с-Bitrix

Пользователь 45193 Посетитель Сообщений: 83 Баллов: 6 Регистрация: 08.07.2009	#10 15.07.2009 23:47:05 Спасибо! это в случае background'a или даже для непосредственно тега img? картинка обязательно должна быть ссылкой

Пользователь 45193

Посетитель

Сообщений: 83 Баллов: 6 Регистрация: 08.07.2009

#11

16.07.2009 00:11:26

попробовал еще вот такой вот способ

html:

Код
<a><img id="logo" src="/bitrix/templates/test/images/logo.png" width="50" height="50" alt="" title="" /></a>

css:

Код
#logo { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/bitrix/templates/test/images/logo.png', sizingMethod='scale'); }

тоже не работает

Пользователь 45193

Посетитель

Сообщений: 83 Баллов: 6 Регистрация: 08.07.2009

#12

16.07.2009 00:24:05

Код

<a href="/"><img id="logo" src="/bitrix/templates/test/images/test.png" alt="" title="" width="50" height="50" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/bitrix/templates/test/images/test.png', sizingMethod='scale');" /></a>

такой код тоже не работает... :cry:

вообщем, спасибо заранее за советы и помощь, понимаю, что данная тема к самому битриксу мало относится, но может кто подскажет.. буду рад ссылкам на сайты на основе 1с-bitrix с рабочим кодом в сети

Пользователь 45193

Посетитель

Сообщений: 83 Баллов: 6 Регистрация: 08.07.2009

#13

16.07.2009 00:48:37

Цитата

theo_ пишет:
что-то никак не удается правильно отображать png-картинки в IE 6
Пользуюсь следующим решением (IE PNG FIX): http://www.twinhelix.com/css/iepngfix/
на локальном хосте битрикса не стоит и шаблон у меня отлично работает, все правильно отображается
никак не получается заставить данное решение на хостинге с битриксом

есть шаблон test. в его каталог залил три файла: pngfix.css, iepngfix.htc и blank.gif
т.е. путь до них следующий /bitrix/templates/test/

содержимое файла pngfix.css следующее:
допустим для лого
#header_logo {
behavior: url(/bitrix/templates/test/iepngfix.htc);
}
пробовал прописывать и относительные пути, но успеха это не принесло

стиль pngfix.css добавлял и вручную, и с помощью $APPLICATION->SetAdditionalCSS("/bitrix/templates/test/pngfix.css"), однако и это на результат не повлияло...

вот... где копать, что делать?

пробовал перемещать файлы iepngfix.htc и blank.gif по разным каталогам: в images шаблона и images сайта, в соответствии менял пути в коде, тоже результатов не дало :cry:

Пользователь 32599 Эксперт Сообщений: 1135 Баллов: 163 Регистрация: 07.11.2008	#14 16.07.2009 01:48:50 почитайте полностью и внимательно http://tigir.com/alpha_png.htm Профессиональная и дорогая вёрстка.

Пользователь 23714

Эксперт

Сообщений: 288 Баллов: 62 Регистрация: 18.04.2008

#15

16.07.2009 01:54:35

Там в .htc файле написано следующее

Цитата
// This must be a path to a blank image, relative to the HTML document(s). // In production use I suggest '/images/blank.gif' or similar. That's all! if (typeof blankImg == 'undefined') var blankImg = 'blank.gif';

Т.е. видите тут путь будет браться из той же папки, откуда вызывается скрипт на котором вы хотите лечить картинки. Т.е. если вы хотите залечить картинки на главной странице сайта - index.php, то вам надо и blank.gif засунуть в корень сайта. А вы суете ее в шаблон сайта, он ее найти и не может. Ну все равно я думаю это не единственая проблема.

Кстати таже фигня и с htc файлом, т.е.

Цитата
#header_logo { behavior: url(/bitrix/templates/test/iepngfix.htc); }

здесь путь надо указывать не относительно css файла, а относительно файла который лечим.

В .htaccess надо добавить это - AddType text/x-component .htc

Цитата
// Use this file in your CSS in place of the .HTC file if it works offline but not online. // It will send the correct MIME type so that IE will execute the script correctly. header('Content-type: text/x-component'); include('iepngfix.htc');

Может в этом проблема что на локалке работает, а на онлайне нет.

В любом случае дурацкий какой-то способ избавиться от проблемы.

Консультации по маркетплейсу. Установка, настройка, доработка решений

Пользователь 23714

Эксперт

Сообщений: 288 Баллов: 62 Регистрация: 18.04.2008

#16

16.07.2009 02:01:41

Ладно, это все круто.

Я думаю, человек уже запарился изучать )).

Лови. Метод нормалек, но пару десятков килобайт тебе добавит в проект ).
http://jquery.andreaseberhard.de/pngFix/index.html

Консультации по маркетплейсу. Установка, настройка, доработка решений

Пользователь 2854

Гуру

Сообщений: 2529 Баллов: 448 Регистрация: 29.11.2005

#17

16.07.2009 02:28:26

theo_, попробуйте так:

1. Cоздайте в шаблоне .default папку iepngfix, получится /bitrix/templates/.default/iepngfix/
2. Скопируйте в эту папку два файла из вашего архива:
- blank.gif
- iepngfix.htc
3. Также создайте в этой папке css-файл iepngfix.css след. содержания:

Код
.pngfix { behavior: url('/bitrix/templates/.default/iepngfix/iepngfix.htc'); }

4. Отредактируйте 15-ю строчку файла iepngfix.htc

Код
if (typeof blankImg == 'undefined') var blankImg = 'blank.gif';

замените ее на:

Код
if (typeof blankImg == 'undefined') var blankImg = '/bitrix/templates/.default/iepngfix/blank.gif';

5. В шаблоне test, например, в файле header.php добавьте строчку:

Код
$GLOBALS['APPLICATION']->AddHeadString('<!--[if lte IE 6]><link href="'.BX_PERSONAL_ROOT.'/templates/.default/iepngfix/iepngfix.css'.'" type="text/css" rel="stylesheet" /><![endif]-->');

6. Убедитесь, что в header.php в блоке <head> присутствует:
$APPLICATION->ShowHead();
или
$APPLICATION->ShowHeadScripts();
$APPLICATION->ShowHeadStrings();

7. В корне сайта в файл .htaccess добавьте на всякий случай строчку:

Код
AddType text/x-component .htc

8. Дальше для png-картинок используйте css-класс .pngfix

Показал "на пальцах", так что без обид если "это все и так понятно".

Пользователь 45193

Посетитель

Сообщений: 83 Баллов: 6 Регистрация: 08.07.2009

#18

16.07.2009 08:16:07

Спасибо всем большое за помощь, все заработало :{}

Единственное, что вот эту строчку руками прописал

Цитата

Sergey Leshchenko пишет:

Код
$GLOBALS['APPLICATION']->AddHeadString('<!--[if lte IE 6]><link href="'.BX_PERSONAL_ROOT.'/templates/.default/iepngfix/iepngfix.css'.'" type="text/css" rel="stylesheet" /><![endif]-->');

C ней не работает, видимо надо $_GLOBALS[...]...
Но это уже не суть

css

Продукты

Управление сайтом

Битрикс24

Интернет-магазин + CRM

Решения

Для интернет-магазинов

Каталог готовых решений

Внедрение

Выбрать партнера

Проверить партнера

Стать партнером