ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов

Объявление

🔴 МАСТЕР-КЛАСС от magia "Жизненный цикл проекта"

Дата и время: начало 28 апреля в 16:00 по МСК;
Если у вас возникла идея создать ролевую игру, сообщество любителей собак или форум для киноманов,
но не знаете с чего начать и что делать, не беда! Мы здесь чтобы помочь.

Подробности

GEMcross

Кроссовер, ориентированный на активную игру и уютный флуд.
Собираем у себя драгоценных игроков уже почти три года.

Посетить

🔥 Новинка в портфолио: ДИЗАЙН И ГРАФИКА В СТИЛЕ GENSHIN IMPACT

Платформа: MyBB.ru (RusFF)
Стоимость: 6500 рублей;
Авторы: Moju & wasurenagusa

Посмотреть

💰 Теперь у нас можно приобрести "Мгновенные уведомления от Алекса"

Скрипт оповещает пользователей о событиях на форуме в реальном времени, придавая динамики общению.
Автор: Alex_63 | Платформа: MyBB.ru.

У нас: структурированная документация, возможность платить иностранными картами, перевыпустить подписку или купить бессрочно.

Купить скрипт

🌟 ОПЛАТА ЗАКАЗА НАГРАДНЫМИ БАЛЛАМИ И СКИДКИ

Заказы можно оплачивать наградными баллами (НБ). Полностью или частично.
Бартер за НБ осуществляется на условиях платного заказа, в качестве оплаты - НБ.
А если у вас есть любой платный заказ, вы можете обменять НБ на скидочные купоны.

узнать подробности

📣 Наш проект: Ролевой поисковик

Поиск роли на текстовых ролевых
Проект от специалистов FD

Спойлеры и обсуждение

❤️ Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее

SPECIAL OFFER: We distribute designs for free

Finalizing the layout for your project;
Developing a style code;
Mobile version included if you wish.

Details

Support the project

If you want to help us:
Become a moderator
SuggestionsReviews

Details
❗ ❗ ❗ Technical work is underway. We'll fix it soon. :) If you're english-speaker and want to use our forum, switch to the russian language. This is temporary, until the works with multi-language option will be done. Sorry for the inconvenience.

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



Окантовка полей профиля (css-код) (MyBB)

Сообщений 1 страница 10 из 58

1

Окантовка профиля в сообщении. Duka

Вариант первый

В html-верх

Код:
<style>
#pun #pun-index #pun-announcement h2 span {display: none;}
.post-author online, .pa-adnote, .pa-from, .pa-reg, .pa-posts, .pa-reputation, .pa-sex, .pa-icq, .pa-ip, .pa-online, .pa-age, .pa-mailagent, .pa-reg, .pa-avatar, .pa-title, .pa-author, .pa-time-visit, .pa-last-visit, .pa-fld1, .pa-fld2, .pa-fld3, {
   background: #fafcfe;
   border: 1px solid #cdd6e2;
   border-bottom-width: 2px;
   border-right-width: 2px;
   margin: 3px 1px 3px 1px;
}
</style>

[реклама вместо картинки]

Вариант второй

http://forumupload.ru/uploads/0007/e3/f7/60259-4-f.jpg
HTML верх

Код:
<style>
.memdetails
{
   background: #fafcfe;
   border: 1px solid #cdd6e2;
   border-bottom-width: 2px;
   border-right-width: 2px;
   padding: 4px 3px 4px 3px;
   margin: 3px 1px 3px 1px;
}
</style>

HTML низ

Код:
<script type="text/javascript">
var arr=document.getElementsByTagName("li")
i=0
str=document.URL
while(arr[i] ){
if((arr[i].className=="pa-author online") || (arr[i].className=="pa-author") || (arr[i].className=="pa-title") || (arr[i].className=="pa-avatar item2") || (arr[i].className=="pa-reg") || (arr[i].className=="pa-posts") || (arr[i].className=="pa-respect") || (arr[i].className=="pa-positive") || (arr[i].className=="pa-ip") || (arr[i].className=="pa-online")){
name=arr[i].innerHTML
name=name.substring(0)
arr[i].innerHTML="<div class=memdetails>"+name+"</div>"
}
i++
}
</script>

Третий вариант
http://forumupload.ru/uploads/0007/e3/f7/60259-3-f.jpg
(Сразу, как вы вставите код, такого профиля не будет. Его нужно настраивать самому, см. сообщение 2)

