HOME FORUM DOWNLOADS THEMES TUTORIALS PRIVATE SUPPORT

Show Posts

This section allows you to view all posts made by this member. Note that you can only see posts made in areas you currently have access to.


Messages - iFreshi

Pages: [1]
1
Tutoriales y Tips SMF / Celdas estilo StickMan
« on: March 02, 2014 - 03:46 15:46 »
Hola amigos, hoy les traigo un buen estilo de celdas algo diferente.

vamos a: Diplay.template.php

Buscamos:
Code: [Select]
// Show information about the poster of this message.
echo '
<div class="poster">
<h4>';
Remplazamos por:
Code: [Select]
// Show information about the poster of this message.
echo '
<div class="poster">
<div class="celdasSM">
<h4>';
Buscamos:
Code: [Select]
// 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'], '
</h4>
<ul class="reset smalltext" id="msg_', $message['id'], '_extra_info">';
Remplazamos por:
Code: [Select]
// Show a link to the member's profile.
echo '
', $message['member']['link'], '
</h4>
<ul class="reset smalltext" id="msg_', $message['id'], '_extra_info">';

// 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>' : '';

Buscamos:
Code: [Select]
// Show the member's custom title, if they have one.
if (!empty($message['member']['title']))
echo '
<li class="title">', $message['member']['title'], '</li>';

// Show the member's primary group (like 'Administrator') if they have one.
if (!empty($message['member']['group']))
echo '
<li class="membergroup">', $message['member']['group'], '</li>';

