Mod.Plantilla Añadir iconos a los foros

ManuTdi · 30 Diciembre 2011

AppleTree dijo:
Retomo el tema por una cuestion... a ver, he modificado todo y puestos todos los iconos en los diferentes foros, pero luego hay muchos subforos en los que me aparece un cuadro vacío por no tener icono, pero es q son muchísimos subforos y aquí no querría ponerle icono... se puede soclucionar de alguna forma? o tengo que subir un ico transparente (como por ejemplo el de ManuTDi) por cada subforo?... esto último sería de locos!!!...uf!

No se si editando alguna plantilla puedes suprimir eso, pero si no quieres icono lo mas fácil es ponerlos transparentes o uno igual para el resto de nodos que identifique tu web.

lms · 30 Diciembre 2011

En este momento no tengo "herramientas" para poder mirártelo adecuadamente (en mi curro voy muy limitado para ello) pero supongo que se podrá hacer solo con css.

Si es este año será el que viene.

Creo que tampoco es un trabajo excesivo el colocar en una carpeta un mismo icono renombrando el número pero también es verdad que si puede existir una mejor forma de hacerlo, la hagamos.

Salud2

AppleTree · 30 Diciembre 2011

lms dijo:
En este momento no tengo "herramientas" para poder mirártelo adecuadamente (en mi curro voy muy limitado para ello) pero supongo que se podrá hacer solo con css.

Si es este año será el que viene.

Creo que tampoco es un trabajo excesivo el colocar en una carpeta un mismo icono renombrando el número pero también es verdad que si puede existir una mejor forma de hacerlo, la hagamos.

Salud2

No me cuesta trabajo hacerlo... pero como bien dices el camino corto es mejor!!!, no obstante son muuuuuuuuchos nodos los q yo creo.

lms · 31 Diciembre 2011

En la plantilla node_category_level_1, busca <div class="nodeInfo categoryNodeInfo categoryStrip"> y añade justo debajo:

PHP:

<xen:set var="$imageNodelms">./styles/default/xenforo/IconThreads/{$category.node_id}.png</xen:set>
<xen:if is="!in_array({$forum.node_id}, array(107,33))">
<span class="lms_container2_node_icons"><img src="{$imageNodelms}"></span></xen:if>

En la plantilla node_category_level_2 busca <li class="node category_forum level_{$level} node_{$category.node_id}"> y pon justo debajo:

PHP:

<xen:set var="$imageNodelms">./styles/default/xenforo/IconThreads/{$category.node_id}.png</xen:set>
<xen:if is="!in_array({$forum.node_id}, array(107,33))">
<span class="lms_container_node_icons"><span class="lms_node_icons"><img src="{$imageNodelms}"></span></span></xen:if>

En la plantilla node_category_level_n busca <div {xen:if $category.hasNew, 'class="unread"'}> y sustituye la linea siguiente por

PHP:

        <h4 class="nodeTitle"><a href="{xen:link categories, $category}" class="menuRow"><xen:if is="!in_array({$forum.node_id}, array(107,33))"><img src="./default/xenforo/IconThreads/{$category.node_id}.png" />{$category.title}<xen:else />{$category.title}</xen:if></a></h4>

En la plantilla node_forum_level_2 busca
<li class="node forum level_{$level} {xen:if '{$level} == 1 AND !{$renderedChildren}', 'groupNoChildren'} node_{$forum.node_id}">
y pon justo debajo:

PHP:

<xen:set var="$imageNodelms">./styles/default/xenforo/IconThreads/{$forum.node_id}.png</xen:set>
<xen:if is="!in_array({$forum.node_id}, array(107,33))">
<span class="lms_container_node_icons"><span class="lms_node_icons"><img src="{$imageNodelms}"></span></span></xen:if>

Y en la plantilla forum_level_n busca <div {xen:if $forum.hasNew, 'class="unread"'}>
y sustituye la linea siguiente por

PHP:

        <h4 class="nodeTitle"><a href="{xen:link forums, $forum}" class="menuRow"><xen:if is="!in_array({$forum.node_id}, array(107,33))"><img  src="./default/xenforo/IconThreads/{$forum.node_id}.png" style="width:54px;height:30px" alt=""  />{$forum.title}<xen:else />{$forum.title}</xen:if></a></h4>

Edita la plantilla EXTRA.css y añade al final:

PHP:

/* <--- lms_node_icons.css ---> */


