Seleccionar idioma:
Realizar Donación - Mods Premium - Portfolio



Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.
* [Tutorial] Tema al azar en sidebar flotante adyacente al foro
  Leído 1179 veces
* Viendo el foro
 0 Usuarios y 1 Visitante están viendo este foro.


*
Dic 30 2013


Bueno, la idea es mostrar en un recuadro bastante visible un tema al azar, y poder seleccionar de qué foros lo toma.
Es pues, como para presentar contenidos "atemporales", tutoriales, fichas técnicas, documentación variada, etc... (pero bueno, uno lo usa como quiere y muestra lo que quiere)

Antes de continuar, un especial agradecimiento a lucas-ruroken que se armó de paciencia y logró unir todas las piezas para hacer que esto funcionase bien... ¡Gracias!


Para el recuadro se eligió stickyMojo con el poder de jQuery: http://mojotech.github.io/stickymojo/ (allí pueden verlo funcionar)
Descargamos la librería y la descomprimimos en algún lado http://mojotech.github.io/stickymojo/
Aunque también podría ser otra librería similar (queda en cada uno buscar y probar otras)

En principio es necesario usar ADK Portal (o no?)

Y ahora... comenzamos a tocar cosas

Buscamos en /Sources/Subs-adkblocks.php, le hacemos backup y lo editamos.
Buscamos function adk_carrousel() y antes agregamos lo siguiente:

Código: [Seleccionar]
function adk_temas_al_azar($array = '', $limit_body = '', $limit_query = '')
{

global $context, $scripturl, $txt, $settings, $smcFunc, $boardurl, $adkportal;
global $modSettings;

if(empty($array))
$array = explode(',',$adkportal['auto_news_id_boards']);
else
$array = explode(',',$array);

if(empty($limit_body))
$limit_body = $adkportal['auto_news_limit_body'];

if(empty($limit_query))
$limit_query = $adkportal['auto_news_limit_topics'];

$context['start'] = isset($_REQUEST['adk']) ? !empty($_REQUEST['start']) ? (int)$_REQUEST['start'] : 0 : 0;

$sql = $smcFunc['db_query']('','
SELECT COUNT(*) AS total
FROM {db_prefix}topics AS t
INNER JOIN {db_prefix}boards AS b ON (b.id_board = t.id_board)
WHERE '.(!empty($array) ? 'b.id_board IN ({array_int:boards}) AND' : '') .' {query_wanna_see_board}',
array(
'boards' => $array,
)
);

$row = $smcFunc['db_fetch_assoc']($sql);
$smcFunc['db_free_result']($sql);
   
$total = $row['total'];
// $context['page_index'] = constructPageIndex($scripturl . '?adk', $context['start'], $total, $limit_query);


$sql = $smcFunc['db_query']('','
SELECT m.id_topic, m.poster_time, m.id_member, m.poster_name,
m.subject, m.body, m.icon, mg.online_color, t.num_replies, t.num_views, mem.real_name, mem.avatar,
IFNULL(a.id_attach, 0) AS id_attach, a.filename, a.attachment_type
FROM {db_prefix}messages AS m
LEFT JOIN {db_prefix}members AS mem ON (mem.id_member = m.id_member)
LEFT JOIN {db_prefix}attachments AS a ON (a.id_member = mem.id_member)
LEFT JOIN {db_prefix}membergroups AS mg ON (mg.id_group = IF(mem.id_group = 0, mem.id_post_group, mem.id_group))
INNER JOIN {db_prefix}topics AS t ON (t.id_first_msg = m.id_msg)
INNER JOIN {db_prefix}boards AS b ON (b.id_board = m.id_board)
WHERE '.(!empty($array) ? 'b.id_board IN ({array_int:boards}) AND' : '') .' {query_wanna_see_board}
ORDER BY RAND() DESC LIMIT 1 ',
array(
'boards' => $array,
)
);


$img = 'plugin.png';

$topics = array();

while($row = $smcFunc['db_fetch_assoc']($sql))
{
if(!empty($row['id_member']))
// $member = '<a href="'.$scripturl.'?action=profile;u='.$row['id_member'].'" style="color: '.$row['online_color'].';">'.$row['real_name'].'</a>';
$member = $row['real_name'];
else
$member = $row['poster_name'];


$topics[] = array(
'v' => $row['num_views'],
'r' => $row['num_replies'],
'avatar' => $row['avatar'] == '' ? ($row['id_attach'] > 0 ? '<img width="60" height="60" src="' . (empty($row['attachment_type']) ? $scripturl . '?action=dlattach;attach=' . $row['id_attach'] . ';type=avatar' : $modSettings['custom_avatar_url'] . '/' . $row['filename']) . '" alt="" border="0" />' : '') : (stristr($row['avatar'], 'http://') ? '<img width="60" height="60" src="' . $row['avatar'] . '" alt="" border="0" />' : '<img width="60" height="60" src="' . $modSettings['avatar_url'] . '/' . $smcFunc['htmlspecialchars']($row['avatar']) . '" alt="" border="0" />'),
'id_topic' => $row['id_topic'],
'img' => '<img style="vertical-align: middle;" src="'.$settings['images_url'].'/post/'.$row['icon'].'.gif" alt="" />',
'href' => $row['subject'],
'time' => timeformat($row['poster_time']),
'member' => $member,
'body' => str_replace('<img ','<img style="max-width: 90px;" ',parse_bbc(substr($row['body'],0,$limit_body)))
);
}
//$averiguar = $avatar2,1,4);
$smcFunc['db_free_result']($sql);


foreach($topics AS $topic)
{
$title = '<a href="'.$scripturl.'?topic='.$topic['id_topic'].'.0" title="' . $txt['by'] . ' ' .$topic['member'] . ' - ' . $topic['time'] . '"><b>'.$topic['href'].'</b></a>';

$vamosss = '¿Ya leíste el tema '.$title.'?';

$vamosss .= '
<div class="adk_padding_8">
'.$topic['body'].'
</div>';

$vamosss .= '
<div class="smalltext" style="margin-bottom:10px; border-bottom: 1px solid #c5c5c5; border-right: 1px solid #c5c5c5; text-size:.6em;">
<a href="'.$scripturl.'?topic='.$topic['id_topic'].'.0" title="' . $txt['by'] . ' ' .$topic['member'] . ' - ' . $topic['time'] . '"><strong>Leerlo completo...</strong></a>
</div>';

return $vamosss;

}

}

