0 Members and 1 Guest are viewing this topic.

*

Diego Andrés

  • Webmaster
Poster al estilo SkinMod V3
August 06, 2013, 02:49:46 PM
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:
Code: [Select]
// Here comes the JavaScript bits!
echo '

Agregamos después:
Code: [Select]
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/dropdown.js"></script>
Display.template.php
Buscamos:
Code: [Select]
// 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:
Code: [Select]
// 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:
Code: [Select]
</h4>
<ul class="reset smalltext" id="msg_', $message['id'], '_extra_info">';

Reemplazamos con:
Code: [Select]
<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:
Code: [Select]
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:
Code: [Select]
// Done with the information about the poster... on to the post itself.
echo '
</ul>
</div>

Reemplazamos con:
Code: [Select]
// 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
Code: [Select]
.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

  • Newbie
Re:Poster al estilo SkinMod V3
December 04, 2013, 09:20:37 AM
Me gustaria ver alguna imagen de como queda...

Saludos.
*

Kove

  • Lurker
Re:Poster al estilo SkinMod V3
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...
Last Edit: January 05, 2014, 08:13:07 AM by Kove
*

EduardO

  • ST Lover
Re:Poster al estilo SkinMod V3
January 08, 2014, 03:12:41 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

  • Lurker
Re: Poster al estilo SkinMod V3
March 22, 2014, 11:34:57 PM
Diego Andres podrías poner una imagen de como queda?

¿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.



passionate-beautiful