valoo Posted April 6, 2008 Share Posted April 6, 2008 И можно ли поменять цвет? Шаблон мне нравится, но цвет мрачный. А неяркий жёлтенький был бы в самый раз.Это самый "больной" вопрос, над которым я все время думаю...Если дать пользователю возможность легко и просто управлять шаблоном сайта - его нужно вгонять в базы данных, откуда он медленно грузится и тормозит работу сайта ((((((((((((( Но можно и по- другому ))))))))))) Только что менять, и как? Чуть-чуть желтенького, чуть подсинить и добавить теней ... ))))))))))))) Если хотите - я в этой теме постараюсь по возможности просто и доступно рассказать о Каскадных Таблицах Стилей (CSS), чтобы вы смогли сами редактировать свой шаблон. Естественно, что понадобится и Фотошоп, чтобы самим создать картинку верхнего лого и выбрать нужный цвет для различных частей шаблона, а потом там же в Фотошопе получить 16-тиричный код цвета, который вставляется в CSS. Не пугайтесь, это очень просто. Например, черный цвет имеет код #000000, а белый - #FFFFFFF. В Фотошопе код любого цвета высвечивается в таблице цветов, оттуда его просто копируем в файл стилей CSS. Quote Link to comment Share on other sites More sharing options...
dama_tref Posted April 6, 2008 Share Posted April 6, 2008 Славик!!! Я и так в тебя вся влюблённая, а если ты ещё и про эти вещи расскажешь так, чтобы я поняла -- я на тебя вообще молиться начну!!!! Quote Link to comment Share on other sites More sharing options...
Рамина Posted April 6, 2008 Share Posted April 6, 2008 С Фотошопом работать умею, про цвета тоже знаю. Куда вставлять код? :) Quote Link to comment Share on other sites More sharing options...
valoo Posted April 6, 2008 Author Share Posted April 6, 2008 С Фотошопом работать умею, про цвета тоже знаю. Куда вставлять код? :)Поработай пока с тем, что есть, а я постараюсь подготовить опцию для загрузки шаблонов в ближайшее время. Quote Link to comment Share on other sites More sharing options...
valoo Posted April 7, 2008 Author Share Posted April 7, 2008 Итак, приступаем к дизайну ... 1. Скачайте и распакуйте в отдельную папку файл http://www.100litsa.org/template.rar. 2. Запустите из этой папки у себя на компе файл index.html 3. На экране вы увидите знакомый шаблон №1, внутри которого находится схема самой таблицы шаблона. Она очень проста: - верхний рисунок-лого - header - под ним узкая полоска - sub_header - левая панель - left_panel, в которой находится - левое меню - left_menu - основная часть таблицы - main - между левой панелью и основной частью есть полоска-разделитель - sub - по обеим сторонам таблицы две полоски для создания эффекта тени, левая - side_L и правая side_R - под всем этим 2 полоски - up_footer и - footer, где высвечивается копирайт вашего сайта - кнопки для перелистывания страниц - gal - общий фон страницы сайта - body 4. Чтобы поменять дизайн этих элементов, откройте в текстовом редакторе (но не в Ворде!) файл template_css.css, который находится в распакованной папке. 5. В нем вы увидите код CSS для каждого из перечисленных элементов, например, код для левой панели имеет вид: .left_panel{ padding-left:10px; padding-top:10px; background-color: #e2e5d3; } 5. Обратите внимание, что перед именем элемента стоит точка. Стирать ее не нужно )))))))))) 6. Все строки, определяющие дизайн выбранного элемента, находятся внутри фигурных скобок { }. 6. Если вы случайно сотрете скобку, то на работе сайта это не отразится, но дизайн элемента не сработает. 7. Воздержитесь на первое время от редактирования строк, не связанных с цветом. 8. Чтобы изменить цвет, откройте Фотошоп и в окошке цветов подберите нужный цвет, а затем скопируйте его в строку вместо того, который установлен в файле. Например, цвет светло-болотный левой панели закодирован числом background-color: #e2e5d3; Поменяйте его на выбранный и не забудьте вначале кода поставить решетку # (в Фотошопе код высвечивается без нее). 9. Обратите внимание, что каждое определение внутри фигурных скобок заканчивается точкой с запятой. Без них код работать не будет! Чтобы увидеть результат, после каждого изменения сохраняйте файл template_css.css и делайте Refresh окну броузера с файлом index.html. 10. В папке images находятся файлы картинок для лого, боковых полосок и левого меню. 11. Файл menu.jpg - это полоска меню, которую вы видите на сайте, а hover.jpg появляется вместо нее, когда вы подводите мышку к меню. 12. Все эти картинки можно менять в редактировать в Фотошопе, но есть два условия: - нельзя изменять размер картинки, иначе дизайн сайта "разойдется по швам" и - нельзя менять имя файла картинки, иначе сайт ее не узнает и не покажет. Вот, пожалуй, и все ... Когда будет готово - заархивируйте папку в zip или rar, закачайте ее к себе на сайт в папку "Файлы для скачивания" и дайте мне знать. Я установлю новые шаблоны на ваших сайтах )))))))))))) Quote Link to comment Share on other sites More sharing options...
Рамина Posted April 8, 2008 Share Posted April 8, 2008 Все понятно, всё сделала. Вопрос остался по полоскам side_L и side_R. У меня не получается сохранить те размеры, что есть сейчас. Потому что полоски фигурные и их длина значительно больше. Можно с этим что-то сделать? Quote Link to comment Share on other sites More sharing options...
valoo Posted April 8, 2008 Author Share Posted April 8, 2008 Все понятно, всё сделала. Вопрос остался по полоскам side_L и side_R. У меня не получается сохранить те размеры, что есть сейчас. Потому что полоски фигурные и их длина значительно больше. Можно с этим что-то сделать?Насчет "фигурных" полосок...Принцип установки фоновых рисунков (а полоски side_L и side_R - это именно фоновый рисунок) таков. Ты вставляешь линк на этот рисунок в файл слилей и обрати внимание на то, что после линка стоит команда repeat-y. Это означает, что короткий рисунок (его высота может колебаться от 1 до нескольких десятков пикселей) будет размножаться по всей высоте экрана. Какая может быть высота? Да, любая! В зависимости от содержимого страницы сайта. И по всей высоте эта полоска выглядит одинаково. Если ты создаешь фоновый рисунок с заранее заданной высотой, а экран растянется больше, чем твоя полоска, что будет? Поэтому высоту ты никогда не сможешь задать заранее, только размножать этот фрагмент, что и делается автоматически. Какой выход? Ты создаешь фрагмент полоски для размножения так, чтобы верхний и нижний ее края состыковывались в единый рисунок, иначе на странице будут видны границы каждого фрагмента, и это портит дизайн. Успеха! Quote Link to comment Share on other sites More sharing options...
Рамина Posted April 8, 2008 Share Posted April 8, 2008 Появились ещё вопросы. Как поменять цвет надписей на кнопках в левом меню? Всё перепробовала. Ничего не меняется :(. И ещё мне надо эти надписи выровнять по центру кнопки Картинку с основной части таблицы тоже надо убрать, удалила её из папки, появилось окошко с крестиком. Ещё мне нужно удалить надпись "МОЙ ДЕМОСАЙТ" Она мне не нужна, так как все надписи у меня уже есть в шапке. Дальше не понятно в коде про гостевую книгу и галерею. Оно нигде не высвечивается. Quote Link to comment Share on other sites More sharing options...
valoo Posted April 8, 2008 Author Share Posted April 8, 2008 И ещё мне надо эти надписи выровнять по центру кнопкиВот здесь я категорически против. Который год с Алесем "воюю", чтобы на портале "Друзья" это поменять ((((((Оль, это ни в какие рамки дизайна не вписывается ... если левое меню, тогда - или по левому краю, или по правому ("флажки"), но только не по центру!!!!!!!!! Обо все остальном - завтра )))))) Quote Link to comment Share on other sites More sharing options...
Рамина Posted April 9, 2008 Share Posted April 9, 2008 Вот здесь я категорически против. Который год с Алесем "воюю", чтобы на портале "Друзья" это поменять (((((( Оль, это ни в какие рамки дизайна не вписывается ... если левое меню, тогда - или по левому краю, или по правому ("флажки"), но только не по центру!!!!!!!!! Обо все остальном - завтра )))))) У меня дизайн кнопок таков, что надписи, выровненные по любому краю вылезают за кнопку. Некрасиво, да и нечитабельно. Quote Link to comment Share on other sites More sharing options...
valoo Posted April 9, 2008 Author Share Posted April 9, 2008 У меня дизайн кнопок таков, что надписи, выровненные по любому краю вылезают за кнопку. Некрасиво, да и нечитабельно.Оля, ты уже вышла за рамки простого "сайтостроительства" и копаешь вглубь CSS. Имеет смысл почитать об этом на очень хорошем сайте http://stepbystep.htmlbook.ru/ и еще здесь http://ru.html.net/tutorials/css/introduction.asp.Тебе нужны селекторы CSS, управляющие выводом меню и линков. Кстати, для страницы линков тебе это тоже пригодится, чтобы они высвечивались не стандартным синим цветом с подчеркиванием, а как-то покрасивше. Посмотри по этим адресам, если что непонятно - пиши, я помогу разобраться. Quote Link to comment Share on other sites More sharing options...
Рамина Posted April 10, 2008 Share Posted April 10, 2008 Оля, ты уже вышла за рамки простого "сайтостроительства" и копаешь вглубь CSS. Имеет смысл почитать об этом на очень хорошем сайте http://stepbystep.htmlbook.ru/ и еще здесь http://ru.html.net/tutorials/css/introduction.asp. Тебе нужны селекторы CSS, управляющие выводом меню и линков. Кстати, для страницы линков тебе это тоже пригодится, чтобы они высвечивались не стандартным синим цветом с подчеркиванием, а как-то покрасивше. Посмотри по этим адресам, если что непонятно - пиши, я помогу разобраться. Спасибо. Начала чиатать, очень увлекательно. Но я уже решила полностью переделать дизайн и сделать кнопки попроще. А вот поменять цвет надписей всё ещё актуально. И вот какие удивительные вещи происходят. Для кнопки hover я нашла, как поменять цвет, т.к. была строчка color: white. Я её поменяла на blue. Стало то, что нужно! :) А вот для кнопки menu такой строчки нет. Цвет нигде не указан, и бордовый на темно-сером мне совсем не подходит. Когда я вставлю строчку о цвете, то цвет не меняется, а надписи централизуются посередине кнопки. То, что мне было нужно раньше и то, что сейчас мне уже не нужно:). Но вопрос остаетсяоткрытым. Как же мне поменять этот бордовый цвет на... вот глянуть надо, какой лучше будет смотреться - оранжевый или белый. Quote Link to comment Share on other sites More sharing options...
valoo Posted April 10, 2008 Author Share Posted April 10, 2008 Оля, обрати внимание, что в left_menu цвет действительно не указан. Вместо него вставляется картинка (выделенная красным строка) .left_menu { display : block; font-size: 100%; text-align : left; line-height : 21px; height: 21px; text-indent : 8px; background-image: url(images/menu.jpg); background-position: right; } Ты убираешь эту строку, а вместо нее вписываешь селектор цвета, например, background-color:#FF0000; Quote Link to comment Share on other sites More sharing options...
Рамина Posted April 10, 2008 Share Posted April 10, 2008 Оля, обрати внимание, что в left_menu цвет действительно не указан. Вместо него вставляется картинка (выделенная красным строка) .left_menu { display : block; font-size: 100%; text-align : left; line-height : 21px; height: 21px; text-indent : 8px; background-image: url(images/menu.jpg); background-position: right; } Ты убираешь эту строку, а вместо нее вписываешь селектор цвета, например, background-color:#FF0000; Но ведь это картинка кнопки! Если я её уберу, не будет кнопки. Мне же только поменять цвет шрифта надо :) Quote Link to comment Share on other sites More sharing options...
valoo Posted April 10, 2008 Author Share Posted April 10, 2008 У тебя есть такой селектор: .gal a, .left_menu a {color:#663333; text-decoration:none; } Строчка .left_menu с добавкой a означает, что он относится к линкам левого меню. И одновременно к линкам кнопок пролистывания страниц gal. Строка color:#663333; и есть цвет надписей на кнопках. Если ты поменяешь ее - изменится цвет и в меню, и в кнопках пролистывания. Можно разделить этот селектор на две части: 1) .gal a - только для кнопок пролистывания {color:#663333; text-decoration:none; } 2) .left_menu a - только для линков левого меню {color:white; text-decoration:none; } Quote Link to comment Share on other sites More sharing options...
Рамина Posted April 10, 2008 Share Posted April 10, 2008 У тебя есть такой селектор: .gal a, .left_menu a {color:#663333; text-decoration:none; } Строчка .left_menu с добавкой a означает, что он относится к линкам левого меню. И одновременно к линкам кнопок пролистывания страниц gal. Строка color:#663333; и есть цвет надписей на кнопках. Если ты поменяешь ее - изменится цвет и в меню, и в кнопках пролистывания. Можно разделить этот селектор на две части: 1) .gal a - только для кнопок пролистывания {color:#663333; text-decoration:none; } 2) .left_menu a - только для линков левого меню {color:white; text-decoration:none; } Ура! Получилось! Спасибо :) Это, оказывается, было в самом низу, после надписи "гостевая книга", куда я вообще не заглядывала. Ну, тогда у меня дизайн полностью готов. Куда высылать? Quote Link to comment Share on other sites More sharing options...
valoo Posted April 10, 2008 Author Share Posted April 10, 2008 Ура! Получилось! Спасибо :) Это, оказывается, было в самом низу, после надписи "гостевая книга", куда я вообще не заглядывала. Ну, тогда у меня дизайн полностью готов. Куда высылать? Заархивируй всю папку и загрузи ее в "Файлы для скачивания". Quote Link to comment Share on other sites More sharing options...
Рамина Posted April 10, 2008 Share Posted April 10, 2008 Заархивируй всю папку и загрузи ее в "Файлы для скачивания".Готово. Загружено. Quote Link to comment Share on other sites More sharing options...
valoo Posted April 11, 2008 Author Share Posted April 11, 2008 Готово. Загружено.Переставь на шаблон tmpl_1 - там твой дизайн. Quote Link to comment Share on other sites More sharing options...
Рамина Posted April 12, 2008 Share Posted April 12, 2008 Поставила. Всё здорово, но теперь у меня возник ещё вопрос. Страницы у меня синего цвета. А вот ссылки со страниц тоже пишутся синим. При построении общего дизайна это не было видно. Шрифт видно, но... как бы поменять их на мой оранжевый? Quote Link to comment Share on other sites More sharing options...
valoo Posted April 12, 2008 Author Share Posted April 12, 2008 Поставила. Всё здорово, но теперь у меня возник ещё вопрос. Страницы у меня синего цвета. А вот ссылки со страниц тоже пишутся синим. При построении общего дизайна это не было видно. Шрифт видно, но... как бы поменять их на мой оранжевый?Создай селектор .main a { color: #......; } и впиши туда нужный цвет. Quote Link to comment Share on other sites More sharing options...
Рамина Posted April 13, 2008 Share Posted April 13, 2008 Создай селектор .main a { color: #......; } и впиши туда нужный цвет. Подожди. Но это я могу поменять у себя на компе. Потом опять заново новый архив закачивать и ты переустановишь? Quote Link to comment Share on other sites More sharing options...
valoo Posted April 13, 2008 Author Share Posted April 13, 2008 Пришли мне этот файл Quote Link to comment Share on other sites More sharing options...
Рамина Posted April 13, 2008 Share Posted April 13, 2008 А вот так не пойдёт? .main a { color: #edaa5b; } Quote Link to comment Share on other sites More sharing options...
valoo Posted April 13, 2008 Author Share Posted April 13, 2008 А вот так не пойдёт? .main a { color: #edaa5b; } Я поставил в твой шаблон. На днях я закончу дописывать модуль, который позволит управлять всем этим прямо из Админки. Думаю, что отпадет необходимость в "ручном" дизайне, во всяком случае, для установки цвета. А для картинок (лого, кнопки) - тут кто во что горазд - тоже будет опция закачивать и устанавливать. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.