idTails Опубликовано 5 Апреля 2008 Жалоба Поделиться Опубликовано 5 Апреля 2008 (изменено) Перевёл FAQ с французского сайта ipbcustomize.com + немного своего добавил.Если что - то можно его подправить.Основная версия: 2.3.xОстальное: IP.Board FAQ по стилям и их настройке 1. Как я могу локализовать стиль?Локализовать для себя стиль довольно просто. На эту тему в нашей Wiki есть специальная статья. 2. Где я могу посмотреть документацию по CSS стиля?Для версии 2.3.xКлассический стильНовый PRO-стиль 3. Как изменить шрифт форума? font-family: Verdana, Tahoma, Arial, "Trebuchet MS", Sans-Serif, Georgia, Courier, "Times New Roman", Serif;В этой строке основным берётся текст семейства Verdana. Первое семейство, указанное в свойстве font-family всегда является основным. 4. Как изменить цвет текста форума?body{ background: #FFF; color: #222; font-family: Verdana, Tahoma, Arial, "Trebuchet MS", Sans-Serif, Georgia, Courier, "Times New Roman", Serif; font-size: 11px; line-height: 135%; margin: 0px; padding: 0px; /* required for Opera to have 0 margin */ text-align: center; /* centers board in MSIE */ }color: #222; - это означает цвет текст. 5. Как изменить стиль ссылок на форуме?a:link, a:visited, a:active{ background: transparent; color: #222; text-decoration: underline; } a:hover{ background: transparent; color: #34498B; }Этот участок отвечает за стиль ссылок. 6. Как сделать подчёркивание ссылок точками?Нужно найти этот фрагмент:a:link, a:visited, a:active{ background: transparent; color: #222; text-decoration: underline; } a:hover{ background: transparent; color: #34498B; } И заменить его этим:a:link, a:visited, a:active{ background: transparent; color: #222; text-decoration: none; border-bottom: 1px dotted #222; } a:hover{ background: transparent; color: #34498B; }Строка border-bottom: 1px dotted #222; отвечает за подчёркивание ссылок точками (dotted). 7. Как изменить высоту логотипа?#logostrip{ background: #3860BB url(style_images/<#IMG_DIR#>/tile_back.gif); border: 1px solid #FFF; height: 68px; margin: 0; padding: 0; }Этот участок отвечает за логотип на форуме, а строка height: 68px; - за высоту этого логотипа. 8. Как удалить поля, окружающие форум?Нужно найти участок:.borderwrap, .borderwrapm{ /* this will affect the outlining border of all the tables and boxes through-out the skin. */ background: #FFF; border: 1px solid #072A66; padding: 0px; margin: 0px; } И заменить его на:.borderwrap, .borderwrapm{ /* this will affect the outlining border of all the tables and boxes through-out the skin. */ background: #FFF; border: 0; padding: 0px; margin: 0px; } 9. Как изменить цвет полей, окружающих форум?.borderwrap, .borderwrapm{ /* this will affect the outlining border of all the tables and boxes through-out the skin. */ background: #FFF; border: 1px solid #072A66; padding: 0px; margin: 0px; }Нужно изменить строку background: #FFF;. Например, если вы хотите сделать поля чёрными, то нужно изменить строчку на background: #000;. 10. Как поместить фоновое изображение в сообщение? Как поменять цвет бэкграунда сообщения?Для этого нужно найти участок:.post1, .bg1{ background: #F5F9FD; } .post2, .bg3{ background: #EEF2F7; } И заменить его на:.post1, .bg1{ background: #цвет url(style_images/<#IMG_DIR#>/bgpost.jpg) no-repeat; } .post2, .bg3{ background: #цвет url(style_images/<#IMG_DIR#>/bgpost.jpg) no-repeat; }#цвет - цвет бэкграунда;bgpost.jpg - изображение, которое будет фоновым рисунком. 11. Как изменить описание разделов форума?.forumdesc, .forumdesc a:link, .forumdesc a:visited, .forumdesc a:active{ background: transparent; font-size: 10px; color: #666; line-height: 135%; margin: 2px 0 0 0; padding: 0; }В этом участке:color: #666; - цвет шрифта описания;font-size: 10px; - размер шрифта описания. 12. Как изменить ширину форума?#ipbwrapper{ margin: 20px auto 20px auto; /* centers the box, no matter the overall width, also applies a 20px gap at the top and bottom of the board */ text-align: left; /* re_aligns text to left second part of two part MSIE centering workaround */ /* EDIT THIS TO CHANGE THE WIDTH OF THE BOARD -> 960px is a common fixed resolution size */ width: 98%; }Строка width: 98%; отвечает за размер форума. Чем больше вы ставите число, тем шире становится ваш форум. Так же его можно вообще сделать фиксированным по ширине, поменяв % на px. 13. Как сделать рамку вокруг форума?Для этого нужно найти участок:#ipbwrapper{ margin: 20px auto 20px auto; /* centers the box, no matter the overall width, also applies a 20px gap at the top and bottom of the board */ text-align: left; /* re_aligns text to left second part of two part MSIE centering workaround */ /* EDIT THIS TO CHANGE THE WIDTH OF THE BOARD -> 960px is a common fixed resolution size */ width: 98%; } И заменить его на:#ipbwrapper{ margin: 20px auto 20px auto; /* centers the box, no matter the overall width, also applies a 20px gap at the top and bottom of the board */ text-align: left; /* re_aligns text to left second part of two part MSIE centering workaround */ /* EDIT THIS TO CHANGE THE WIDTH OF THE BOARD -> 960px is a common fixed resolution size */ width: 98%; border: 5px solid #000; }Строка border: 5px solid #000; и будет являться вашей рамкой. 14. Как изменить фон форума?Нужно найти:#ipbwrapper{ margin: 20px auto 20px auto; /* centers the box, no matter the overall width, also applies a 20px gap at the top and bottom of the board */ text-align: left; /* re_aligns text to left second part of two part MSIE centering workaround */ /* EDIT THIS TO CHANGE THE WIDTH OF THE BOARD -> 960px is a common fixed resolution size */ width: 98%; } И заменить на:#ipbwrapper{ margin: 20px auto 20px auto; /* centers the box, no matter the overall width, also applies a 20px gap at the top and bottom of the board */ text-align: left; /* re_aligns text to left second part of two part MSIE centering workaround */ /* EDIT THIS TO CHANGE THE WIDTH OF THE BOARD -> 960px is a common fixed resolution size */ width: 98%; background: #FFF; }Строка background: #FFF; будет являться фоном форума. 15. Как сделать фоновую картинку?Чтобы поместить картинку на фон форума, необходимо найти:body{ background: #FFF; И заменить на:body{ background: #FFF url(style_images/<#IMG_DIR#>/background.jpg);background.jpg - это фоновая картинка форума. 16. Как удалить рамку в меню навигации?Для удаления рамки из меню навигации, необходимо найти:.ipb-top-left-link, .ipb-top-right-link { background: transparent url(style_images/<#IMG_DIR#>/tile_sub-lite.gif); float: right; font-size: 10px; font-weight: bold; letter-spacing: 0.5px; margin: 0px; padding: 7px 0 7px 0; width: auto; border-left: 1px solid #dce3ee; } И заменить на:.ipb-top-left-link, .ipb-top-right-link { background: transparent url(style_images/<#IMG_DIR#>/tile_sub-lite.gif); float: right; font-size: 10px; font-weight: bold; letter-spacing: 0.5px; margin: 0px; padding: 7px 0 7px 0; width: auto; border-left: 0; } Найти:.ipb-top-left-link { float: left; border-left: 0px; border-right: 1px solid #dce3ee; } Заменить на:.ipb-top-left-link { float: left; border-left: 0px; border-right: 0; } 17. Как изменить вид тегов CODE, QUOTE?За этим отвечает участок:.quotetop{ background: #E4EAF2 url(style_images/<#IMG_DIR#>/css_img_quote.gif) no-repeat right; border: 1px dotted #000; border-bottom: 0; border-left: 4px solid #8394B2; color: #000; font-weight: bold; font-size: 10px; margin: 2px auto 0 auto; padding: 3px; } .quotemain{ background: #FAFCFE; border: 1px dotted #000; border-left: 4px solid #8394B2; border-top: 0; color: #465584; padding: 4px; margin: 0 auto 0 auto; } .codetop, .sqltop, .htmltop{ background: #FDDBCC url(style_images/<#IMG_DIR#>/css_img_code.gif) no-repeat right; color: #000; font-weight: bold; margin: 0 auto 0 auto; padding: 3px; }Где:color - цвет текста;background - цвет фона. 18. Как уменьшить высоту названий категорий?Для этого нужно найти участок:.borderwrap h3, .maintitle, .maintitlecollapse{ background: url(style_images/<#IMG_DIR#>/tile_cat.gif); border: 1px solid #FFF; border-bottom: 1px solid #5176B5; color: #FFF; font-size: 12px; font-weight: bold; margin: 0px; padding: 8px; }Строка padding: 8px; отвечает за высоту названий категорий. Изменено 20 Апреля 2009 пользователем idTails Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
vania62101 Опубликовано 5 Апреля 2008 Жалоба Поделиться Опубликовано 5 Апреля 2008 Спасибо нашёл чтото полезное для себя Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
DerSpinner Опубликовано 6 Апреля 2008 Жалоба Поделиться Опубликовано 6 Апреля 2008 17. Как изменить вид тегов CODE, QUOTE?неплохо бы дополнить как сделать их круглыми по средствам КССС =) но всёравно спасибо. гут статейка Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
idTails Опубликовано 6 Апреля 2008 Автор Жалоба Поделиться Опубликовано 6 Апреля 2008 17. Как изменить вид тегов CODE, QUOTE?неплохо бы дополнить как сделать их круглыми по средствам КССС =)Какими средствами? Их несколько.Можно сделать закругление с помощью нативного варианта из КСС3. Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
DerSpinner Опубликовано 6 Апреля 2008 Жалоба Поделиться Опубликовано 6 Апреля 2008 именно CSS методами.(тема же про это),а не ковырянием файлов=) Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
idTails Опубликовано 6 Апреля 2008 Автор Жалоба Поделиться Опубликовано 6 Апреля 2008 именно CSS методами.(тема же про это),а не ковырянием файлов=)В том то и дело что КСС-метод не один, а несколько. Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
DerSpinner Опубликовано 6 Апреля 2008 Жалоба Поделиться Опубликовано 6 Апреля 2008 хм. тогда ИМХО идеально (для всех пользователей) - все методы.тогда каждый сможет подобрать под себя более оптимальный=) Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
idTails Опубликовано 6 Апреля 2008 Автор Жалоба Поделиться Опубликовано 6 Апреля 2008 (изменено) Нативный КСС3 метод, это прописывание св-ва border-radius.Например, border-radius: 3px;Чем больше число, тем "закруглённее" получаются уголки.Но работать будет только в самых новых браузерах, поддерживающих КСС3. Пример можно посмотреть на моих "заметках".Войдите под Firefox 2 и увидите закруглённые уголки. Изменено 6 Апреля 2008 пользователем idTails Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
DerSpinner Опубликовано 6 Апреля 2008 Жалоба Поделиться Опубликовано 6 Апреля 2008 в Сафари работает.в Опере 9,27 нет.хм.а какие ещё методы?=) Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
idTails Опубликовано 6 Апреля 2008 Автор Жалоба Поделиться Опубликовано 6 Апреля 2008 Опера пока не поддерживает в полной мере КСС3.Остальные методы. Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
DerSpinner Опубликовано 6 Апреля 2008 Жалоба Поделиться Опубликовано 6 Апреля 2008 Спасибо! поизучаемс Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
Sannis Опубликовано 6 Апреля 2008 Жалоба Поделиться Опубликовано 6 Апреля 2008 Правильный метод для пользователя не тот, который последний, а тот, который кроссбраузерный.Без правки файлов в ближайшие 2-5 лет никак. Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
Prokur@tor Опубликовано 29 Апреля 2008 Жалоба Поделиться Опубликовано 29 Апреля 2008 Подскажите, как изменить цвет полоски, где выбор стиля, языка ит.д.? Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
Prokur@tor Опубликовано 29 Апреля 2008 Жалоба Поделиться Опубликовано 29 Апреля 2008 Нашел. В #gfooter ) Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
idTails Опубликовано 1 Мая 2008 Автор Жалоба Поделиться Опубликовано 1 Мая 2008 Ленточки на 9 мая!Георгиевская ленточка для вашего сайта Падхади дарагой, выбирай, пакупай! Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
lirta Опубликовано 12 Мая 2008 Жалоба Поделиться Опубликовано 12 Мая 2008 4. Как изменить цвет текста форума?body{ background: #FFF; color: #222; font-family: Verdana, Tahoma, Arial, "Trebuchet MS", Sans-Serif, Georgia, Courier, "Times New Roman", Serif; font-size: 11px; line-height: 135%; margin: 0px; padding: 0px; /* required for Opera to have 0 margin */ text-align: center; /* centers board in MSIE */ }color: #222; это означает цвет текст. думаю, тут вернее будет .ipbtable { width:100% } table.ipbtable, tr.ipbtable, td.ipbtable { /* required for text in tables, because tables do not inherit from body */ background: transparent; color: #000; font-size: 11px; line-height: 110%; Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
Форумы Apple Опубликовано 25 Мая 2008 Жалоба Поделиться Опубликовано 25 Мая 2008 А где изменить размер шрифта самих форумов? Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
Frank Опубликовано 21 Июля 2008 Жалоба Поделиться Опубликовано 21 Июля 2008 Да, меня это тоже интересует Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
Grandsire Опубликовано 30 Июля 2008 Жалоба Поделиться Опубликовано 30 Июля 2008 idTails ,по фоновым картинкам в полях сообщений и форумов...какие есть нюансы по размерам.Там маленькой картинкой замоститься должно или надо угадывать размер всего поля?Как это происходит,уточни плиз)По идее так же в любое поле вставить же можно ? Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
idTails Опубликовано 30 Июля 2008 Автор Жалоба Поделиться Опубликовано 30 Июля 2008 http://www.htmlbook.ru/css/background.html Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
Grandsire Опубликовано 31 Июля 2008 Жалоба Поделиться Опубликовано 31 Июля 2008 http://www.htmlbook.ru/css/background.html[/quot]Спасибо!!! Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
Serebrjany mir Опубликовано 27 Сентября 2009 Жалоба Поделиться Опубликовано 27 Сентября 2009 Я уже нашел ответ на этот вопрос.Устанавливаешь FireBug плагин для Firefox и включаешь режим отладки. Наводишь на элемент, который хочешь изменить в твоем случае — текст, и он показывает его характеристики, а также строчку и имя файла. Берешь эту информацию и меняешь в CSS. Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
Serebrjany mir Опубликовано 27 Сентября 2009 Жалоба Поделиться Опубликовано 27 Сентября 2009 Я уже нашел ответ на этот вопрос.Устанавливаешь FireBug плагин для Firefox и включаешь режим отладки. Наводишь на элемент, который хочешь изменить в твоем случае — текст, и он показывает его характеристики, а также строчку и имя файла. Берешь эту информацию и меняешь в CSS. Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
Dagot Опубликовано 21 Ноября 2009 Жалоба Поделиться Опубликовано 21 Ноября 2009 Можете плиз подсказать как поменять фоновый цвет минипрофиля. Да и вообще как называется селектор, который отвечает за минипрофиль?? Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
Myma Опубликовано 28 Ноября 2009 Жалоба Поделиться Опубликовано 28 Ноября 2009 А не подскажете, как:1) Поменять цвет названия категории форумов2) сделать, чтобы человек мог логиниться под одним именем, а отобажаться под другим. Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
Рекомендуемые сообщения
Присоединиться к обсуждению
Вы можете ответить сейчас, а зарегистрироваться позже. Если у вас уже есть аккаунт, войдите, чтобы ответить от своего имени.