Найти на сайте

Фиксированная шапка в шаблоне Instantcms 2.0

+37
2.75K
  2. Блоги
  3. Фиксированная шапка в шаблоне Instantcms 2.0
В некоторых соц. сетях шапка страницы выполнена в виде фиксированного блока, что на мой взгляд очень удобно.
Т.е. при прокрутке страницы вниз шапка остается на месте. Улучив свободную минутку и вооружившись Firefox/Firebug
решил сделать подобное для Instantcms 2.0.

Что правилось:
Все правки в файле /templates/default/css/styles.css

Находим:
  1. #header {
  2.     height: 50px; line-height: 50px; clear: both;
  3.     background:url("../images/header.jpg") repeat-x center top #33526C;
  4. }

Заменяем на:
  1. #header {
  2.     position:fixed;
  3.     height: 50px; line-height: 50px; clear: both;
  4.     background:url("../images/header.jpg") repeat-x center top #33526C;
  5. 	width:100%;
  6. 	z-index:1007;
  7. }

Находим:
  1. #pathway{
  2.     padding:5px 0;
  3.     background:#F9F9F9;
  4.     box-shadow:0 1px 1px #ccc;
  5.     color:#AAA;
  6.     font-size:12px;
  7.     border-top:solid 1px #FFF;
  8. }

Заменяем на:
  1. #pathway{
  2.     position:fixed;
  3.     padding:55px 0 5px 0;
  4.     background:#F9F9F9;
  5.     box-shadow:0 1px 1px #ccc;
  6.     color:#AAA;
  7.     font-size:12px;
  8.     border-top:solid 1px #FFF;
  9.     width: 100%;
  10. 	z-index:1006;	
  11. }

Находим:
  1. #body{
  2.     padding-bottom:30px;
  3. }

Заменяем на:
  1. #body{
  2.     padding-top:75px;
  3.     padding-bottom:30px;
  4. }

Смотрится все это дело очень даже неплохо примерно вот так:

Иллюстрация




Скрин правда сильно обрезался.

Файл из архива необходимо распаковать и вставить вместо штатного здесь: /templates/default/css/styles.css
Файл с правками CSS прикладываю ниже:

instantcms.ru/users/files/download2664.html music
0
Soc1um Soc1um 12 лет назад #
Жаль что так сразу на двойку несуществующую замахнулись миновав 1.10 Или на 1.10 уже имеется? А может и этот подойдет? С бэкграундом бы еще так сделать
0
dontstop dontstop 12 лет назад #
в .body вставь

background: url("ссылка на крутую картинку") repeat
+3
dontstop dontstop 12 лет назад #
Капец сложно..
position: fixed;
width: 100%;
z-index: (к примеру) 501;
0
qwest qwest 12 лет назад #
Написал не с целью посоревноваться в сложности реализации а с целью улучшения юзабилити сайта.
На мой взгдяд сайтом пользоваться в два раза удобнее.
+6
deltas deltas 12 лет назад #
А что заминусовали то сразу втихаря? Человек не поленился, написал. Много кому пригодится, или тут уже все асы верстки и дизайна?
0
dontstop dontstop 12 лет назад #
а + за что ставить? за то что, отловил шапку в файрбаге и прописал к ней
Vladislav Malakutska:

position: fixed;
width: 100%;
z-index: (к примеру) 501;
0
Clear Clear 12 лет назад #
Ну не хочешь не ставь плюс, раз разбираешься, а минусовать за то что человек предлагает для конкретного круга пользователей , глупо на мой взгляд. Давай я тебя за аву минусовать начну, нормально ? Человек старался выложил, и некоторым даже помог, а вы в минус гоните, не правильно это ...
-10
dontstop dontstop 12 лет назад #
Делают всякую банальность за +...
давай я сейчас выложу футер прибитый к низу, завтра левую колонку прибитую к левому боку, послезара - правую, потом гляди аватарки закруглю, еще через № время измени шрифт на курсивный в переписках...
+4
ivanish ivanish 12 лет назад #
Однако вы вошли в топик, хотя по названию понятно, что внутри. Значит и вас она тоже заинтересовала.
-3
Эдька Эдька 12 лет назад #
полностью с вами согласен коллега
-3
dontstop dontstop 12 лет назад #
АПЩИБАИТЕСЬ;)
0
dontstop dontstop 12 лет назад #
я зашел что бы написать коммент. что я думаю по данному поводу - не более;)
+1
Rossoman Rossoman 12 лет назад #
Vladislav Malakutska полностью вас поддерживаю!!!
+1
dontstop dontstop 12 лет назад #
Лентяев полным полно...
они делятся на 3 группы (ИМХО)
1 - соберу все дополнения, хаки, плагины и тд.. с офф. сайта (форума) CMSки и сделаю свой крутой сайнт
2 - заплачу за все и буду просто бабки тянуть, ведь я очень много рекламы напихал в свой сайт
3 - просто скачаю, просто установлю, просто буду там публиковать всякую чушь и напихаю рекламы побольше;)

