Фильтр по:
  

Переключатели страниц для всех модулей, оформление для юКоз

Как сделать... Тема только по сайтам в системе uCoz

  • Страница 1 из 2
  • 1
  • 2
  • »
Модератор форума: likbezz  
Скрипты и коды для юкоз - Форум аццкого кодера » Вопросы по верстке, дизайну, управлению и настройки модулей СMS от uCoz » Как сделать... Тема только по сайтам в системе uCoz » Переключатели страниц для всех модулей, оформление для юКоз (Готовые примеры оформления стандартных переключателей. CSS)
Переключатели страниц для всех модулей, оформление для юКоз
Дата: Четверг, 16.02.2012, 03:09 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown

Сюда кладём готовые примеры оформления стандартных переключателей.

Я кладу кроссбраузерные примеры оформления переключателей - для всех контент модулей.


...

HTML- стандартный (повторяю один раз), все стили добавляются в CSS, который можно найти в ПУ » Управление дизайном » Таблица стилей CSS.
Стили ДОБАВЛЯЮТСЯ - то бишь, искать их не нужно - их там нет.
Если ничего «дополнительно» не отмечено (обычно - красным/синим болдом) значит все стандартно, никаких дополнительных движений делать не нужно.
Постарайтесь запомнить, уважайте своё и моё время.
...

Стили для MS Internet Explorer (здесь и далее - ИЕ, MSIE, IE) прописываются, либо стилями в условных комментариях (Conditional comments):
Code
<!--[if lte IE 9]><style type="text/css">
a.swchItem,a.swchItem1,b.swchItemA,b.swchItemA1,span.pgSwchA b,a.pgSwch{zoom:1;position:relative;behavior:url(/_theme1/_fix/PIE.htc);}
span.swchItemDots,span.pgSwchA b,a.pgSwch{vertical-align:baseline!important;}
</style><![endif]-->

либо в отдельной таблице, подключаемой через условные комментарии:
Code
<!--[if lte IE 9]><link rel="stylesheet" type="text/css" href="/msie.css" media="screen" /><![endif]-->

Скрипты, предназначенные только для ИЕ, подключаются так же.

Блоки условных комментариев, обычно, располагаются в
Code
<head>
 документа.
...


PIE.htc (CSS3 rendering for IE. Version 1.0beta5) (18kb)
Прикрепления: PIEv1b5.rar (17.4 Kb)

 
Дата: Четверг, 16.02.2012, 03:31 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown

Простенький, но от этого не менее ... удобный, вариант «Page Selectors v1»


...

