Перейти к контенту

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

Перевёл FAQ с французского сайта ipbcustomize.com + немного своего добавил.

Если что - то можно его подправить.

Основная версия: 2.3.x

Остальное: IP.Board FAQ по стилям и их настройке

 

1. Как я могу локализовать стиль?

Локализовать для себя стиль довольно просто. На эту тему в нашей Wiki есть специальная статья.

 

 

2. Где я могу посмотреть документацию по CSS стиля?

Для версии 2.3.x

 

 

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; отвечает за высоту названий категорий.

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

17. Как изменить вид тегов CODE, QUOTE?

неплохо бы дополнить как сделать их круглыми по средствам КССС =)

 

но всёравно спасибо. гут статейка

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

17. Как изменить вид тегов CODE, QUOTE?

неплохо бы дополнить как сделать их круглыми по средствам КССС =)

Какими средствами? :D

Их несколько.

Можно сделать закругление с помощью нативного варианта из КСС3.

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

именно CSS методами.(тема же про это),а не ковырянием файлов=)

В том то и дело что КСС-метод не один, а несколько.

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

хм. тогда ИМХО идеально (для всех пользователей) - все методы.

тогда каждый сможет подобрать под себя более оптимальный=)

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

Нативный КСС3 метод, это прописывание св-ва border-radius.

Например, border-radius: 3px;

Чем больше число, тем "закруглённее" получаются уголки.

Но работать будет только в самых новых браузерах, поддерживающих КСС3.

 

Пример можно посмотреть на моих "заметках".

Войдите под Firefox 2 и увидите закруглённые уголки.

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

Опера пока не поддерживает в полной мере КСС3.

Остальные методы.

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

Правильный метод для пользователя не тот, который последний, а тот, который кроссбраузерный.

Без правки файлов в ближайшие 2-5 лет никак.

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

  • 4 недели спустя...

Ленточки на 9 мая!

Георгиевская ленточка для вашего сайта

 

Падхади дарагой, выбирай, пакупай! :D

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

  • 2 недели спустя...
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%;

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

  • 2 недели спустя...
  • 1 месяц спустя...
  • 2 недели спустя...

idTails ,

по фоновым картинкам в полях сообщений и форумов...какие есть нюансы по размерам.Там маленькой картинкой замоститься должно или надо угадывать размер всего поля?Как это происходит,уточни плиз)

По идее так же в любое поле вставить же можно ?

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

  • 1 год спустя...

Я уже нашел ответ на этот вопрос.

Устанавливаешь FireBug плагин для Firefox и включаешь режим отладки. Наводишь на элемент, который хочешь изменить в твоем случае — текст, и он показывает его характеристики, а также строчку и имя файла. Берешь эту информацию и меняешь в CSS.

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

Я уже нашел ответ на этот вопрос.

Устанавливаешь FireBug плагин для Firefox и включаешь режим отладки. Наводишь на элемент, который хочешь изменить в твоем случае — текст, и он показывает его характеристики, а также строчку и имя файла. Берешь эту информацию и меняешь в CSS.

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

  • 1 месяц спустя...
Можете плиз подсказать как поменять фоновый цвет минипрофиля. Да и вообще как называется селектор, который отвечает за минипрофиль??
Ссылка на комментарий
Поделиться на других сайтах

А не подскажете, как:

1) Поменять цвет названия категории форумов

2) сделать, чтобы человек мог логиниться под одним именем, а отобажаться под другим.

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

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

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

Гость
Ответить в этой теме...

×   Вы вставили отформатированный текст.   Удалить форматирование

  Допустимо не более 75 смайлов.

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

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

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

Зарузка...
×
×
  • Создать...

Важная информация

Находясь на нашем сайте, вы соглашаетесь на использование файлов cookie, а также с нашим положением о конфиденциальности Политика конфиденциальности и пользовательским соглашением Условия использования.