Перейти к публикации

Подключение 2-х стилей

Fillosoff

Автор: Fillosoff,
в Вебдизайн

 Рассказать Подписчики 0

Рекомендованные сообщения

Fillosoff

Fillosoff 1

Опубликовано:
Опубликовано:

Подскажите, как можно подключить в шаблон 2 разных стиля оформления для разных разрешений экрана? а то, на мониторах с разрешением > 1024 - текст слишком мелкий, а если увеличить его, но на мониторах с расширением <= 1024 он просто огромадный.

есть такой решение:

<script language="JavaScript">

<!--

var height=0; var width=0;

if (self.screen) {

width = screen.width

height = screen.height

}

else if (self.java) {

var jkit = java.awt.Toolkit.getDefaultToolkit();

var scrsize = jkit.getScreenSize();

width = scrsize.width;

height = scrsize.height;

}


if (width <= 1024){

	document.writeln('<style type="text/css" media="all">');

	document.writeln('@import url(/templates/4dleru/css/style1.css);');

	document.writeln('</style>');

}else{

	document.writeln('<style type="text/css" media="all">');

	document.writeln('@import url(/templates/4dleru/css/style2.css);');

	document.writeln('</style>');

}

//-->

</script>
предложенное GHostly_FOX, но у меня это не работает. правда, я использовал 
<style type="text/css" media="all">@import url({THEME}/css/style.css);</style>
через 
(/templates/4dleru/css/style.css)

вообще не подключаются.

После подключения, стиль, что идет первой строчкой в шаблоне игнорируется, т.е. если первым подключается в main.tpl style1.css, то ко всему применяется стиль style2.css и наоборот.

Как сделать правильно, чтоб работало??

Ссылка на сообщение
Поделиться на других сайтах
lifestar

lifestar 18

Опубликовано:
Опубликовано:

Kot Da Vinci - Fillosoff, сложно объясняешь :)

правда, я использовал.....через
как это через?

НУ а попробуй абсолютный путь к стилям написать, с http

Ссылка на сообщение
Поделиться на других сайтах
empirator

empirator 0

Опубликовано:
Опубликовано: (изменено)

Kot Da Vinci - Fillosoff, сложно объясняешь

На то он и ФИЛЛОСОФФ.

По сути: у меня приведенный выше ява скрипт работает с такой конструкцией

document.writeln('<style type="text/css" media="all">');

document.writeln('@import url({THEME}/css/style.css);');

document.writeln('</style>');

Изменено пользователем empirator
Ссылка на сообщение
Поделиться на других сайтах
Fillosoff

Fillosoff 1

Опубликовано:
Опубликовано: Автор

полный путь не решит проблемы. это было бы актуально, если бы стили вообще не подключались.

правда, я использовал.....через

я имел ввиду, что предлагается:

document.writeln('@import url(/templates/4dleru/css/style1.css);');
но в таком виде стиль не подключается вообще. я сделал: 
document.writeln('@import url({THEME}/css/style.css);');

тогда стили подключаются в шаблон.

Ссылка на сообщение
Поделиться на других сайтах
empirator

empirator 0

Опубликовано:
Опубликовано:

полный путь не решит проблемы. это было бы актуально, если бы стили вообще не подключались.

правда, я использовал.....через

я имел ввиду, что предлагается:

document.writeln('@import url(/templates/4dleru/css/style1.css);');
но в таком виде стиль не подключается вообще. я сделал: 
document.writeln('@import url({THEME}/css/style.css);');

тогда стили подключаются в шаблон.

Ну тогда скорее всего косяки в стилях. Может ты перепутал таблицы стилей? Т.е. для случая <1024 подключаешь css файл для >1024 и наоборот?

Ссылка на сообщение
Поделиться на других сайтах
Fillosoff

Fillosoff 1

Опубликовано:
Опубликовано: Автор

да нет же! вы не поняли сути вопроса! может, я, действительно сложно объясняю?? :rolleyes:

ничего я не путал. просто работает один единственный стиль - тот, что в main.tpl идет вторым.

допустим, у меня написано:

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

	{headers}

	<style type="text/css" media="all">@import url({THEME}/css/style1.css);</style>

	<style type="text/css" media="all">@import url({THEME}/css/style2.css);</style>

....................................

</head>
подключается на разных мониторах: <=1024 и >1024 с везде только style2.css (вторая строчка) если в main.tpl написано: 
[code]<head>

	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

	{headers}

	<style type="text/css" media="all">@import url({THEME}/css/style2.css);</style>

	<style type="text/css" media="all">@import url({THEME}/css/style1.css);</style>

....................................

</head>

подключается на разных мониторах: <=1024 и >1024 с везде только style1.css (вторая строчка)

но оба стиля враз никак не хотят подключаться!

Ссылка на сообщение
Поделиться на других сайтах
empirator

empirator 0

Опубликовано:
Опубликовано:

но оба стиля враз никак не хотят подключаться!

А если так:

<link rel="stylesheet" type="text/css" href="{THEME}/css/style1.css">

<link rel="stylesheet" type="text/css" href="{THEME}/css/style2.css">

Ссылка на сообщение
Поделиться на других сайтах
lifestar

lifestar 18

Опубликовано:
Опубликовано: (изменено)

или так :)

<script type="text/javascript>

var height=0; var width=0;

if (self.screen)

