Jump to content

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


Recommended Posts

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

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

post-10498-0-84068000-1393434680.png

Edited by FDGod
Link to comment
Share on other sites

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 это цифры (для новичков говорю :D).

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

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

Link to comment
Share on other sites

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

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

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

post-10498-0-51863200-1393507703_thumb.p

post-10498-0-82155300-1393507710_thumb.p

Edited by FDGod
Link to comment
Share on other sites

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

Возможно.

 

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

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

Link to comment
Share on other sites

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

Не можете искать, начинайте изучать 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;
Промежуточный итог

post-12624-0-45796600-1394177867_thumb.j

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

Добавляем

	padding-left: 10px;
Промежуточный итог

post-12624-0-25939000-1394178058_thumb.j

 

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

Находим 

	.post_wrap { top: 0px; }	
и добавляем 

margin-bottom: -10px;
Промежуточный итог

post-12624-0-28860200-1394178315_thumb.j

 

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

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

 

Итог

post-12624-0-26051400-1394178943_thumb.j

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

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

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...