Userinfopane - профиль в рамке

[FDGod]

Здравствуйте! Сразу к делу:

Хотелось бы, чтоб профиль (см. рис.) был так сказать в окремой рамке, а то не удобно как то выглядит и пусто.
Вобщем, на рис. синим овалом отображено примерное расположение рамки, а красным четыреугольником обозначено кнопки которые хотелось бы, чтоб они были выпуклой формы.
Заранее спасибо !

Изменено 26 февраля, 2014 пользователем FDGod

[Recouse]

1. Заходим в [ Админ центр -> Внешний вид -> Ваш шаблон -> Глобальные -> userInfoPane ] | Удаляем все от туда и вставляем код приведенный ниже:

<div class="user_block">
     <div class="psevdo"></div>
<if test="membertitle:|:$author['member_title']">
<p class='desc member_title'>{$author['member_title']}</p>
        </if>
    </div>
        
    <if test="avatar:|:$author['member_id']">
            <div class='avatar'>
                <if test="canSeeProfiles:|:$this->memberData['g_is_supmod'] OR ( $this->memberData['g_mem_info'] && ! IPSMember::isInactive( $author ) )">
                <a itemprop="url" href="{parse url="showuser={$author['member_id']}" template="showuser" seotitle="{$author['members_seo_name']}" base="public"}" title="{$this->lang->words['view_profile']}: {$author['members_display_name']}" class='ipsUserPhotoLink'>
                </if>
                <if test="hasVariable:|:$this->settings['member_topic_avatar_max']">
                    <img itemprop="image" src='{$author['pp_main_photo']}' class='ipsUserPhoto ipsUserPhoto_variable' />
                <else />
                    <img itemprop="image" src='{$author['pp_thumb_photo']}' class='ipsUserPhoto ipsUserPhoto_large' />
                </if>
                <if test="canSeeProfiles2:|:$this->memberData['g_is_supmod'] OR ( $this->memberData['g_mem_info'] && ! IPSMember::isInactive( $author ) )">
                </a>
                </if>
            </div>
        <else />
            <div class='avatar'>
                <img itemprop="image" src='{$author['pp_thumb_photo']}' class='ipsUserPhoto ipsUserPhoto_large' />
            </div>
        </if>

        <if test="rankimage:|:$author['member_rank_img']">
            <div class='group_icon'>
            <if test="rankimageimage:|:$author['member_rank_img_i'] == 'img'">
                <img src='{$author['member_rank_img']}' alt='' />
            <else />
                {$author['member_rank_img']}
            </if>
            </div>
        </if>
        <br>
    <div class="wa-block">
        <div class="psevdo"></div>
        Сообщений:
        <div class="u-mini">
            « {parse expression="$this->registry->getClass('class_localization')->formatNumber( intval( $author['posts'] ) )"} »
        </div>
    </div>

<div class="wa-block">
        <div class="psevdo"></div>
        Варнов:
        <div class="u-mini">
            « <a href='{parse url="app=members&amp;module=profile&amp;section=warnings&amp;member={$author['member_id']}&amp;from_app={$this->request['app']}&amp;from_id1={$contentid}&amp;from_id2={$options['id2']}" base="public"}' id='warn_link_{$contentid}_{$author['member_id']}' title='{$this->lang->words['warn_view_history']}'>{parse expression="sprintf( $this->lang->words['warns_status'], $author['warn_level'] )"}</a> »
        </div>
    </div>
    
    <if test="authorcfields:|:$author['custom_fields'] != """>        
        <foreach loop="customFieldsOuter:$author['custom_fields'] as $group => $data">
            <foreach loop="customFields:$author['custom_fields'][ $group ] as $field">
                <if test="$field != ''">
                        
                    {$field}
                        
                </if>
            </foreach>
        </foreach>
    </if>

2. Идем в [ Админ центр -> Внешний вид -> Ваш шаблон -> CSS -> ipb_styles.css ] | В самый низ вставляем следующий код:

.member_title {
    background: #e9e9e9;
    height: 17px;
    display: inline-block;
    font-size: 14px;
    padding: 1px;
    width: 152px;
    text-align: center;
    font-size: 0.8em;
    color: #606060;
}

.user_block {
       color:#474747;
}

