Anuncio

Colapsar
No hay anuncio todavía.

Configurar Dos Columnas en el FORO / SUB-FORO a traves de solo CSS

Colapsar
X
 
  • Filtrar
  • Tiempo
  • Mostrar
Limpiar Todo
nuevos mensajes

  • Configurar Dos Columnas en el FORO / SUB-FORO a traves de solo CSS

    Esto es sólo una rápida valoración crítica de los mismos fundamentos para lograr la configuración de dos columnas para su uso en los foros a través sólo de CSS - sin modificaciones de plantillas ni plugins.

    ¡Esto no va a suponer enseñar CSS es este artículo! Usted deberá tener algún conocimiento básico de lo que son las Hojas de Estilo en Cascada. Aquí se expone a fin de profundizar un cambio que es solamente lo básico sin posicionar cosas, sin rellenos o márgenes o cualquier de otra índole de estilo aplicada - que es trabajo suyo.

    Esto fue escrito durante la prueba de la beta3/beta4 y pueden necesitar ser modificados para su uso con otras versiones ya que las clases que pueden cambiar el estilo no han sido finalizado todavía. Esto fue escrito para el estilo predeterminado y stylevars predeterminadas (por defecto en este momento, lo que es). Si has personalizado el estilo de otra manera, es posible que tengas que cambiar esto un poco para que funcione con tu estilo. Estas clases también se aplican solo a la página principal del foro, pero se pueden modificar fácilmente (¡por usted!) para trabajar en las páginas forumdisplay y trabajar sólo para ciertas categorías.

    Un ancho del navegador pequeño puede cambiar las cosas, o si tiene largas descripciones o sub-foros o moderadores en largas listas, puede que tenga que cambiar el CSS para dar cabida a eso. Como he dicho, esto en sólo un esbozo de lo que usted necesita hacer. Usted tendrá que agregar información de estilo por si mismo.

    Esto es básicamente en lo que va a terminar:

    Fundamentos Básicos de lo que debes hacer
    Añadir esto al final de la plantilla forumbits.css (o, al final de cualquier css adicional de plantilla que estés usando - se debe agregar * después * de que cualquier otras definiciones respecto a estos sub-foros hayan sido declaradas - si No entiendes por qué es así, por favor, lee de qué se trata sobre las Hojas de Estilo en Cascada):

    Código PHP:
    .forumhead + .childforum .L2:first-child .forumrow, .forumhead + .L2 .forumrow {
      
    border-top0;
    }
    .
    forumrow .table {
      
    height100px;
    }
    ol.childforum {
      
    floatleft;
      
    width100%;
      
    margin0;
      
    padding0;
    }
    .
    childforum li.forumbit_post {
      
    floatleft;
      
    width50%;
      
    margin0;
      
    padding0;
      
    clear:none;
    }
    #forums .L1 .L2 {
      
    clear:none;
    }
    .
    forumbit_post .forumrow .forumlastpost {
      
    clear:both;
      
    width:95%;
    }
    .
    forumbit_post .forumlastpost .lastpostby {
      
    displayblock;
      
    floatleft;
    }
    .
    forumbit_post .forumlastpost .lastpostdate {
      
    displayblock;
      
    floatright;
    }
    .
    forumbit_post .forumlastpost .lastposttitle {
      
    displayblock;
      
    floatleft;
    }
    .
    forumbit_post .foruminfo {
      
    clear:right;
      
    float:left;
      
    min-width:50%;
      
    width:70%;
    }
    .
    forumbit_post .forumstats, .forumbit_post .forumstats_2 {
      
    width:20%;

    Este mismo concepto se puede aplicar a cualquier lista en el estilo. Por ejemplo, puedes cambiar la lista de sub-foros en el marco de Sub-Foros en la página principal también con sólo un par de líneas:
    Código PHP:
    .subforums ol.subforumlist  {
      
    floatleft;
      
    width100%;
      
    margin0;
      
    padding0;
    }
    .
    subforumlist li.subforum {
      
    floatleft;
      
    width50%;
      
    margin0;
      
    padding0;
      
    clear:none;

    Estas líneas hacen esto (esto lo muestra con comas).
    Si lo quieres sin comas, añade el código siguienteAl final del todo "para eliminar las comas" y no tendrás comas:
    Código PHP:
    /* Para Borrar las Comas */
    .commalist li.subforum:after {
        
    content:"";

    y te quedará así:
    Código PHP:
    .subforums ol.subforumlist  {
      
    floatleft;
      
    width100%;
      
    margin0;
      
    padding0;
    }
    .
    subforumlist li.subforum {
      
    floatleft;
      
    width50%;
      
    margin0;
      
    padding0;
      
    clear:none;
    }
    /* Para Borrar las Comas */
    .commalist li.subforum:after {
        
    content:"";


    Una vez más, este artículo no pretende la enseñanza de CSS. Usted tendrá el estilo que usted quiera y también podrá hacer otros cambios para personalizar estilos pero las clases que pueden cambiar el estilo no han sido finalizado aún en el estilo de la beta 4.

    Artículo original en Inglés: [HOW TO - vB4] Two column forum/sub-forum setup via CSS only

    Salud2
    Salud2 a to2

  • #2
    Ya lo habia visto y parece interesante men, gracias por compartirlo y ha probar con algunos códigos extra en CSS, jejej para darle estilo y vivacidad, en cuanto tenga mivb 4 que para esto me tarda un buen tiempo .

    En fin un saludo...
    http://i30.tinypic.com/2m7c975.gif

    Salu2...

    Comentario


    • #3
      MmM, Lo Pongo y me queda igual a la Primera Imagen... No Entiendooooo

      Comentario


      • #4
        Estas definiciones al final, hacen que se sobreescriban las anteriores y se genere un listado de foros en dos columnas. Añadiendo el último código se obtiene un listado de subforos del mismo modo en dos columnas y sin comas.

        Salud2
        Salud2 a to2

        Comentario


        • #5
          Quede en las Mismasss No Entendi Nadaaaaaa, No tienes una Guia mas Entendible de Verdad men.. Disculpa la Molestia, Es que primera vez que me pongo a crear un Foro

          Comentario


          • #6
            NO, esto es CSS y no tiene nada que ver con crear un foro. El CSS son los archivos que dan formato a la representación de la página que se carga. Si estas empezando no intentes entender esto (es como comenzar una casa por el tejado). Ya llegarás.

            Salud2
            Salud2 a to2

            Comentario


            • #7
              Exacto, como menciona lms, siempre debes empezar con cosas sencillas y no entender todo el código, primero debes aprender a instalar el foro, jeje que es algo lioso de verdad pero al final lo puedes lograr, luego ver como se constituye y mirar los productos y plugins que hay y de que va cada uno, instalar idiomas, temas, etc, que es por lo que se va poco a poco y ya después de ello editar algunas cosas de tu foro.

              Después de esto sería bueno que aprendieras un poco de html, php y css para darte idea, no aprender todo en si, sino quizá cosas básicas para que entiendas un poco mas de que va el asunto (No digo que no sepas ya todo esto, quizá ya lo sabes y no te da aún así). Puedes mirar los estilos y de lo que va el vbulletin y que versión usas, y mas seguro que nos expongas como lo hicistes para que te digamos en que puede estar la falla).

              Saludos y no desesperes que el que persevera alcanza. Y nadie nace sabiendo, todos aprendemos cosas con el paso del tiempo y cada vez mas y mas con cada experiencia propia y a veces es de los errores de lo que más aprendemos, porque es cuando más noches pasamos con alguna cosa y por lo mismo lo recuerdas y aaah que batalla, jejeje.
              http://i30.tinypic.com/2m7c975.gif

              Salu2...

              Comentario


              • #8
                Muchachos, supongamos que yo lo que quiero es poder tener DETERMINADOS Foros en dos columnas...Ejemplifico: Digamos aquí en forovbulletin, poder tener la parte de vB4 así:




                Como lo logro? No se olviden, que deseo que sea de DETERMINADA CATEGORIA DE FOROS...Ando buscando como loco eso y no lo encuentro...

                PD: Esa foto la edité yo con el PS para que se vea así, forovbulletin jamás estuvo así XD

                Saludos!

                Comentario


                • #9
                  Edita la plantilla forumhome y usa el código con csstu código que está en la plantilla y que va sin este css

                  El XX, YY y ZZ son los ID del foro o foros a los que quieres aplicar este css.
                  Tiene que rular.

                  Salud2
                  Salud2 a to2

                  Comentario


                  • #10
                    No me lo jala...No comprendo al 100% como lo explicas es decir a ver yo lo que coloco es esto en el FORUMHOME:

                    AQUI EL CODIGO QUE HAS PUESTO TU EN EL 1er POSTAQUI LO QUE ESTABA EN EL FORUMHOME ANTES DE LA EDICION

                    Así es?...

                    Comentario


                    • #11
                      Código PHP:
                      el código con css

                      tu código que está en la plantilla y que va sin este css 
                      para ser más exactos. Precisa al menos de dos foros a poner, en caso de UN solo foro:
                      Código PHP:
                      el código con css

                      tu código que está en la plantilla y que va sin este css 
                      Salud2
                      Salud2 a to2

                      Comentario


                      • #12
                        Sigo estos pasos, pongo todito y no lo jala, ponga la categoría y los Foros que quiero ver así o solamente los Foros, y tampoco me lo jala, no entiendo porque T_T

                        Comentario


                        • #13
                          Pásame el texto de tu plantilla forumhome.

                          Salud2
                          Salud2 a to2

                          Comentario


                          • #14
                            Listo, enviados por MP

                            Comentario


                            • #15
                              Ojala puedas solucionar el problema. Solo una cosa en las opciones de vb ya has puesto esto de subforos y desplegado de los temas, ya que a veces una opción puede ocasionar que el contenido no sea mostrado correctamente.
                              http://i30.tinypic.com/2m7c975.gif

                              Salu2...

                              Comentario

                              Trabajando...
                              X