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

Сейчас мы сделаем окантовку профиля пользователя в сообщении, как показано на рисунке:
[attachmentid=722]

Для начала, нам нужно в CSS стиля добавить следующий код:
Скины и Шаблоны - Настройка скинов - [скин] - CSS
Добавить в конец

Код

.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;
}

Скины и Шаблоны - Настройка скинов - [скин] - HTML - Topic View Section - Post Entry
Находим так примерно такой текст:

Код

{$author['title']}<Br>
{$author['member_rank_img']}<br>
{$author['member_group']}
{$author['member_posts']}
{$author['member_number']}

и добавляем вокруг каждого из них

Код

<div class="memdetails">

и

Код

</div>

Поясню, что здесь за окантовку отвечает <div class="memdetails">...</div>, т.е. вы сами можете конфигурировать изменение своего профиля.

Это сообщение отредактировал аsm-а - Фев 11 2015, 15:59

SpeedFire, может это вам поможет.
http://ipboard.net/index.php?showtopic=1529

а можно ли отдельную окантовку сделать другого цвета?

Да, замените в коде, который нужно вставлять в CSS, background: #fafcfe; - только то, что выделено жирным шрифтом.

спасибо большое

А как под спойлер поставить, некоторые поля?

Potter, http://ipboard.net/index.php?showtopic=3787

Предложу свой вариант (очень подойдет для светлых скинов)

в CSS:

Код