.wa-block {
       border-radius: 3px;
       -moz-border-radius: 3px;
       -webkit-border-radius: 3px;
       height: 21px;
    padding: 0 3px;
       width: 137px;
       text-align: left;
       background: #e9e9e9;
       margin: 4px auto;
}

.u-mini {
       float: right;
}

.psevdo {
       height: 3px;
}

3. Админ центр -> Пользователи -> Дополнительные поля -> Выбираем нужное (ICQ / Skype / Город и тд), выбрали, листаем в самый низ, и в окошко где написано "Отображение поля в сообщении" вставляем:

<div class="wa-block">
<div class="psevdo"></div>
{title}:
<div class="u-mini">« {content} »</div>
</div>

Цитата

Заместо {title}: можете написать Skype: , ICQ: , Город: и тд. Мне удобнее использовать через ручной метод, а не через {title}.
Теперь сделаем так, чтобы заместо « %d баллов предупреждения » писало: Варнов: « %d » || %d это цифры (для новичков говорю ).

 
4. Открываем [ Админ центр -> Внешний вид -> Языки -> Русский (RU) -> Добавить строчку :

Приложение: Система
Набор слов: public_global
Ключ: warns_status
Текст по умолчанию: %d

[FDGod]

так же

[Recouse]

FDGod, что так же?

[FDGod]

ну так само профиль и остался как на картинке

[FDGod]

Ну вот, решил так сказать оновить тему. Вобщем есть 2 рисунки : до.png и после.png

На рис. до.png изображен профиль который сейчас, а на рис. после.png изображен профиль который хотелось бы получить.

+ Кнопочки хотелось бы чтоб они мали форму некой выпукленности с небольшой тенью  и при наведении на них, происходил эффект нажатия.
Прошу помочь. Нуждаюсь очень.
Заранее спасибо
 

Изменено 27 февраля, 2014 пользователем FDGod

[FDGod]

Актуально!

[WOLF]

я один не вижу отличия в этих скринах? 

[LvsF]

я один не вижу отличия в этих скринах? 

Возможно.

 

Слева от текста бордер через весь пост и бэкграунд userInfoPane отличается.

[RealUser]

Тс, вам подсказал товарищ Recouse. Не получается- флаг вам в рук- новый стиль берите

[FDGod]

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

[Recouse]

FDGod, ну сложно найти в нете примеры, поисковики зачем придумали?

[FDGod]

FDGod, ну сложно найти в нете примеры, поисковики зачем придумали?

 

вот именно я об этом и пишу, не писал бы сразу сюда ибо мне лень что то прописывать в инете, переискал почти все, стили КСС, коды ШТМЛ для панели но все бесполезно.

[LvsF]

вот именно я об этом и пишу, не писал бы сразу сюда ибо мне лень что то прописывать в инете, переискал почти все, стили КСС, коды ШТМЛ для панели но все бесполезно.

Не можете искать, начинайте изучать css+html.

 

Т.к. у Вас в профиле ссылка на форум кривая, напишу решение для дефолтного стиля.

 

1. Открываем АЦ - Внешний вид - Стиль IP.Board - ipb_styles.css

2. Добавляем границу (border).

Находим 

 

.post_body {
	margin: 0 10px 0 185px;
	padding-top: 15px;
}

 

добавляем

	border-left: 1px solid #D8DDE8;

Промежуточный итог

3. Отодвигаем текст поста и дату, чтобы не прилипала к бордеру.

Добавляем

	padding-left: 10px;

Промежуточный итог

 

4. Опускаем бордер к низу поста

Находим 

	.post_wrap { top: 0px; }	

и добавляем 

margin-bottom: -10px;

Промежуточный итог

 

5. Сделаем разные бэкграунды для области с инфо об авторе и области поста.

Для этого нужно добавить св-во background для .post_body { и .post_wrap {

 

Итог

CSS до

.post_wrap {
    top: 0px;
}

.post_body {
    margin: 0 10px 0 185px;
    padding-top: 15px;
}

CSS после

.post_wrap {
    top: 0px;
    margin-bottom: -10px;
    background: #FFFFE9;
}

.post_body {
    margin: 0 10px 0 185px;
    padding-top: 15px;
    border-left: 1px solid #D8DDE8;
    padding-left: 10px;
    background: #ffffff;
}