Код:
<style type="text/css">
.post-author ul li {
	text-align: center;
	padding: 2px;
	border: 1px solid #9d9d9d;
	background: #dfdfdf;
	margin: 2px;
}
.post-author ul li.pa-reg {
	border-bottom: none;
	margin-bottom: 0px;
}
.post-author ul li.pa-posts, 
.post-author ul li.pa-respect {
	border-top: none;
	border-bottom: none;
	margin-top: 0px;
	margin-bottom: 0px;
}
.post-author ul li.pa-positive {
	margin-top: 0px;
	border-top: none;
	//border-bottom: none;
}
.post-author ul li.pa-online, .post-author ul li.pa-author {
	border: #4aab42 solid 1px;
	padding: 2px;
	background: #d7e1c7;
	font-size: 11px;
}
.post-author ul li.pa-fld1 {
	border: #FF6666 solid 1px;
	padding: 2px;
	background: #FFDDDD;
	font-size: 11px;
}
</style>

Теги: окантовка профиля, css-код, профиль, Duka, css, mybb

+1

2

Берете у нас информацию? ПОЖАЛУЙСТА!!! СТАВЬТЕ ССЫЛКУ НА ЭТУ СТАНИЦУ!

FAQ - как сделать свой стиль окантовки профиля (с) Герда

1. Код окантовки профиля можно разместить в style.css или в html-верх между тегами

<style type="text/css">
.......тут код стиля......
</style>

2. Обозначаем редактируемые элементы.
вписывать элементы нужно таким образом:

.элемент ul li {
....тут стиль элемента....
}

Рассмотрим элементы профиля:

Поле никнейма: pa-author
Поле статуса: pa-title
Поле аватара: pa-avatar
Поле "Откуда": pa-from
Дата регистрации: pa-reg
Поле количества сообщений: pa-posts
Поле "Уважение": pa-respect
Поле "Позитив": pa-positive
Поле "Пол": pa-sex
Поле "Возраст": pa-age
Дополнительное поле: pa-fld1 (цифра - номер поля)
Поле IP пользователя: pa-ip
Поле "онлайн/оффлайн": pa-online

Таким образом выбираем элемент и устанавливаем стиль для него. Например:

.pa-author ul li {
....тут стиль элемента....
}

Если у нескольких редактируемых элементов один и тот же стиль, пишите их подряд:

.post-author ul li.pa-posts,
.post-author ul li.pa-respect {
....тут стиль элемента....
}

2. Рассмотрим средства редактирования элементов.

Всяческие декорации содержимого элементов:

background - фон

background: #ffffff;

красное - цвет фона

text-align - расположение содержимого

text-align: center;

красное - расположение: center - по центру, left - слева, right - справа

font-size - размер шрифта

font-size: 11px;

красное - размер в пикселях

font-color- цвет шрифта

font-color: #ffffff;

красное - цвет шрифта

font-style/font-weight- стиль шрифта

font-style: italic;

красное - стиль

для FONT-STYLE

normal - Обычное начертание текста.
italic - Курсивное начертание.
oblique - Наклонное начертание. Курсив и наклонный шрифт при всей их похожести не одно и то же. Курсив это специальный шрифт имитирующий рукописный, наклонный же образуется путем наклона обычных знаков вправо.
inherit - Наследует значение родителя.

для FONT-WEIGHT

bold — полужирное начертание
bolder — жирное начертание
lighter — светлое начертание
normal — нормальное начертание.

padding - отступ от границ

padding: 2px;

красное - отступ в пикселях

Ну и наконец самое важное для окантовки:

border - границы.

border: 1px solid #bdc2dd;

красное - ширина границы в пикселях
синее - стиль границ
Вот такие бывают значения:
http://forumupload.ru/uploads/0007/e3/f7/42265-1.gif
если написать "none" - границ не будет
зеленое - цвет границ

Эти средства редактирования лучше рассмотреть вместе:
border-bottom - нижняя линия границ
border-top - верхняя линия границ
margin - отступ
margin-top - отступ сверху
margin-bottom -отступ снизу

благодаря ним можно окантовывать несколько элементов одним блоком, например:

.post-author ul li.pa-posts,
.post-author ul li.pa-respect {
border-top: none;
border-bottom: none;
margin-top: 0px;
margin-bottom: 0px;

}

Итого. http://i.smiles2k.net/aiwan_smiles/smile3.gif
Вот пример редактирования кода с нашего форума:

Код:
.post-author ul li {
	text-align: center;
	padding: 1px;
	border: 1px solid #bdc2dd;
	background: #ffffff;
	margin: 2px;
}
.post-author ul li.pa-reg {
	border-bottom: none;
	margin-bottom: 0px;
}
.post-author ul li.pa-posts, 
.post-author ul li.pa-respect {
	border-top: none;
	border-bottom: none;
	margin-top: 0px;
	margin-bottom: 0px;
}
.post-author ul li.pa-positive {
	margin-top: 0px;
	border-top: none;
        border-bottom: none;
}
.post-author ul li.pa-author {
	border: #bdc2dd solid 1px;
	padding: 2px;
	background: #dbdeef;
	font-size: 15px;
}