.memdetails {color:#242424;text-shadow: 1px 1px 0px #ededed;border:1px;border-top:none !important;border-style:solid;border-color:#ababab;-moz-border-radius:2px;border-radius:2px;-khtml-border-radius:2px;border-radius:2px;background: #D5D5D5;background: -moz-linear-gradient(top, #E3E3E3, #D5D5D5);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E3E3E3), color-stop(100%,#D5D5D5));background: -webkit-linear-gradient(top, #E3E3E3, #D5D5D5);background: -o-linear-gradient(top, #E3E3E3, #D5D5D5);background: -ms-linear-gradient(top, #E3E3E3, #D5D5D5);background: linear-gradient(top, #E3E3E3, #D5D5D5);line-height:21px;height:21px;width:148px;}

2 пункт смотрите в начале темы.

Представляете у меня не работает хотя тут то нечего и делать по разному пробовал но никак не отображается самому смешно

Может кто подскажет в чем дело?

AweDer, хм, у вас на данном форуме отображается окантовка?

Цитата (аsm-а @ Май 18 2012, 23:27)

AweDer, хм, у вас на данном форуме отображается окантовка?

Конечно тут все отображается но у меня на форуме ничего не выходит.Кстати сделать иконку полая тоже не могу такие вроде простые вещи но не выходит странно

Открываем пост ентри, вставляем куда нибудь код (можно даже наверх):

HTML

<script type="text/javascript">
var pol=document.getElementById('ipbwrapper').getElementsByTagName("span");
var ar=0;
for (ar=0; ar<=(pol.length-1); ar++)
{
if (pol[ar].className=="pol")
{
if (pol[ar].innerHTML.indexOf("Мужчина")!=-1)
{
pol[ar].innerHTML="<img src='http://ipb.su/images/sm.gif' />"
}
else if (pol[ar].innerHTML.indexOf("Женщина")!=-1)
{
pol[ar].innerHTML="<img src='http://ipb.su/images/sf.gif' />"
}
else if (pol[ar].innerHTML.indexOf("")!=-1)
{
pol[ar].innerHTML="</span>"
}

}
}
<<span style='color:blue'>/script>

И вставляем, например после аватара:

HTML

<span class="pol">$author[field_X]</span>

Меняем вместо X на свою цифру доп. поля. Думаю, объяснять не надо дальше

Это сообщение отредактировал аsm-а - Май 19 2012, 12:29

Цитата (аsm-а @ Май 19 2012, 12:26)

Открываем пост ентри, вставляем куда нибудь код (можно даже наверх):

HTML

<script type="text/javascript">
var pol=document.getElementById('ipbwrapper').getElementsByTagName("span");
var ar=0;
for (ar=0; ar<=(pol.length-1); ar++)
{
  if (pol[ar].className=="pol")
{
  if (pol[ar].innerHTML.indexOf("Мужчина")!=-1)
  {
pol[ar].innerHTML="<img src='http://ipb.su/images/sm.gif' />"
  }
  else if (pol[ar].innerHTML.indexOf("Женщина")!=-1)
  {
pol[ar].innerHTML="<img src='http://ipb.su/images/sf.gif' />"
  }
  else if (pol[ar].innerHTML.indexOf("")!=-1)
  {
pol[ar].innerHTML="</span>"
  }

}
}
<<span style='color:blue'>/script>

И вставляем, например после аватара:

HTML

<span class="pol">$author[field_X]</span>

Меняем вместо X на свою цифру доп. поля. Думаю, объяснять не надо дальше

в том то и дело что именно таки делал но нет ничего не иконки ни в профиле оформления ладно попробую еще помучатся если что отпишу Только этот код нужно в фотер вставлять

Это сообщение отредактировал AweDer - Май 19 2012, 14:10

Вы не включили отображение дополнительных полей в СРU.

Цитата (аsm-а @ Май 20 2012, 10:44)

Вы не включили отображение дополнительных полей в СРU.

Емо ее простая вещь а я как всегда лопух не допер спасибо за подсказку

Администрация все же подскажите не игнорьте меня Почему не отображается в профиле у меня ничего вроде все так сделал но увы ничего нет.

Вот код в стилях:


[Показать/Скрыть]

Код

#warnmenu { background-color: #ffffff;border: 1px solid #FF6666; }



/* FIX IE6 Scrollbars bug - Leave this in! */

/* FIX IE6 Scrollbars bug - Leave this in! */

html { overflow-x: auto; }



/* Body entry, change forum page background colour, default font, font size, etc. Leave text-align:center to center board content

  #ipwrapper will set text-align back to left for the forum. Any other tables / divs you use must use text-align:left to re-align

  the content properly. This is a work around to a known Internet Explorer bug */

BODY { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 11px; color: #000; margin:0px;padding:0px;background-color:#FFF; text-align:center }

TABLE, TR, TD { font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 11px; color: #000; }



/* MAIN WRAPPER: Adjust forum width here. Leave margins alone to auto-center content */

#ipbwrapper { text-align:left; width:95%; margin-left:auto;margin-right:auto }



a:link, a:visited, a:active { text-decoration: underline; color: #000 }

a:hover { color: #ff0000; text-decoration:underline }



fieldset.search { padding:6px; line-height:150% }

label  { cursor:pointer; }

form   { display:inline; }

img{ vertical-align:middle; border:0px }

img.attach { border:2px outset #EEF2F7;padding:2px }



.googleroot  { padding:6px; line-height:130% }

.googlechild { padding:6px; margin-left:30px; line-height:130% }

.googlebottom, .googlebottom a:link, .googlebottom a:visited, .googlebottom a:active { font-size:11px; color: #3A4F6C; }

.googlish, .googlish a:link, .googlish a:visited, .googlish a:active { font-size:14px; font-weight:bold; color:#00D; }

.googlepagelinks { font-size:1.1em; letter-spacing:1px }

.googlesmall, .googlesmall a:link, .googlesmall a:active, .googlesmall a:visited { font-size:10px; color:#434951 }



li.helprow { padding:0px; margin:0px 0px 10px 0px }

ul#help{ padding:0px 0px 0px 15px }



option.cat { font-weight:bold; }

option.sub { font-weight:bold;color:#555 }

.caldate   { text-align:right;font-weight:bold;font-size:11px;color:#777;background-color:#ffefd5;padding:4px;margin:0px }



.warngood { color:green }

.warnbad  { color:red }



#padandcenter { margin-left:auto;margin-right:auto;text-align:center;padding:14px 0px 14px 0px }



#profilename { font-size:28px; font-weight:bold; }

#calendarname { font-size:22px; font-weight:bold; }



#photowrap { padding:6px; }

#phototitle { font-size:24px; border-bottom:1px solid black }

#photoimg   { text-align:center; margin-top:15px }



#ucpmenu{ line-height:150%;width:22%; border:1px solid #345487;background-color: #F5F9FD }

#ucpmenu p  { padding:2px 5px 6px 9px;margin:0px; }

#ucpcontent { background-color: #ffffff; border:1px solid #345487;line-height:150%; width:auto }

#ucpcontent p  { padding:10px;margin:0px; }



#ipsbanner { position:absolute;top:1px;right:5%; }

#logostrip { border:1px solid #345487;background-color: #3860BB;background-image:url(style_images/<#IMG_DIR#>/tile_back.gif);padding:0px;margin:0px; }

#submenu   { border:1px solid #BCD0ED;background-color: #ffe5b4;font-size:10px;margin:3px 0px 3px 0px;color:#3A4F6C;font-weight:bold;}

#submenu a:link, #submenu  a:visited, #submenu a:active { font-weight:bold;font-size:10px;text-decoration: none; color: #3A4F6C; }

#userlinks { border:1px solid #C2CFDF; background-color: #ffdab9 }



#navstrip  { font-weight:bold;padding:6px 0px 6px 0px; }



.activeuserstrip { background-color:#fffddf; padding:6px }



/* Form stuff (post / profile / etc) */

.pformstrip { background-color: #ffdead; color:#3A4F6C;font-weight:bold;padding:7px;margin-top:1px }

.pformleft  { background-color: #fffddf; padding:6px; margin-top:1px;width:25%; border-top:1px solid #C2CFDF; border-right:1px solid #C2CFDF; }

.pformleftw { background-color: #F5F9FD; padding:6px; margin-top:1px;width:40%; border-top:1px solid #C2CFDF; border-right:1px solid #C2CFDF; }

.pformright { background-color: #fffddf; padding:6px; margin-top:1px;border-top:1px solid #C2CFDF; }



/* Topic View elements */

.signature   { font-size: 10px; color: #339; line-height:150% }

.postdetails { font-size: 10px }

.postcolor   { font-size: 12px; line-height: 160% }



.normalname { font-size: 12px; font-weight: bold; color: #003 }

.normalname a:link, .normalname a:visited, .normalname a:active { font-size: 12px }

.unreg { font-size: 11px; font-weight: bold; color: #900 }



.post{
background: #F9F7F1 url(http://s019.radikal.ru/i624/1205/65/02f2d4fe43c6.gif);
min-height: 300px;
padding: 15px 10px 10px 10px;
margin: 20px 20px 20px 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px solid #000000;
}

.post2 { background-color: #ffe4b2 }

.postlinksbar { background-color:#D1DCEB;padding:7px;margin-top:1px;font-size:10px; background-image: url(http://s019.radikal.ru/i628/1205/79/79e3dacf3981.jpg) }



/* Common elements */

.row1 { background-color: #ffe4b2 }

.row2 { background-color: #ffffff}

.row3 { background-color: #ffffff }

.row4 { background-color: #ffffff}



.darkrow1 { background-color: #fcdd76; color:#4C77B6; }

.darkrow2 { background-color: #ffe4b2; color:#3A4F6C; }

.darkrow3 { background-color: #fffacd; color:#3A4F6C; }



.hlight { background-color: #DFE6EF }

.dlight { background-color: #EEF2F7 }



.titlemedium { font-weight:bold; color:#3A4F6C; padding:7px; margin:0px; background-image: url(http://s61.radikal.ru/i173/1205/6e/172d44cf79d5.jpg) }

.titlemedium  a:link, .titlemedium  a:visited, .titlemedium  a:active  { text-decoration: underline; color: #3A4F6C }



/* Main table top (dark blue gradient by default) */

.maintitle { vertical-align:middle;font-weight:bold; color:#4c3c18; padding:8px 0px 8px 5px; background-image: url(http://s019.radikal.ru/i628/1205/d2/16674*цензура*a4a9.jpg) }

.maintitle a:link, .maintitle  a:visited, .maintitle  a:active { text-decoration: none; color: #4c3c18 }

.maintitle a:hover { text-decoration: underline }



/* tableborders gives the white column / row lines effect */

.plainborder { border:1px solid #345487;background-color:#F5F9FD }

.tableborder { border:1px solid #345487;background-color:#FFF; padding:0; margin:0 }

.tablefill   { border:1px solid #345487;background-color:#F5F9FD;padding:6px;  }

.tablepad{ background-color:#ffdead;padding:6px }

.tablebasic  { width:100%; padding:0px 0px 0px 0px; margin:0px; border:0px }



.wrapmini{ float:left;line-height:1.5em;width:25% }

.pagelinks   { float:left;line-height:1.2em;width:35% }



.desc { font-size:10px; color:#434951 }

.edit { font-size: 9px }





.searchlite { font-weight:bold; color:#F00; background-color:#FF0 }



#QUOTE { white-space:normal; font-family: Verdana, Arial; font-size: 11px; color: #465584; background-color: #FAFCFE; border: 1px solid #000; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px }

#CODE  { white-space:normal; font-family: Courier, Courier New, Verdana, Arial;  font-size: 11px; color: #465584; background-color: #FAFCFE; border: 1px solid #000; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px }



.copyright { font-family: Verdana, Tahoma, Arial, Sans-Serif; font-size: 9px; line-height: 12px }



.codebuttons  { font-size: 10px; font-family: verdana, helvetica, sans-serif; vertical-align: middle }

.forminput, .textinput, .radiobutton, .checkbox  { font-size: 11px; font-family: verdana, helvetica, sans-serif; vertical-align: middle }



.thin { padding:6px 0px 6px 0px;line-height:140%;margin:2px 0px 2px 0px;border-top:1px solid #FFF;border-bottom:1px solid #FFF }



.purple { color:purple;font-weight:bold }

.red{ color:red;font-weight:bold }

.green  { color:green;font-weight:bold }

.blue   { color:blue;font-weight:bold }

.orange { color:#F90;font-weight:bold }



#HIDE { font-family: Verdana, Arial; font-size: 11px; color: #465584; background-color: #FAFCFE; border: 1px solid #000; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px }



#HIDEERROR { font-family: Verdana, Arial; font-size: 11px; color: #red; background-color: #FAFCFE; border: 1px solid #000; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px}



.QUOTE_top,

.HIDE_top,

.HIDEERROR_top{

background: #E4EAF2 url(/html/images/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;

}



.QUOTE,

.HIDE,

.HIDEERROR{

background: #FAFCFE;

border: 1px dotted #000;

border-left: 4px solid #8394B2;

border-top: 0;

color: #465584;

padding: 4px;

margin: 0 auto 0 auto;

}



.CODE_top,

.SQL_top,

.HTML_top{

background: #FDDBCC url(/html/images/css_img_code.gif) no-repeat right;

color: #000;

font-weight: bold;

margin: 0 auto 0 auto;

padding: 3px;

}



.CODE,

.SQL,

.HTML{

background: #FAFCFE;

border: 1px dotted #000;

color: #465584;

font-family: Courier, "Courier New", Verdana, Arial;

margin: 0 auto 0 auto;

padding: 2px;

}



/* Banlist page options, edit params to make appropriate table */



.banlist {

CURSOR:hand;

CURSOR:pointer;

border:1px solid;

border-collapse:collapse;

}



.banlist tr:hover { background-color: #DFE6EF; }



.banlist th {

background-image: url(style_images/<#IMG_DIR#>/tile_back.gif);

}



.banlisttitle {

font-size:2em;

color:green;

}



.banlistdesc {

}



.block1 {



width: auto;



background: #F5F9FD;



padding: 5px;



padding-right: 5px;



border: solid 1px black;



position:absolute;



z-index:20;}







.rte-buttonbar



{



background-color: #DCE7FC;



background-image: url("html/buttons/rte_tile.gif");



background-repeat: repeat-x;



border: 1px solid #020202;



letter-spacing: 0;


.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;
}

Вот код в пост энтру:

Код

post['name']}[/color], [/b]');">{$author['avatar']}</a></center> <br />
<center><div class="memdetails">{$author['title']}</div></center> <br />
<center>{$author['member_rank_img']}</center><br />
<center>{$author['member_group']}</center><br />
<center>{$author['member_posts']}</center><br />
<center>{$author['member_location']}</center><br />
  <center>{$author['member_number']}</center><br />
  <center>{$author['member_joined']}</center><br />
<a href="javascript:addName('[b][color=brown]{$post['name']}[/color][/b],');"><b> <center>Ответить Автору</center></b></a><br>
<center>{$author['member_status']}</center><br />
<center>{$author['rep']} {$post['rep_options']}</center><br />
  <center> {$author['warn_text']} {$author['warn_minus']}{$author['warn_img']}{$author['warn_add']}</center></span><br />
  <!--$ author[field_1]-->
<img src='{ibf.vars.img_url}/spacer.gif' alt='' width='160' height='1' /><br />
 </td>

Попробовал сделать для пробы :

Цитата

<center><div class="memdetails">{$author['title']}</div></center> <br />

И не работает в чем все таки проблема?

Это сообщение отредактировал Slesher - Май 30 2012, 10:46