Вот для таких лентяев и делают такое...вот такие лентяи и минусанули тот коммент
+3
Clear Clear 12 лет назад #
И вообще может он только на начальном пути развития, а вы в нём всё желание убиваете помогать другим
+10
deltas deltas 12 лет назад #
Вот именно! И я совсем недавно с такой "банальщины" начинал, даже стыдно вспоминать, а минусирование отбивает весь стимул...
0
picaboo picaboo 12 лет назад #
а синдром наполеона был? или сразу понимали что на форуме кинуть, а что достойно публикации в блогах?
0
deltas deltas 12 лет назад #
А есть разница? Мне например удобнее пользоваться блогом, форум непривычный как-то, и если я считаю мысль достойную публикации, то все равно в блоге или на форуме :)
0
Clear Clear 12 лет назад #
На то он и личный блог, и у каждого свои видения о чем в нем писать. Где прописано как и чем писать?
-1
dontstop dontstop 12 лет назад #
блатануть надо в первом блоге;)
0
KS KS 12 лет назад #
+
+1
Эдька Эдька 12 лет назад #
у меня так давно, и можно включать и выключать командой . шаблон от (c)dezerit а так +
-4
st.Puh st.Puh 12 лет назад #
Супер +++ .Может сделаете точно так же для версии 1.9 для дефолтного шаблона.Спасибо
+4
Fuze Fuze 12 лет назад #
Просто КЭП.

Ребят, может хватит уже писать настолько очевидные вещи.
Уже ладно, думаю, пишите, но написали бы хотя бы ЧТО ГДЕ ПОЧЕМУ исправили, чтобы люди ВНИКЛИ, хотя таких мало, но все же есть. я надеюсь.

Делают всякую банальность за +... давай я сейчас выложу футер прибитый к низу, завтра левую колонку прибитую к левому боку, послезара - правую, потом гляди аватарки закруглю, еще через № время измени шрифт на курсивный в переписках...
Мне не сложно залезть в базу и посмотреть все заминусовавших данный коммент, НЕ ЖЕЛАЮЩИМ РАЗБИРАТЬСЯ пользователей. А ведь комментарий то самый адекватный.

Стыдно, господа, стыдно.
+4
Fuze Fuze 12 лет назад #
p.s. за пост минус, всем поддерживающим пост в комментариях так же минус. Почему? Объяснил выше. это для тех, кто кричит "а пАчИму мЕнусуют".
-2
deltas deltas 12 лет назад #
Это наверное мне адресовано... Хотя ошибок я в комментах не допускаю ) Я согласен что в посте банальность, но ведь много кто поддержал, даже просят на другие версии чтобы сделал, а это значит кому то пригодилось все же! А самый большой критик вроде вообще ничего полезного не написал, ни в блоге ни на форуме...
+2
Fuze Fuze 12 лет назад #
Это наверное мне адресовано
нет, не вам конкретно. всем.
А самый большой критик вроде вообще ничего полезного не написал, ни в блоге ни на форуме...
смысл был не в этом...
-2
nedoriko nedoriko 12 лет назад #
к 1.9 бы такую
0
SJen SJen 12 лет назад #
так вам же ничего не мешает применить это решение хоть к 1.9, хоть 1.8
смысл то тот же - меняется только css
-1
st.Puh st.Puh 12 лет назад #
Это если CSS знать,а так я в теже дивы в версии 1.9 вставил и получился личный кабинет на месте стоит а под ним меню сайта просвечиваеца.Так что не так то все и просто для тех кто незнаком с CSS
0
Evo Evo 12 лет назад #
А как сделать что бы ещё и при нажатии на header был переход на главную страницу ?
0
qwest qwest 12 лет назад #
В header при нажатии на иконку с логотипом происходит переход на главеую.
+1
lokanaft lokanaft 12 лет назад #
letsgo, этот пост вот просто создан для вашей пылкой речи и здесь вас не заминусуют, а наоборот заплюсуют! =D
0
Avert Avert 12 лет назад #
А вы здесь letsgo увидели где то? laugh
0
lokanaft lokanaft 12 лет назад #
Будет странно, если он это пропустит =D
0
dontstop dontstop 12 лет назад #
Ребята, хватит на крысу минусить;) обоснуйте точку зрения - мне очень интересно;)

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.