// Don't show these things for guests.
if (!$message['member']['is_guest'])
{
// Show the post group if and only if they have no other group or the option is on, and they are in a post group.
if ((empty($settings['hide_post_group']) || $message['member']['group'] == '') && $message['member']['post_group'] != '')
echo '
<li class="postgroup">', $message['member']['post_group'], '</li>';
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>';

// Show how many posts they have made.
if (!isset($context['disabled_fields']['posts']))
echo '
<li class="postcount">', $txt['member_postcount'], ': ', $message['member']['posts'], '</li>';
Remplazamos por:
Code: [Select]
// Show the member's custom title, if they have one.
if (!empty($message['member']['title']))
echo '
<hr class="style-one"><li class="title">', $message['member']['title'], '</li>';

// Show the member's primary group (like 'Administrator') if they have one.
if (!empty($message['member']['group']))
echo '
<hr class="style-one"><li class="membergroup">', $message['member']['group'], '</li>';

// Don't show these things for guests.
if (!$message['member']['is_guest'])
{
// Show the post group if and only if they have no other group or the option is on, and they are in a post group.
if ((empty($settings['hide_post_group']) || $message['member']['group'] == '') && $message['member']['post_group'] != '')
echo '
<hr class="style-one"><li class="postgroup">', $message['member']['post_group'], '</li>';
echo '
<hr class="style-one"><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 '
<hr class="style-one"><li class="avatar">
<a href="', $scripturl, '?action=profile;u=', $message['member']['id'], '">
', $message['member']['avatar']['image'], '
</a>
</li>';

// Show how many posts they have made.
if (!isset($context['disabled_fields']['posts']))
echo '
<hr class="style-one"><li class="postcount"><img src="http://img62.imageshack.us/img62/7003/postqy.gif" alt="Post" title="Post" /> ', $txt['member_postcount'], ': ', $message['member']['posts'], '</li>';
Bucamos:
Code: [Select]
// Show the member's gender icon?
if (!empty($settings['show_gender']) && $message['member']['gender']['image'] != '' && !isset($context['disabled_fields']['gender']))
echo '
<li class="gender">', $txt['gender'], ': ', $message['member']['gender']['image'], '</li>';

// Show their personal text?
if (!empty($settings['show_blurb']) && $message['member']['blurb'] != '')
echo '
<li class="blurb">', $message['member']['blurb'], '</li>';

// Any custom fields to show as icons?
if (!empty($message['member']['custom_fields']))
{
$shown = false;
foreach ($message['member']['custom_fields'] as $custom)
{
if ($custom['placement'] != 1 || empty($custom['value']))
continue;
if (empty($shown))
{
$shown = true;
echo '
<li class="im_icons">
<ul>';
}
echo '
<li>', $custom['value'], '</li>';
}
if ($shown)
echo '
</ul>
</li>';
}

// This shows the popular messaging icons.
if ($message['member']['has_messenger'] && $message['member']['can_view_profile'])
echo '
<li class="im_icons">
<ul>
', !empty($message['member']['icq']['link']) ? '<li>' . $message['member']['icq']['link'] . '</li>' : '', '
', !empty($message['member']['msn']['link']) ? '<li>' . $message['member']['msn']['link'] . '</li>' : '', '
', !empty($message['member']['aim']['link']) ? '<li>' . $message['member']['aim']['link'] . '</li>' : '', '
', !empty($message['member']['yim']['link']) ? '<li>' . $message['member']['yim']['link'] . '</li>' : '', '
</ul>
</li>';
Remplazamos por:
Code: [Select]
// Show the member's gender icon?
if (!empty($settings['show_gender']) && $message['member']['gender']['image'] != '' && !isset($context['disabled_fields']['gender']))
echo '
<hr class="style-one"><li class="gender">', $txt['gender'], ': ', $message['member']['gender']['image'], '</li>';

// Show their personal text?
if (!empty($settings['show_blurb']) && $message['member']['blurb'] != '')
echo '
<hr class="style-one"><li class="blurb">', $message['member']['blurb'], '</li>';

// Any custom fields to show as icons?
if (!empty($message['member']['custom_fields']))
{
$shown = false;
foreach ($message['member']['custom_fields'] as $custom)
{
if ($custom['placement'] != 1 || empty($custom['value']))
continue;
if (empty($shown))
{
$shown = true;
echo '
<hr class="style-one"><li class="im_icons">
<ul>';
}
echo '
<li>', $custom['value'], '</li>';
}
if ($shown)
echo '
</ul>
</li>';
}

// This shows the popular messaging icons.
if ($message['member']['has_messenger'] && $message['member']['can_view_profile'])
echo '
<hr class="style-one"><li class="im_icons">
<ul>
', !empty($message['member']['icq']['link']) ? '<li>' . $message['member']['icq']['link'] . '</li>' : '', '
', !empty($message['member']['msn']['link']) ? '<li>' . $message['member']['msn']['link'] . '</li>' : '', '
', !empty($message['member']['aim']['link']) ? '<li>' . $message['member']['aim']['link'] . '</li>' : '', '
', !empty($message['member']['yim']['link']) ? '<li>' . $message['member']['yim']['link'] . '</li>' : '', '
</ul>
</li>';
Buscamos:
Code: [Select]
// Done with the information about the poster... on to the post itself.
echo '
</ul>
</div>
Remplazamos por:
Code: [Select]
// Done with the information about the poster... on to the post itself.
echo '
</ul></div>
</div>
vamos a: index.css

Agregamos al final:
Code: [Select]
.celdasSM
{
padding: 0 10px;
margin-top: -3px;
text-align: center;
background: #ECECED;
margin-left: 3px;
border: 1px solid #dadada;
-moz-border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-webkit-border-radius: 4px;
}
.celdasSM dl, .celdasSM dt, .celdasSM p
{
margin: 0;
}
.celdasSM p
{
padding: 0.5em;
}
hr.style-one
{
border: 0;
height: 1px;
background: #333;
background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
background-image:   -ms-linear-gradient(left, #ccc, #333, #ccc);
background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
}
Resulado final



Créditos: Dharius de Km

¡Salu2!

2
Tutoriales y Tips SMF / Login pop-up
« on: February 23, 2014 - 09:39 09:39 »
Hola amig@s, hoy les traigo un buen tip de como hace que nuestro login aparezca en un Pop-up con solo sin utilizar ningún tipo de script bien empezamos.
vamos a: index.template.php
Buscamos:
Code: [Select]
// Otherwise they're a guest - this time ask them to either register or login - lazy bums...
elseif (!empty($context['show_login_bar']))
{
echo '
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/sha1.js"></script>
<form id="guest_form" action="', $scripturl, '?action=login2" method="post" accept-charset="', $context['character_set'], '" ', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' . $context['session_id'] . '\');"' : '', '>
<div class="info">', sprintf($txt['welcome_guest'], $txt['guest_title']), '</div>
<input type="text" name="user" size="10" class="input_text" />
<input type="password" name="passwrd" size="10" class="input_password" />
<select name="cookielength">
<option value="60">', $txt['one_hour'], '</option>
<option value="1440">', $txt['one_day'], '</option>
<option value="10080">', $txt['one_week'], '</option>
<option value="43200">', $txt['one_month'], '</option>
<option value="-1" selected="selected">', $txt['forever'], '</option>
</select>
<input type="submit" value="', $txt['login'], '" class="button_submit" /><br />
<div class="info">', $txt['quick_login_dec'], '</div>';

if (!empty($modSettings['enableOpenID']))
echo '
<br /><input type="text" name="openid_identifier" id="openid_url" size="25" class="input_text openid_login" />';

echo '
<input type="hidden" name="hash_passwrd" value="" />
</form>';
}

echo '
Remplazamos por:
Code: [Select]
// Otherwise they're a guest - this time ask them to either register or login - lazy bums...
elseif (!empty($context['show_login_bar']))
{
echo '
            <div class="panel">
                <a href="#login_form" id="login_pop">Ingresa</a>
               <a href="', $scripturl . '?action=register" id="join_pop">Registrate</a>
            </div>';
   
echo'
        <!-- popup form #1 -->
        <a href="#x" class="overlay" id="login_form" action="', $scripturl, '?action=login2" method="post" accept-charset="', $context['character_set'], '" ', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' . $context['session_id'] . '\');"' : '', '></a>
        <div class="popup">
<h2>Bienvenido!</h2>
            <p>Por favor, ingrese su nombre de usuario y contrase&ntilde;a</p>
                        <form id="login_form" action="', $scripturl, '?action=login2" method="post" accept-charset="', $context['character_set'], '" ', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' . $context['session_id'] . '\');"' : '', '>
                            <div>
<label for="login">Usuario</label>
<input type="text" name="user" size="10" class="input_text" />
</div>
<div>
                            <label for="password">Contrase&ntilde;a</label>
                            <input type="password" name="passwrd" size="10" class="input_password" />
</div>
                            <input type="submit" name="submit" value="Entrar" />
                        </form>
            <a class="close" href="#close"></a>
        </div>';
}

echo '
vamos a: index.css
Buscamos:
Code: [Select]
div#upper_section div.user
{
width: 50%;
float: left;
overflow: auto;
}
Remplazamos por:
Code: [Select]
div#upper_section div.user
{
width: 50%;
float: left;
overflow: auto;
height: 100px;
}
Agregamos al final
Code: [Select]
.panel {
    background-color: none;
    height: 34px;
width: 100px;
    padding: 5px;
}
.panel a#login_pop, .panel a#join_pop
{
outline: 0;
padding: 5px;
display: block;
color: #9fa8b0;
margin-right: 10px;
text-decoration: none;
font-weight: bold;
text-shadow: 1px 1px #1f272b;
border: 1px solid #1c252b;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: #232B30; /* old browsers */
background: -moz-linear-gradient(top, #3D4850 3%, #313d45 4%, #232B30 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#3D4850), color-stop(4%,#313d45), color-stop(100%,#232B30)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3D4850', endColorstr='#232B30',GradientType=0 ); /* ie */
box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* CSS3 */
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Firefox */
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Safari, Chrome */
}
a#login_pop:hover, a#join_pop:hover
{
    color: #fff;
background: #4C5A64; /* old browsers */
background: -moz-linear-gradient(top, #4C5A64 3%, #404F5A 4%, #2E3940 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#4C5A64), color-stop(4%,#404F5A), color-stop(100%,#2E3940)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4C5A64', endColorstr='#2E3940',GradientType=0 ); /* ie */
}
a#login_pop:active, a#join_pop:active
{
background-position: 0 top;
position: relative;
top: 1px;
color: #fff;
padding: 6px 12px 4px;
background: #20282D; /* old browsers */
background: -moz-linear-gradient(top, #20282D 3%, #252E34 51%, #222A30 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#20282D), color-stop(51%,#252E34), color-stop(100%,#222A30)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#20282D', endColorstr='#222A30',GradientType=0 ); /* ie */
-moz-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Firefox */
-webkit-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Safari, Chrome */
box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* CSS3 */
}
.overlay {
    background-color: rgba(0, 0, 0, 0.6);
    bottom: 0;
    cursor: default;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    visibility: hidden;
    z-index: 1;

    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -ms-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
}
.overlay:target {
    visibility: visible;
    opacity: 1;
}
.popup {
    background-color: #fff;
    border: 3px solid #fff;
    display: inline-block;
    left: 50%;
    opacity: 0;
    padding: 15px;
    position: fixed;
    text-align: justify;
    top: 40%;
    visibility: hidden;
    z-index: 10;

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;

    -webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;

    -webkit-transition: opacity .5s, top .5s;
    -moz-transition: opacity .5s, top .5s;
    -ms-transition: opacity .5s, top .5s;
    -o-transition: opacity .5s, top .5s;
    transition: opacity .5s, top .5s;
}
.overlay:target .popup {
    top: 50%;
    opacity: 1;
    visibility: visible;
}
.close {
    background-color: rgba(0, 0, 0, 0.8);
    height: 30px;
    line-height: 30px;
    position: absolute;
    right: 0;
    text-align: center;
    text-decoration: none;
    top: -15px;
    width: 30px;

    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
}
.close:before {
    color: rgba(255, 255, 255, 0.9);
    content: "X";
    font-size: 24px;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
.close:hover {
    background-color: rgba(64, 128, 128, 0.8);
}
.popup p, .popup div {
    margin-bottom: 10px;
}
.popup label {
    display: inline-block;
    text-align: left;
    width: 120px;
}
.popup input[type="text"], .popup input[type="password"] {
    border: 1px solid;
    border-color: #999 #ccc #ccc;
    margin: 0;
    padding: 2px;

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
}
.popup input[type="text"]:hover, .popup input[type="password"]:hover {
    border-color: #555 #888 #888;
}
Resultado Final.
Show content


Créditos & Fuente: Dharius de km.

¡Salu2!

Pages: [1]
top

Smfsimple.com es un sitio destinado a brindar un servicio de soporte y herramientas para foros realizados con el sistema de foros gratuito simplemachines.org. Contamos con un selecto equipo de desarrolladores y conocedores del sistema, sus foros estaran en buenas manos.
This site is not affiliated with or endorsed by Simple Machines