{

	width = screen.width

	height = screen.height

}

else if (self.java)

{

	var jkit = java.awt.Toolkit.getDefaultToolkit();

	var scrsize = jkit.getScreenSize();

	width = scrsize.width;

	height = scrsize.height;

}

document.writeln('<style type="text/css" media="all">');

if (width <= 1024)

	document.writeln('@import url({THEME}/css/style1.css);');

else

	document.writeln('@import url({THEME}/css/style2.css);');

document.writeln('</style>');

</script>

Изменено пользователем lifestar
Ссылка на сообщение
Поделиться на других сайтах
Fillosoff

Fillosoff 1

Опубликовано:
Опубликовано: Автор

Обязательно попробую, как доберусь до дома. спасибо!

Ссылка на сообщение
Поделиться на других сайтах
lifestar

lifestar 18

Опубликовано:
Опубликовано: (изменено)

в догонку ещё вариант)

<script type="text/javascript>

if (self.screen)

	var width = screen.width;

else if (self.java)

{

	var jkit = java.awt.Toolkit.getDefaultToolkit();

	var scrsize = jkit.getScreenSize();

	var width = scrsize.width;

}

var cssFile = (width < 1025) ? 'style1' : 'style2';

document.write('<link rel="stylesheet" type="text/css" href="{THEME}/css/'+cssFile+'.css">');

</script>

Изменено пользователем lifestar
Ссылка на сообщение
Поделиться на других сайтах
Fillosoff

Fillosoff 1

Опубликовано:
Опубликовано: Автор

lifestar, огроменное спасибо! все работает, только

<script type="text/javascript>
поправил на 
<script language="JavaScript">
а еще вопрос: можно как-то этот скрипт в отдельную папку положить (хотелось бы в идеале все скрипты из шаблона убрать) , допустим: 
 /templates/shab/js/cssvariant.js

?

и как тогда правильно линк прописать в main.tpl?

чет не получается у меня.

и не будет ли из-за этого дольше страница подгружаться?

Ссылка на сообщение
Поделиться на других сайтах
VFK

VFK 0

Опубликовано:
Опубликовано: (изменено)

lifestar, огроменное спасибо! все работает, только

<script type="text/javascript>
поправил на 
<script language="JavaScript">

А зачем, можно поинтересоваться? Насколько мне известно, параметр type является обязательным.

Изменено пользователем VFK
Ссылка на сообщение
Поделиться на других сайтах
lifestar

lifestar 18

Опубликовано:
Опубликовано:

А зачем, можно поинтересоваться? Насколько мне известно, параметр type является обязательным.
вообще правильно, но оно итак будет работать, браузеры игнорируют ошибки такого рода)

и как тогда правильно линк прописать в main.tpl?

чет не получается у меня.

а как пробывал?

<script type="text/javascript" src="{THEME}/js/cssvariant.js"></script>

и не будет ли из-за этого дольше страница подгружаться?
по моему вообще нет разницы, лично мне всё равно: в теле документа ли яваскрипт или отдельно
Ссылка на сообщение
Поделиться на других сайтах
Fillosoff

Fillosoff 1

Опубликовано:
Опубликовано: (изменено) Автор

А зачем, можно поинтересоваться? Насколько мне известно, параметр type является обязательным.

ну я не спец, вообще. не знаю как надо. у меня один критерий - работает или нет)) так как было не работало, а когда изменил заработало.

а как пробывал?

пробовал вот так:

<script type="text/javascript" src="{THEME}/js/cssvariant.js"></script>

не работает. хз. а. вот, когда просто код:

<script language="JavaScript">

if (self.screen)

var width = screen.width;

else if (self.java)

{

var jkit = java.awt.Toolkit.getDefaultToolkit();

var scrsize = jkit.getScreenSize();

var width = scrsize.width;

}

var cssFile = (width < 1025) ? 'style1' : 'style2';

document.write('<link rel="stylesheet" type="text/css" href="{THEME}/css/'+cssFile+'.css">');

</script>

вставил в main.tpl все заработало. думал, неправильно что делаю.

Изменено пользователем Kot Da Vinci - Fillosoff
Ссылка на сообщение
Поделиться на других сайтах
Fillosoff

Fillosoff 1

Опубликовано:
Опубликовано: Автор

1. templates/shab/js/cssvariant.js

2. вышеприведенный код:

if (self.screen)

var width = screen.width;

else if (self.java)

{

var jkit = java.awt.Toolkit.getDefaultToolkit();

var scrsize = jkit.getScreenSize();

var width = scrsize.width;

}

var cssFile = (width < 1025) ? 'style1' : 'style2';

document.write('<link rel="stylesheet" type="text/css" href="{THEME}/css/'+cssFile+'.css">');

Ссылка на сообщение
Поделиться на других сайтах
lifestar

lifestar 18

Опубликовано:
Опубликовано:

ага, в самом cssvariant.js путь неверный

document.write('<link rel="stylesheet" type="text/css" href="templates/shab/css/'+cssFile+'.css">');

Ссылка на сообщение
Поделиться на других сайтах
Fillosoff

Fillosoff 1

Опубликовано:
Опубликовано: Автор

а в скрипте надо писать без {THEME} значит, да? я вот этого не знал! спасибо!

Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

×
 Рассказать
Подписчики 0
Перейти к списку тем
×
×
  • Создать...