Для контент-модулей:
Code
/*=Start(PageSelectors)=*/
b.swchItemA,b.swchItemA1,span.swchItemDots,a.swchItem,a.swchItem1{font:bold 11px/1.3 Verdana,sans-serif;text-decoration:none;color:#444;}
a.swchItem,a.swchItem1,b.swchItemA,b.swchItemA1{padding:3px 6px;border:1px solid #D9D8D8;}
b.swchItemA,b.swchItemA1{background:#FFF;color:#AAA;}
span.swchItemDots{}
a.swchItem:link,a.swchItem1:link,a.swchItem:visited,a.swchItem1:visited{background:#F9F5F5;}
a.swchItem:hover,a.swchItem1:hover,a.swchItem:active,a.swchItem1:active{background:#E1D3FC;}
/*=End(PageSelectors)=*/


Для Интернет-магазина:
Code
/*=Start(PageSelectorsShop)=*/
span.pgSwchA b,a.pgSwch,span.plist{font:bold 11px/1.3 Verdana,sans-serif;text-decoration:none;color:#444;}
span.pgSwchA b,a.pgSwch{padding:3px 6px;border:1px solid #D9D8D8;}
span.pgSwchA b{background:#FFF;color:#AAA;}
a.pgSwch:link,a.pgSwch:visited{background:#F9F5F5;}
a.pgSwch:hover,a.pgSwch:active{background:#E1D3FC;}
/*=End(PageSelectorsShop)=*/

...

Скриншотики:



...

Пример:
☑ Оформление переключателей страниц для юКоз (Page Selectors v1)
...
Прикрепления: 3176077.png (0.7 Kb) · 9542260.png (5.3 Kb)

 
Дата: Четверг, 16.02.2012, 03:39 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown

Page Selectors v2. Похожий, на первый, да в общем-то, все переключатели похожи на ... переключатели, однако ) ...



Стили для контент-модулей:
Code
/*=Start(PageSelectors)=*/
b.swchItemA,b.swchItemA1,span.swchItemDots,a.swchItem,a.swchItem1{font:bold 12px/1.3 Verdana,sans-serif;text-decoration:none;color:#ff8400;}
a.swchItem,a.swchItem1,b.swchItemA,b.swchItemA1{padding:2px 8px;border:1px solid #E6E6E6;
-moz-border-radius:4px;-webkit-border-radius:4px;-khtml-border-radius:4px;border-radius:6px;
}
b.swchItemA,b.swchItemA1{background:#FFA200;color:#930;}
span.swchItemDots{}
a.swchItem:link,a.swchItem1:link,a.swchItem:visited,a.swchItem1:visited{background:#ff8400;color:#FAFAFA;}
a.swchItem:hover,a.swchItem1:hover,a.swchItem:active,a.swchItem1:active{background:#F70;color:#630;}
/*=End(PageSelectors)=*/


Стили для Интернет-магазина:
Code
/*=Start(PageSelectorsShop)=*/
span.pgSwchA b,a.pgSwch,span.plist{font:bold 12px/1.3 Verdana,sans-serif;text-decoration:none;color:#ff8400;}
span.pgSwchA b,a.pgSwch{padding:2px 8px;border:1px solid #E6E6E6;
-moz-border-radius:4px;-webkit-border-radius:4px;-khtml-border-radius:4px;border-radius:6px;
}
span.pgSwchA b{background:#FFA200;color:#930;}
a.pgSwch:link,a.pgSwch:visited{background:#ff8400;color:#FAFAFA;}
a.pgSwch:hover,a.pgSwch:active{background:#F70;color:#630;}*/
/*=End(PageSelectorsShop)=*/


Стили для MS Internet Explorer (нужны для правильного отобрадения бордер-радиуса в ИЕ):
Code
<!--[if lte IE 9]><style type="text/css">
a.swchItem,a.swchItem1,b.swchItemA,b.swchItemA1,span.pgSwchA b,a.pgSwch{zoom:1;position:relative;behavior:url(http://likbezz.ru/_theme1/_fix/PIE.htc);}
</style><![endif]-->


Добавляются в шаблон, перед закрывающим тегом
Code
</head>
, в том виде как даны.
PIE.htc - в прикреплении - скачать, заменить ссылку.
...

Скриншотики:



..

Пример:
☑ Оформление переключателей страниц для юКоз (Page Selectors v2)
...
Прикрепления: 3938050.png (1.0 Kb) · 2256057.png (6.3 Kb) · PIE.rar (17.4 Kb)

 
Дата: Четверг, 16.02.2012, 03:52 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown

Page Selectors v3. Бордер радиус и фоновая картинка ...



Стили для контент-модулей:
Code
/*=Start(PageSelectors)=*/
b.swchItemA,b.swchItemA1,span.swchItemDots,a.swchItem,a.swchItem1{font:bold 12px/1.3 Verdana,sans-serif;text-decoration:none;color:#FFF;}
a.swchItem,a.swchItem1,b.swchItemA,b.swchItemA1{padding:4px 9px;
-moz-border-radius:4px;-webkit-border-radius:4px;-khtml-border-radius:4px;border-radius:6px;
}
b.swchItemA,b.swchItemA1{color:#FFE7E7;background:transparent url('img/ps3_1.png') repeat-x 50% 50%;}
span.swchItemDots{vertical-align:-2px;color:#C00;}
a.swchItem:link,a.swchItem1:link,a.swchItem:visited,a.swchItem1:visited{color:#FAFAFA;background:transparent url('img/ps3_2.png') repeat-x 50% 50%;}
a.swchItem:hover,a.swchItem1:hover,a.swchItem:active,a.swchItem1:active{background:transparent url('img/ps3_1.png') repeat-x 50% 50%;color:#600;}
/*=End(PageSelectors)=*/


Стили для Интернет-магазина:
Code
/*=Start(PageSelectorsShop)=*/
span.pgSwchA b,a.pgSwch,span.plist{font:bold 12px/1.3 Verdana,sans-serif;text-decoration:none;color:#C00;}
span.pgSwchA b,a.pgSwch{padding:4px 9px;vertical-align:2px;
-moz-border-radius:4px;-webkit-border-radius:4px;-khtml-border-radius:4px;border-radius:6px;
}
span.pgSwchA b{color:#FFE7E7;background:transparent url('img/ps3_1.png') repeat-x 50% 50%;}
a.pgSwch:link,a.pgSwch:visited{color:#FAFAFA;background:transparent url('img/ps3_2.png') repeat-x 50% 50%;}
a.pgSwch:hover,a.pgSwch:active{color:#600;background:transparent url('img/ps3_1.png') repeat-x 50% 50%;}
/*=End(PageSelectorsShop)=*/


Стили для, всеми горяче любимого, MS Internet Explorer-а:
Code
<!--[if lte IE 9]><style type="text/css">
a.swchItem,a.swchItem1,b.swchItemA,b.swchItemA1,span.pgSwchA b,a.pgSwch{zoom:1;position:relative;behavior:url(http://likbezz.ru/_theme1/_fix/PIE.htc);}
span.swchItemDots,span.pgSwchA b,a.pgSwch{vertical-align:baseline!important;}
</style><![endif]-->

Добавляются в шаблон, перед закрывающим тегом
Code
</head>
, в том виде как даны.
...

Все файлы (картинки и PIE.htc) в архиве, в прикреплении - скачать, залить себе на сайт, изменить ссылки.
...

Скриншотики:



...

Пример:
☑ Оформление переключателей страниц для юКоз (Page Selectors v3)
...
Прикрепления: 6862473.png (1.5 Kb) · 4665587.png (8.1 Kb) · ps_v3.rar (18.1 Kb)

 
Дата: Четверг, 16.02.2012, 11:44 |
Drift
Лейтенант
Группа: Пользователи
Сообщений: 40
Награды: 0
Репутация: 0
Статус: Offline


 Взял верхний для магазина. Все отлично работает. Спасибо! biggrin

 
Дата: Четверг, 16.02.2012, 15:52 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown

Page Selectors v4. Бордер радиус, фоновая картинка красно-голубая тема ...



Стили для контент-модулей:
Code
/*=Start(PageSelectors)=*/
b.swchItemA,b.swchItemA1,span.swchItemDots,a.swchItem,a.swchItem1{font:bold 12px/1.3 Verdana,sans-serif;text-decoration:none;color:#FFF;}
a.swchItem,a.swchItem1,b.swchItemA,b.swchItemA1{padding:5px 10px;
-moz-border-radius:3px;-webkit-border-radius:3px;-khtml-border-radius:3px;border-radius:3px;
}
b.swchItemA,b.swchItemA1{color:#DDD;background:#CF1519 url('img/ps4_1.png') repeat-x 50% 45%;}
span.swchItemDots{vertical-align:-3px;color:#1480C7;}
a.swchItem:link,a.swchItem1:link,a.swchItem:visited,a.swchItem1:visited{background:#1480C7 url('img/ps4_2.png') repeat-x 50% 45%;}
a.swchItem:hover,a.swchItem1:hover,a.swchItem:active,a.swchItem1:active{background:#CF1519 url('img/ps4_1.png') repeat-x 50% 45%;}
/*=End(PageSelectors)=*/

...

Стили для Интернет-магазина:
Code
/*=Start(PageSelectorsShop)=*/
span.pgSwchA b,a.pgSwch,span.plist{font:bold 12px/1.3 Verdana,sans-serif;text-decoration:none;color:#1480C7;}
span.pgSwchA b,a.pgSwch{padding:5px 10px;color:#FFF;vertical-align:3px;
-moz-border-radius:3px;-webkit-border-radius:3px;-khtml-border-radius:3px;border-radius:3px;
}
span.pgSwchA b{color:#DDD;background:#CF1519 url('img/ps4_1.png') repeat-x 50% 45%;}
a.pgSwch:link,a.pgSwch:visited{background:#1480C7 url('img/ps4_2.png') repeat-x 50% 45%;}
a.pgSwch:hover,a.pgSwch:active{background:#CF1519 url('img/ps4_1.png') repeat-x 50% 45%;}
/*=End(PageSelectorsShop)=*/

...

Стили для MS Internet Explorer:
Code
<!--[if lte IE 9]><style type="text/css">
a.swchItem,a.swchItem1,b.swchItemA,b.swchItemA1,span.pgSwchA b,a.pgSwch{zoom:1;position:relative;behavior:url(/_theme1/_fix/PIE.htc);}
span.swchItemDots,span.pgSwchA b,a.pgSwch{vertical-align:baseline!important;}
</style><![endif]-->

Добавляются в шаблон, перед закрывающим тегом
Code
</head>
, в том виде как даны.
...

Все файлы (картинки и PIE.htc) в архиве, в прикреплении - скачать, залить себе на сайт, изменить ссылки.
...

Скриншотики:




...

Пример:
☑ Оформление переключателей страниц для юКоз (Page Selectors v3)
...
Прикрепления: 0571329.png (1.1 Kb) · 5406127.png (6.5 Kb) · ps_v4.rar (17.9 Kb)

 
Дата: Четверг, 16.02.2012, 19:30 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown

Page Selectors v5. Бордер радиус, фоновая картинка, оранжевая тема ...



Стили для контент-модулей:
Code
/*=Start(PageSelectors)=*/
b.swchItemA,b.swchItemA1,span.swchItemDots,a.swchItem,a.swchItem1{font:bold 12px/1.2 Verdana,sans-serif;text-decoration:none;color:#CC5D28;}
a.swchItem,a.swchItem1,b.swchItemA,b.swchItemA1{padding:3px 9px;border:1px solid #F6A37B;bottom:-4px;
-moz-border-radius:3px;-webkit-border-radius:3px;-khtml-border-radius:3px;border-radius:3px;
}
b.swchItemA,b.swchItemA1{color:#FFF;background:#FFB5B0 url('img/ps5_2.png') repeat-x 50% 50%;}
span.swchItemDots{vertical-align:-2px;}
a.swchItem:link,a.swchItem1:link,a.swchItem:visited,a.swchItem1:visited{background:#FFCCB3 url('img/ps5_1.png') repeat-x 50% 50%;}
a.swchItem:hover,a.swchItem1:hover,a.swchItem:active,a.swchItem1:active{background:#FFB5B0 url('img/ps5_2.png') repeat-x 50% 50%;color:#651A02;}
a.swchItem:active,a.swchItem1:active{color:#F00;}
#numEntries{margin-top:3px;}
/*=End(PageSelectors)=*/


Стили для Интернет-магазина:
Code
/*=Start(PageSelectorsShop)=*/
span.pgSwchA b,a.pgSwch,span.plist{font:bold 12px/1.2 Verdana,sans-serif;text-decoration:none;color:#CC5D28;}
span.pgSwchA b,a.pgSwch{padding:3px 9px;border:1px solid #F6A37B;vertical-align:2px;bottom:-4px;
-moz-border-radius:3px;-webkit-border-radius:3px;-khtml-border-radius:3px;border-radius:3px;
}
span.pgSwchA b{color:#FFF;background:#FFCCB3 url('img/ps5_2.png') repeat-x 50% 50%;}
a.pgSwch:link,a.pgSwch:visited{background:#FFCCB3 url('img/ps5_1.png') repeat-x 50% 50%;}
a.pgSwch:hover,a.pgSwch:active{background:#FFB5B0 url('img/ps5_2.png') repeat-x 50% 50%;color:#651A02;}
a.pgSwch:active{color:#F00;}
/*=End(PageSelectorsShop)=*/


Стили для MS Internet Explorer:
Code
<!--[if lte IE 9]><style type="text/css">
a.swchItem,a.swchItem1,b.swchItemA,b.swchItemA1,span.pgSwchA b,a.pgSwch{zoom:1;position:relative;behavior:url(/_theme1/_fix/PIE.htc);}
#numEntries{padding-top:6px;}
</style><![endif]-->

Добавляются в шаблон, перед закрывающим тегом
Code
</head>
, в том виде как даны.
...

Все файлы (картинки и PIE.htc) в архиве, в прикреплении - скачать, залить себе на сайт, изменить ссылки.
...

Скриншотики:




...

Пример:
☑ Оформление переключателей страниц для юКоз (Page Selectors v5)
...
Прикрепления: 3984532.png (1.5 Kb) · 2508114.png (8.0 Kb) · ps_v5.rar (18.2 Kb)

 
Дата: Пятница, 17.02.2012, 21:48 |
Siver
Сержант
Группа: Пользователи
Сообщений: 32
Награды: 0
Репутация: 0
Статус: Offline


 likbezz, а у меня Page Selectors v4 в ИЕ и без доп. стилей работает нормально, все равно нужно дописывать?

 
Дата: Пятница, 17.02.2012, 22:16 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Siver,
Quote (Siver)
а у меня Page Selectors v4 в ИЕ и без доп. стилей работает нормально, все равно нужно дописывать?

Это для ИЕ < 9 версии.
Quote (Siver)
... все равно нужно дописывать?

Желательно... )

 
Дата: Суббота, 05.05.2012, 10:36 |
shatrov80
Сержант
Группа: Проверенные
Сообщений: 38
Награды: 0
Репутация: 0
Статус: Offline
Quote (likbezz)
{font:bold 12px/1.2 Verdana,sans-serif;text-decoration:none;color:#CC5D28;}

валидатор видает ошибку sad

 
Дата: Суббота, 05.05.2012, 13:04 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 shatrov80,
Quote (shatrov80)
валидатор видает ошибку

http://www.w3.org/TR/CSS21/fonts.html#propdef-font
...

 
Дата: Суббота, 05.05.2012, 13:15 |
shatrov80
Сержант
Группа: Проверенные
Сообщений: 38
Награды: 0
Репутация: 0
Статус: Offline


 при проверке кода выдает
Quote
b.swchItemA, b.swchItemA1, span.swchItemDots, a.swchItem, a.swchItem1 Ошибка значения : font / не является значением font-family : bold 12px / 1.3 Verdana,sans-serif

 
Дата: Суббота, 05.05.2012, 16:27 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 shatrov80,
Quote (shatrov80)
при проверке кода выдает

И что вы хотите этим мне сказать?

То что валидатор косячит? - Так это мне не интересно.
То что вы совсем не разбираетесь в CSS? - Это я и сам знаю.

В чём суть вашего поста?
Не нравится сокращённая форма записи - пропишите полностью: ссылка выше.
...

 
Дата: Вторник, 22.05.2012, 13:00 |
shatrov80
Сержант
Группа: Проверенные
Сообщений: 38
Награды: 0
Репутация: 0
Статус: Offline
Quote (likbezz)
И что вы хотите этим мне сказать?

Ничего конкретного, просто пытаюсь понять и разобраться.
Quote (likbezz)
То что вы совсем не разбираетесь в CSS?

Я и не говорил что в нем разбираюсь. Согласитесь если бы разбирался то к вам бы не пришел.
Quote (likbezz)
Не нравится сокращённая форма записи - пропишите полностью: ссылка выше.

Code

/*=Start(PageSelectors)=*/  
b.swchItemA,b.swchItemA1,span.swchItemDots,a.swchItem,a.swchItem1{font:bold italic large Palatino 11px/1.3 Verdana,sans-serif;text-decoration:none;color:#444;}  
a.swchItem,a.swchItem1,b.swchItemA,b.swchItemA1{padding:3px 6px;border:1px solid #D9D8D8;}  
b.swchItemA,b.swchItemA1{background:#FFF;color:#AAA;}  
span.swchItemDots{}  
a.swchItem:link,a.swchItem1:link,a.swchItem:visited,a.swchItem1:visited{background:#F9F5F5;}  
a.swchItem:hover,a.swchItem1:hover,a.swchItem:active,a.swchItem1:active{background:#E1D3FC;}  
/*=End(PageSelectors)=*/

поправил, вроде правильно.

 
Дата: Вторник, 22.05.2012, 13:13 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 shatrov80,
Quote (shatrov80)
поправил, вроде правильно.

Вообще-то не совсем правильно.
Quote (shatrov80)
font:bold italic large Palatino 11px/1.3 Verdana,sans-serif;

font: [font-style || font-variant || font-weight] font-size [/line-height] font-family

Но если вы считаете что так будет лучше, то вопрос снимается.

Quote (shatrov80)
вроде правильно.

Как проверили? On-лайн валидатором? А если он косячит?
http://www.w3.org/TR/css3-fonts/#propdef-font
...

 
Скрипты и коды для юкоз - Форум аццкого кодера » Вопросы по верстке, дизайну, управлению и настройки модулей СMS от uCoz » Как сделать... Тема только по сайтам в системе uCoz » Переключатели страниц для всех модулей, оформление для юКоз (Готовые примеры оформления стандартных переключателей. CSS)
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск:


Мобильная версия