.post-author ul li.pa-online {
	border: #bdc2dd solid 1px;
	padding: 2px;
	background: #ffffff;
	font-size: 11px;
}

.post-author ul li.pa-fld3 {
	border: #FF6666 solid 1px;
	padding: 2px;
	background: #FFDDDD;
	font-size: 11px;
}
.post-author ul li.pa-fld2 {
	border: #6683ff solid 1px;
	padding: 2px;
	background: #dde3ff;
	font-size: 11px;
}
.post-author ul li.pa-fld4 {
	border: #46a946 solid 1px;
	padding: 2px;
	background: #b0efb6;
	font-size: 11px;
}

+3

3

не работает  http://i.smiles2k.net/aiwan_smiles/sad.gif

0

4

НастёнкаКавай

у нас все работает.

0

5

Извините) Разобралась  http://i.smiles2k.net/aiwan_smiles/good.gif  класс, всё работает

0

6

вот у меня есть скирпт Окантовка профиля и мне бы хотелось чтобы таблица окантовки была шириной 178px , это можно как-нибудь сделать?)

Код:
<style type="text/css">
.post-author ul li {
 text-align: center;
 font-style: italic;
 padding: 1px;
 border: 1px solid #324956;
 background: transparent;
 margin: 2px;
}
.post-author ul li.pa-reg {
 border-bottom: none;
 margin-bottom: 0px;
}
.post-author ul li.pa-posts, 
.post-author ul li.pa-respect {
 border-top: none;
 border-bottom: none;
 margin-top: 0px;
 margin-bottom: 0px;
}
.post-author ul li.pa-positive {
 margin-top: 0px;
 border-top: none;
        border-bottom: none;
}
.post-author ul li.pa-author {
 border: #324956 solid 1px;
 padding: 2px;
 background: transparent;
 font-size: 20px;
}

.post-author ul li.pa-online {
 border: #324956 solid 1px;
 padding: 2px;
 background: transparent;
 font-size: 11px;
}

.post-author ul li.pa-fld3 {
 border: # 324956 solid 1px;
 padding: 2px;
 background: #c3c8cb;
 font-size: 11px;
}
.post-author ul li.pa-fld2 {
 border: #324956 solid 1px;
 padding: 2px;
 background: # 4487ac;
 font-size: 11px;
}
.post-author ul li.pa-fld4 {
 border: #324956 solid 1px;
 padding: 2px;
 background: # 5f669a;
 font-size: 11px;
}
</style>

0

7

Арти
попробуй так:

<style type="text/css">
.post-author ul li {
width: 178px;
text-align: center;
font-style: italic;
padding: 1px;
border: 1px solid #324956;
background: transparent;
margin: 2px;
}
.post-author ul li.pa-reg {
border-bottom: none;
margin-bottom: 0px;
}
.post-author ul li.pa-posts,
.post-author ul li.pa-respect {
border-top: none;
border-bottom: none;
margin-top: 0px;
margin-bottom: 0px;
}
.post-author ul li.pa-positive {
margin-top: 0px;
border-top: none;
        border-bottom: none;
}
.post-author ul li.pa-author {
border: #324956 solid 1px;
padding: 2px;
background: transparent;
font-size: 20px;
}

.post-author ul li.pa-online {
border: #324956 solid 1px;
padding: 2px;
background: transparent;
font-size: 11px;
}

.post-author ul li.pa-fld3 {
border: # 324956 solid 1px;
padding: 2px;
background: #c3c8cb;
font-size: 11px;
}
.post-author ul li.pa-fld2 {
border: #324956 solid 1px;
padding: 2px;
background: # 4487ac;
font-size: 11px;
}
.post-author ul li.pa-fld4 {
border: #324956 solid 1px;
padding: 2px;
background: # 5f669a;
font-size: 11px;
}
</style>

0

8

Герда
грасьяс)

0

9

мм не сработала окантовка

Код:
<style type="text/css">
.pa-author ul li {
text-align: center;
border: 3 px groove #bdc2dd;
}
.pa-title ul li {
text-align: center;
border: 3 px groove #bdc2dd;
}
.pa-avatar ul li {
border: 3 px groove #bdc2dd;
}
</style>

что-то не так в коде?

0

10

Здравствуйте! =)
Подскажите, а можно сделать как-нибудь окантовку "резиновой"? А то ведь аватары разные бывают, ширину можно ещё ограничить до 190, так как сейчас это частая ширина, а вот длинна зависит всё равно от картинки и что там изображено...

0