.node .nodeIcon
{
    display: none !important;    
}

    .node .forumNodeInfo .nodeIcon,
    .node .categoryForumNodeInfo .nodeIcon
    {
        display: none !important;
    }

    .node .forumNodeInfo.unread .nodeIcon,
    .node .categoryForumNodeInfo.unread .nodeIcon
    {
        display: none !important;
    }

    .node .pageNodeInfo .nodeIcon
    {
        display: none !important;
    }

    .node .linkNodeInfo .nodeIcon
    {
        display: none !important;
    }

.node .nodeIconlmschild
{
    @property "nodeIconlmschild";
    background: transparent none no-repeat center center;
    margin: 10px 10px 10px 10px;
    float: left;
    width: 12px;
    height: 12px;
    vertical-align: middle;
    @property "/nodeIconlmschild";    
}
.node .nodeIconlmsnode
{
    @property "nodeIconlmsnode";
    background: transparent none no-repeat center center;
    margin: 0px 15px 8px 1px;
    float: left;
    width: 36px;
    height: 36px;
    align: center;
    @property "/nodeIconlmsnode";
}
.node .nodeIconlmsforum
{
    @property "nodeIconlmsforum";
    background: transparent none no-repeat center center;
    margin: -5px 40px 30px -8px;
    float: left;
    width: 12px;
    height: 12px;
    vertical-align: middle;
    @property "/nodeIconlmsforum";

}

.lms_node_icons {
position:absolute;
left:-5px;
}

.lms_container_node_icons {
position:relative;
display:block;
float:left;
background: transparent center center;
margin: 5px 20px 30px 0px;
z-index:1;
}

.lms_container2_node_icons {
position:relative;
display:block;
float:right;
margin: -5px -20px -10px 20px;
z-index:1;
}

.lms_node_portal_icons_container {
position:relative;
display: block;
float:left;
margin: 10px;
margin-left: -17px;
widht: 50px;
z-index:1;
}
/* <--- FIN de lms_node_icons.css ---> */

Los iconos es recomendable que sean de 36x36px para categorías y foros sin otras categorías o foros debajo y de 12x12 para el resto.
He subido los iconos a la ruta ./styles/default/xenforo/IconThreads/ y para poder poner un icono a un foro o categoría, debes llamar al archivo por el ID de foro o categoría que corresponda con la extensión .png
Si no quieres un foro o categoría con icono, simplemente no subas ningún archivo que coincida en su nombre con el ID de foro o categoría o, en los que no quieres que aparezca, pones en la expresión array(107,33) los ID de los foros que quieres que no aparezcan y te quedará algo así <xen:if is="!in_array({$forum.node_id}, array(107,33,55,83,27,ID de los foros que quieres que no aparezcan))">. Es algo latoso pero puesto para uno la condicional con los id de foros, la tienes para todos los demás.

Demo: Aquí, en xenfacil.com

Salud2

AppleTree · 1 Enero 2012

Muchísimas gracias Luis... eres un MAESTRO. Gracias por compartir tus conocimientos con los que estamos empezando.
Abrazos desde el Sur y FELIZ AÑO!!

lms · 1 Enero 2012

Igualmente, Feliz Año.

Salud2

AppleTree · 1 Enero 2012

Buenos días!!!
Tras modificar las plantillas tal cómo indicabas, he tenido que rehacer todo y eliminar los cambios ya que todo el foro salía desconfigurado

lms · 1 Enero 2012

Los cambios son primos de los del primer mensaje. En todo caso se trata del css que te lo desconfigura. En particular:

PHP:

.node .nodeIcon
{
    display: none !important;   
}
 
    .node .forumNodeInfo .nodeIcon,
    .node .categoryForumNodeInfo .nodeIcon
    {
        display: none !important;
    }
 
    .node .forumNodeInfo.unread .nodeIcon,
    .node .categoryForumNodeInfo.unread .nodeIcon
    {
        display: none !important;
    }
 
    .node .pageNodeInfo .nodeIcon
    {
        display: none !important;
    }
 
    .node .linkNodeInfo .nodeIcon
    {
        display: none !important;
    }

Saud2

AppleTree · 1 Enero 2012

Entonces?

lms · 1 Enero 2012

>No lo pongas si te lo desconfigura.

Salud2

AppleTree · 1 Enero 2012

lms dijo:
>No lo pongas si te lo desconfigura.

Salud2

Ok, lo que haré será crear un png transparente por cada nodo y ya está.

lms · 1 Enero 2012

Si miras en el estilo xenfacil de este foro verás que funciona perfectamente todo lo que te he puesto.

¿Por qué no te rula en el tuyo y te lo desconfigura? ¿El estilo? No o sé pero aquí funciona perfectamente.

Salud2

AppleTree · 1 Enero 2012

lms dijo:
Si miras en el estilo xenfacil de este foro verás que funciona perfectamente todo lo que te he puesto.

