Poster al estilo SkinMod V3

Started by Diego Andrés, August 06, 2013, 02:49:46 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Diego Andrés

Pues ya llevaba tiempo que pidieron algo así, obviamente no lo podemos hacer exactamente igual, pero les dejo aquí un tutorial de cómo tenerlo parecido.


Index.template.php
Buscamos:
// Here comes the JavaScript bits!
echo '


Agregamos después:
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/dropdown.js"></script>


Display.template.php
Buscamos:
// Show information about the poster of this message.
echo '
<div class="poster">
<h4>';

// Show online and offline buttons?
if (!empty($modSettings['onlineEnable']) && !$message['member']['is_guest'])
echo '
', $context['can_send_pm'] ? '<a href="' . $message['member']['online']['href'] . '" title="' . $message['member']['online']['label'] . '">' : '', '<img src="', $message['member']['online']['image_href'], '" alt="', $message['member']['online']['text'], '" />', $context['can_send_pm'] ? '</a>' : '';

// Show a link to the member's profile.
echo '
', $message['member']['link'], '


Reemplazamos con:
// Show information about the poster of this message.
echo '
<div class="user_display_sm">';

// Show online and offline buttons?
if (!$message['member']['is_guest'])
{
echo '
<div class="online_bottom">';
echo '
', $context['can_send_pm'] ? '<a href="' . $message['member']['online']['href'] . '" title="' . $message['member']['online']['label'] . '">' : '', '<img src="', $message['member']['online']['image_href'], '" alt="', $message['member']['online']['text'], '" />', $context['can_send_pm'] ? '</a>' : '';
echo '
</div>';
}

// Show avatars, images, etc.?
if (!empty($settings['show_user_images']) && empty($options['show_no_avatars']) && !empty($message['member']['avatar']['image']) && !$message['member']['is_guest'])
echo '
<div class="avatar">
<a href="', $scripturl, '?action=profile;u=', $message['member']['id'], '">
', $message['member']['avatar']['image'], '
</a>
</div>';

echo '
<div class="member_link_sm">';

// Show a link to the member's profile.
echo '
', $message['member']['link'], '


Buscamos:
</h4>
<ul class="reset smalltext" id="msg_', $message['id'], '_extra_info">';


Reemplazamos con:
<div class="pop_toggle" onclick="return overlay(this, \'quicklinks_', $message['id'], '\',\'bottomright\')"></div></div>';

echo '
<div class="pop_menu" id="quicklinks_', $message['id'], '" style="display: none;">
<ul class="reset smalltext" id="msg_', $message['id'], '_extra_info">';


Buscamos y eliminamos:
echo '
<li class="stars">', $message['member']['group_stars'], '</li>';

// Show avatars, images, etc.?
if (!empty($settings['show_user_images']) && empty($options['show_no_avatars']) && !empty($message['member']['avatar']['image']))
echo '
<li class="avatar">
<a href="', $scripturl, '?action=profile;u=', $message['member']['id'], '">
', $message['member']['avatar']['image'], '
</a>
</li>';


Buscamos:
// Done with the information about the poster... on to the post itself.
echo '
</ul>
</div>


Reemplazamos con:
// Done with the information about the poster... on to the post itself.
echo '
</ul>
</div>';

// Show the Stars
if (!$message['member']['is_guest'])
echo '
<div class="sm_stars">', $message['member']['group_stars'], '</div>';
echo '
</div>



Index.css
Agregamos al final del archivo
.user_display_sm {
  float: left;
  text-align: center;
  font-weight: bold;
  padding: 0;
  width: 170px;
  margin-left: 15px;
}
.pop_toggle {
    background-image: url(../images/theme/arrow-down.png);
    background-repeat: no-repeat;
    background-position: center center;
    width: 20px;
    height: 17px;
    overflow: hidden;
    cursor: pointer;
float: right;
}
.pop_menu {
  background-color: #F2F2F2;
  box-shadow: 1px 1px 5px #888;
  color: #828282;
  position: absolute;
  padding: 5px 0 5px 26px;
  width: 25em;
  left: 280px;
}
.pop_menu ul li
{
float: left;
}
.pop_menu div.avatar {
float: left;
min-height: 140px;
margin: 3px 15px 0 0;
}
.pop_menu .active .pop_toggle {
  position: relative;

.pop_menu ul li {
text-align: left;
float: left;
width: 100%;
display: inline;
}
.pop_menu ul li ul
{
margin-left: -35px;
}
.user_display_sm .pop_menu ul li.profile ul li, .user_display_sm .pop_menu ul li.im_icons ul li {
float: left;
width: 25px;
}
.user_display_sm div.avatar {
background: #fff;
border: 5px solid #dcdcdc;
  box-shadow: -1px 0 0 #E6E6E8, 1px 0 0 #E6E6E8, 0 1px 0 #B4B4BB, 0 2px 0 #E6E6E8;
}
.sm_stars {
text-align: center;
}  
.member_ava_img {
padding-top: 30px;
  text-align: center;

.member_link_sm {
line-height: 20px;
padding: 5px 5px 5px 30px;
}
.member_link_sm div.member_skm {
display: inline;
padding-top: 2px;
}
.member_link_sm .pop_toggle {
border: 1px solid #f2f2f2;
}
.member_link_sm .pop_toggle:hover {
background-color: #fff;
border-radius: 3px;
border: 1px solid #dcdcdc;
}
.online_bottom img {
background: none;
border: none;
box-shadow: none;
padding: 0 10px;
}
.online_bottom {
background: url(../images/theme/online_bottom.png) no-repeat left center;
margin: 0 15px 10px;
}



Agregamos las imágenes adjuntas a Themes/nuestrotheme/images/theme/
Subimos el archivo llamado dropdown.js a la carpeta Themes/nuestrotheme/scripts/

Saludos
Last Edit: August 20, 2019, 09:21:28 PM by Diego Andrés

Aboul

Me gustaria ver alguna imagen de como queda...

Saludos.

Kove

¿Qué hago?, creo que el css no me da.

http://i.imgur.com/rmjwUVM.png

Una vez me paso eso, no me acuerdo como fue la solución...
Last Edit: January 05, 2014, 08:13:07 AM by Kove

EduardO

Quote from: Kove on January 05, 2014, 08:09:11 AM
¿Qué hago?, creo que el css no me da.

http://i.imgur.com/rmjwUVM.png

Una vez me paso eso, no me acuerdo como fue la solución...

No entiendo que error te da, si todo esta bien configurado

PD: Deberías de adjuntar los archivos sin EDITAR para ver si hiciste bien la modificacion.

Asegurante de haber instalado los archivos de TU THEME.
EduardO
AZORAHAI
NerO
EDesign

ramgo

Diego Andres podrías poner una imagen de como queda?

Quote from: Kove on January 05, 2014, 08:09:11 AM
¿Qué hago?, creo que el css no me da.

http://i.imgur.com/rmjwUVM.png

Una vez me paso eso, no me acuerdo como fue la solución...

Borra cache de tu navegador preferiblemente google chrome para que se actualize bien ya que en mozilla firefox da algunos problemas el cache.