(o sea... agregamos una función nueva, basada en la función adk_aportes_automaticos de adk)


Luego, tocamos lo necesario de estilos CSS... vamos a /themes/tutema/css/index.css y backup... luego editar

Antes de hacer cambios conviene entender, al menos un poco,  cómo funciona el posicionamiento del sidebar...
Esta librería necesita como mínimo estén definidas 3 cosas... el ancho del foro (en su propio div identificado), el ancho del sidebar + floatleft (o right), y el ancho de la "supercontenedora", que en principio sería el ancho del foro+sidebar (aunque también tienen que sumar padding, margin y esas cosas si lo tienen... de última empiezan con eso y van aumentando).
También se le puede especificar el footer... ya lo veremos


En nuestro caso el ancho del foro está dado por #wrapper, 950px

Código: [Seleccionar]
#wrapper
{
width: 950px;
float: left;
box-shadow: -4px 5px 11px rgba(0, 0, 0, 0.41);
}


Luego tenemos el div del tema al azar, algo como:
Código: [Seleccionar]
#alazar {
  width: 150px;
  background-color: #ccc;
  min-height: 200px;
  margin: 150px 0 15px 0; /*controls the cutoff of the top and bottom limitations*/
  padding: 15px 10px;
  float: left; /* float right for a right aligned sidebar */
  box-shadow: -3px 2px 8px rgba(0, 0, 0, 0.61);
  font-size:1em;
}

Lo adaptan según lo necesiten (ancho, color de fondo, tamaño fuente, etc)


Y finalmente la "supercontenedora"... algo como:

Código: [Seleccionar]
#superwrapper {
  width: 1220px; /* MUST HAVE WIDTH SET, should be the sidebar width + main width */
  margin-left: auto;
  margin-right: auto;
}


Ahora... los cambios en el index.template.php (hacer backup antes)