¿Por qué no te rula en el tuyo y te lo desconfigura? ¿El estilo? No o sé pero aquí funciona perfectamente.

Salud2

Lo mismo he hecho algo mal... lo intentaré nuevamente a ver.

lms · 1 Enero 2012

AppleTree dijo:
Lo mismo he hecho algo mal... lo intentaré nuevamente a ver.

Espero resultados

Salud2

AppleTree · 5 Enero 2012

Lo ntengo pendiente Luis!!!! En cuanto saque un huequecillo, después de Reyes... jejejeje

gimomo · 3 Mayo 2012

lms dijo:
Espero resultados

Salud2

las disculpas por abrir el tema un poco antiguo, pero logre poner lo iconos y a la primera cosa que me deja contento

pero mi duda es como sacar los iconos por defecto?

lms · 3 Mayo 2012

Rich (BB code):

.node .forumNodeInfo .nodeIcon, .node .categoryForumNodeInfo .nodeIcon {background:none !important;}
.node .linkNodeInfo .nodeIcon {background:none !important}
.node .nodeText {
    margin-bottom: 10px;
    margin-left: 15px;
    margin-right: 270px;
    margin-top: 10px;
}

En teoría con esto puesto en la plantilla EXTRA.css te debieran de desaparecer y estos iconos nuevos colocarse encima de estos backgrounds. Ajusta cambiando los valores de margin-left del .node .nodeText que te he puesto en azul.
Salud2

gimomo · 3 Mayo 2012

lms dijo:
Rich (BB code):

.node .forumNodeInfo .nodeIcon, .node .categoryForumNodeInfo .nodeIcon {background:none !important;} .node .linkNodeInfo .nodeIcon {background:none !important} .node .nodeText { margin-bottom: 10px; margin-left: 15px; margin-right: 270px; margin-top: 10px; }

En teoría con esto puesto en la plantilla EXTRA.css te debieran de desaparecer y estos iconos nuevos colocarse encima de estos backgrounds. Ajusta cambiando los valores de margin-left del .node .nodeText que te he puesto en azul.
Salud2

lms, esto es lo que tengo en mi EXTRA.css, no encuentro el .node .nodeText {

PHP:

/* Custom styles */
 
.maintitle{
    color: #fff;
    border-radius: 3px;
    box-shadow: rgba(0,0,0,0.8) 0px 1px 3px inset;
    text-shadow: #000 0px 1px 2px;
    font-size: 13px;
    line-height: 20px;
    font-weight: bold;
    padding: 7px 10px;
    margin: 0 0 5px 0;
}
 
.maintitle a{
    color: #fff !important;
}
 
#custom_background span{
    display: block;
    float: left;
    width: 145px;
    height: 90px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    -webkit-box-shadow: inset rgba(0,0,0,1) 0px 1px 7px, rgba(255,255,255,0.05) 0px 1px 0px, rgba(255,255,255,0.35) 0px 0px 1px;
    -moz-box-shadow: inset rgba(0,0,0,1) 0px 1px 7px, rgba(255,255,255,0.05) 0px 1px 0px, rgba(255,255,255,0.35) 0px 0px 1px;
    box-shadow: inset rgba(0,0,0,1) 0px 1px 7px, rgba(255,255,255,0.05) 0px 1px 0px, rgba(255,255,255,0.35) 0px 0px 1px;
    margin-right: 15px;
    cursor: pointer;
    background: #000 no-repeat 50% 50%;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}
 
#custom_background span:hover{
    -webkit-box-shadow: inset rgba(0,0,0,1) 0px 1px 2px, rgba(255,255,255,0.05) 0px 1px 0px, rgba(255,255,255,0.35) 0px 0px 1px;
    -moz-box-shadow: inset rgba(0,0,0,1) 0px 1px 2px, rgba(255,255,255,0.05) 0px 1px 0px, rgba(255,255,255,0.35) 0px 0px 1px;
    box-shadow: inset rgba(0,0,0,1) 0px 1px 2px, rgba(255,255,255,0.05) 0px 1px 0px, rgba(255,255,255,0.35) 0px 0px 1px;
}
 
#custom_url{
    clear: left;
    padding-top: 10px;
    text-align: center;
}
 
#custom_input{
    background: #222;
    background: rgba(0,0,0,0.5);
    border: 0;
    -webkit-box-shadow: inset rgba(0,0,0,0.75) 0px 1px 3px, rgba(255,255,255,0.15) 0px 1px 0px;
    -moz-box-shadow: inset rgba(0,0,0,0.75) 0px 1px 3px, rgba(255,255,255,0.15) 0px 1px 0px;
    box-shadow: inset rgba(0,0,0,0.75) 0px 1px 3px, rgba(255,255,255,0.15) 0px 1px 0px;
    padding: 0 10px;
    font-size: 20px;
    height: 40px;
    width: 780px;
    color: #fff;
    white-space: nowrap;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin-right: 8px;
}
 