La parte más complicada de todo es localizar "tu" wrapper del foro... donde comienza y donde termina... porque ese dato lo necesitás a la hora de agregar la supercontenedora... y entre medio el bloque del tema al azar (pero eso es más simple, por lo general)
¿Cómo hacerlo? hay que analizar... yo grabé una página del foro y lo abrí con un editor de textos que permite "achicar grupos indentados"... entonces así achiqué "mi" wrapper del foro y "vi" qué aparecía abajo... busqué en el index.template.php "eso" y le agregué un texto abcdefg, lo grabo, subo, actualizo y descargo esa página con el navegador... la abro en el editor de textos, achico el "grupo wrapper" y... tiene que verse el abcdefg!
Si se ve, entonces ya sabemos donde termina, allí agregamos el cierre de la super contenedora </div>
Vamos arriba y antes del <div id="wrapper">... agregamos un <div id="superwrapper">

Listo, ya tenemos colocada la super contenedora

Ahora "entre medio" de la apertura la supercontenedora y la contenedora del foro agregaremos la sección del tema al azar (si lo pensamos un poco, es como si esa fuera una columna izquierda, si usaste float:left, y el foro una columna derecha... apoyada en la primera)

Debería quedar algo así:
Código: [Seleccionar]
      <div id="superwrapper">
  <div id="alazar">
' . adk_temas_al_azar("1,2,15,20,33,55", "250", 1) . '
  </div>
<div id="wrapper">

Entonces, los primeros números separados por coma son los ID de foros de donde se saca el tema al azar (fijarse qué foros necesita cada uno y ponerlos), 250 es la cantidad de caracteres a mostrar del contenido del tema.


Todavía falta algo, el llamado a jquery, el llamado a la librería de stickymojo y su activación...

Si tu foro usa jquery (por algún mod, o cuestiones de diseño)... es probable que lo tengas en algún lado del index.template.php
Buscá la línea donde se lo llama, algo tipo:
Código: [Seleccionar]
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>(buscá jquery y fijate que aparece)

Abajo de esa línea agregá algo como:
Código: [Seleccionar]
<script type="text/javascript" src="', $settings['default_theme_url'], '/stickyMojo.js"></script>
Subí el archivo stickyMojo.js en la raíz del tema default (/Themes/default/)

Luego fijate si tenés alguna sección en el encabezado donde tengas códigos javascript... y allí agregale algo como:

Código: [Seleccionar]
  jQuery(document).ready(function($){
jQuery.noConflict();
    $("#alazar").stickyMojo({footerID: "#footer", contentID: "#wrapper"});
  });

o agregalo como un bloque javascript aparte:

Código: [Seleccionar]
<script type="text/javascript"><!-- // --><![CDATA[
jQuery.noConflict();
  jQuery(document).ready(function($){
    $("#alazar").stickyMojo({footerID: "#footer", contentID: "#wrapper"});
  });
// ]]></script>';

Y listo... ya deberías tener andando la zona de tema al azar... que se vería algo así como esto:

*




Y bueno... la verdad que visto así parece un lío tremendo, ¿no?...
Pero ¡paso a paso se logra!

Ojalá le sirva a alguien!



Y bueno, le faltan pulir cositas... si usan el SAVE y aparece un enlace de video... se los muestra! tapando el contenido del foro, etc...
O si se corta el código de un IMG queda el texto medio loco... y cosas así....
O si alguno usa un tamaño de fuente 64 queda gigante, y si usan colores lo mismo, etc...

2.0.12

Mensajes: 1070

Ver Perfil  Email 

« Última Modificación: Diciembre 30, 2013, 06:40:55 pm por luuuciano »
En línea

*
Ene 02 2014


Muy buen aporte!!  +10

*¤×•·:.·.:·•×¤* ^HeRaCLeS^ *¤×•·:.·.:·•×¤*
*¤×• Todos los Mp seran ignorados | Solo seran considerados los Mp Solicitados por mi •×¤*
*¤×• All Mp will be ignored | Only considers the Mp requested per my •×¤*

SMFPersonal

Adk Portal 3.0.2
2.0.14
www.smfpersonal.net
#1

Mensajes: 13978

Ver Perfil  SMFPersonal 

En línea

*
Ene 11 2014


Excelente tutorial!

ADK Portal 3.0.2
2.0.11
www.smfpersonal.net
#2

Mensajes: 1726

Ver Perfil  SMFPersonal 

En línea




Otros temas de su interes




Usuario:
Contraseña:
Sesión:
hermes bracelet replica, christian louboutin replica, van cleef and arpels replica, red bottoms replica, cartier love bracelet replica christian louboutin replica, christian louboutin replica, hermes bracelet replica,