#custom_submit{
    line-height: 40px;
    font-size: 20px;
    display: inline-block;
    font-weight: normal;
    color: #fff;
    cursor: pointer;
    background: #686c73 url('@imagePath/xenforo/xenfocus/highlight.png') repeat-x 0 0;
    background: rgba(197,206,213,0.4) url('@imagePath/xenforo/xenfocus/highlight.png') repeat-x 0 0;
    text-shadow: #4c5057 0px -1px 0px;
    -webkit-box-shadow: rgba(0,0,0,0.6) 0px 1px 3px;
    -moz-box-shadow: rgba(0,0,0,0.6) 0px 1px 3px;
    box-shadow: rgba(0,0,0,0.6) 0px 1px 3px;
    padding: 0 10px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
 
#custom_submit:hover{
    background-color: #898f96;
    background-color: rgba(197,206,213,0.6);
}
 
#toggle_background{
    display:none;
    margin: 0 -20px;
}
 
#custom_background {
    color: #fff;
    background: #34343c url('@imagePath/xenforo/xenfocus/slide_bg.jpg') repeat;
    position: relative;
    padding: 15px;
    padding-right: 0;
    -webkit-box-shadow: inset rgba(0,0,0,0.8) 0px 0px 10px;
    -moz-box-shadow: inset rgba(0,0,0,0.8) 0px 0px 10px;
    box-shadow: inset rgba(0,0,0,0.8) 0px 0px 10px;
}
 
.nav_background{
    float: right;
    margin: 6px 8px 0 0;
    cursor: pointer;
}
 
.nav_background:hover{
    opacity: 0.8;
}
 
.breadBoxBottom .nav_background{ display:none; }
body.bg1, .bg1 .maintitle, .bg1 #header, .bg1 .footer, .bg1 #SignupButton .inner, .bg1 .footerLegal .pageContent, .bg1 .node .forumNodeInfo .nodeIcon, .bg1 .node .categoryForumNodeInfo .nodeIcon{ background: #000 url('@imagePath/xenforo/xenfocus/background1.jpg') no-repeat 50% 0 fixed !important; }
body.bg2, .bg2 .maintitle, .bg2 #header, .bg2 .footer, .bg2 #SignupButton .inner,  .bg2 .footerLegal .pageContent, .bg2 .node .forumNodeInfo .nodeIcon, .bg2 .node .categoryForumNodeInfo .nodeIcon{ background: #000 url('@imagePath/xenforo/xenfocus/background2.jpg') no-repeat 50% 0 fixed !important; }
body.bg3, .bg3 .maintitle, .bg3 #header, .bg3 .footer, .bg3 #SignupButton .inner,  .bg3 .footerLegal .pageContent, .bg3 .node .forumNodeInfo .nodeIcon, .bg3 .node .categoryForumNodeInfo .nodeIcon{ background: #000 url('@imagePath/xenforo/xenfocus/background3.jpg') no-repeat 50% 0 fixed !important; }
body.bg4, .bg4 .maintitle, .bg4 #header, .bg4 .footer, .bg4 #SignupButton .inner,  .bg4 .footerLegal .pageContent, .bg4 .node .forumNodeInfo .nodeIcon, .bg4 .node .categoryForumNodeInfo .nodeIcon{ background: #282830 url('@imagePath/xenforo/xenfocus/background4.jpg') repeat 50% 0 fixed !important; }
body.bg5, .bg5 .maintitle, .bg5 #header, .bg5 .footer, .bg5 #SignupButton .inner,  .bg5 .footerLegal .pageContent, .bg5 .node .forumNodeInfo .nodeIcon, .bg5 .node .categoryForumNodeInfo .nodeIcon{ background: #0e1e2d url('@imagePath/xenforo/xenfocus/background5.jpg') no-repeat 50% 0 fixed !important; }
body.bg6, .bg6 .maintitle, .bg6 #header, .bg6 .footer, .bg6 #SignupButton .inner,  .bg6 .footerLegal .pageContent, .bg6 .node .forumNodeInfo .nodeIcon, .bg6 .node .categoryForumNodeInfo .nodeIcon{ background: #000 url('@imagePath/xenforo/xenfocus/background6.jpg') no-repeat 50% 0 fixed !important; }
body.bg_custom, .bg_custom .maintitle, .bg_custom #header, .bg_custom .footer, .bg_custom #SignupButton .inner,  .bg_custom .footerLegal .pageContent, .bg_custom .node .forumNodeInfo .nodeIcon, .bg_custom .node .categoryForumNodeInfo .nodeIcon{ background-color: #000; background-attachment: fixed; background-repeat: repeat; }
 
 
#bg1{ background-image: url('@imagePath/xenforo/xenfocus/background1_thumb.jpg') !important; }
#bg2{ background-image: url('@imagePath/xenforo/xenfocus/background2_thumb.jpg') !important; }
#bg3{ background-image: url('@imagePath/xenforo/xenfocus/background3_thumb.jpg') !important; }
#bg4{ background-image: url('@imagePath/xenforo/xenfocus/background4_thumb.jpg') !important; }
#bg5{ background-image: url('@imagePath/xenforo/xenfocus/background5_thumb.jpg') !important; }
#bg6{ background-image: url('@imagePath/xenforo/xenfocus/background6_thumb.jpg') !important; }
 
.node .forumNodeInfo .nodeIcon,
.node .categoryForumNodeInfo .nodeIcon
{
}
 
    .node .forumNodeInfo .nodeIcon,
    .node .categoryForumNodeInfo .nodeIcon
    {
        opacity: 0.3;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
        filter: alpha(opacity=30);
    }
 
    .node .forumNodeInfo.unread .nodeIcon,
    .node .categoryForumNodeInfo.unread .nodeIcon
    {
        opacity: 1;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
    }
 
.pageNavLinkGroup .PopupOpen{ background-color: @linkGroupLink.background-color !important; color: @linkGroupLink.color !important; }
 
.thread_view .titleBar{ background: @secondaryLightest; box-shadow: inset rgba(0,0,0,0.08) 0px 1px 2px; border-radius: 5px; border: 1px solid @border; padding: 9px 12px 12px 12px; }
 
.message .messageMeta{ opacity: 0.1; -moz-transition: all ease-in-out 0.15s; }
.message:hover .messageMeta{ opacity: 1; }
 
.accountSideBar li a, .memberList .memberListItem:last-of-type, .nodeList.category_border li:last-of-type .nodeInfo{ border-bottom: 0 !important; }
 
.nodeList .nodeInfo, .discussionListItems > li{ background-image: url('@imagePath/xenforo/xenfocus/row_gradient.png'); background-repeat: repeat-x; background-position: 0 100%; border-top: 1px solid #fff; }
.nodeLastPost > a{ font-weight: bold; }
 
.messageUserBlock .arrow{ display:none !important; }
 
.discussionListItem .stats dl{ border: 0 !important; }
 
.subForumsPopup a{ padding: 0px 15px; }
 
#skin_copyright{
    float: left;
    clear: both;
    font-weight: bold;
    padding: 5px 0;
}
 
.border{ border: 1px solid @border; }
 
.category_border{ margin-top: 3px; margin-bottom: 8px; }
 
.helpSideBar li.section .heading, .accountSideBar li.section .heading, .accountSideBar li.section .subHeading{
    border-top: 0;
    background-position: 0 0;
    margin: 0;
    border-top-left-radius: 2px;
}
 
.helpSideBar li.section .heading, .accountSideBar li.section .heading{ font-size: 12px !important; }
 
.helpSideBar li.section, .accountSideBar li.section{
    border: 1px solid @border;
    border-right: 0;
    border-top-left-radius: 3px;
    padding-top: 0 !important;
}
 
.helpSideBar .secondaryContent, .accountSideBar .secondaryContent{ font-size: 11px; }
 
#SignupButton{ -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.5, transparent), to(rgba(255,255,255,0.2))); }
 
.message .newIndicator{ margin-right: -16px !important; }

lms · 3 Mayo 2012

No se trata de que lo tengas, si no de que lo añadas al final.

Salud2

gimomo · 3 Mayo 2012

lms dijo:
No se trata de que lo tengas, si no de que lo añadas al final.

Salud2

, lo inserte en el EXTRA.css, modifique todos los valores y nada, seguire viendo donde poder eliminar los iconos

¡Bienvenido a XenFácil!

¡Es gratis!

Mod.Plantilla Añadir iconos a los foros

ManuTdi

lms

AppleTree

Activo

lms

AppleTree

Activo

lms

AppleTree

Activo

lms

AppleTree

Activo

lms

AppleTree

Activo

lms

AppleTree

Activo

lms

AppleTree

Activo

gimomo

lms

gimomo

lms

gimomo

Sobre Nosotros

Productos

¿Dónde estamos?

¡Ayuda al sitio!