Recordad que para pedir soporte alguno, debéis facilitar los datos de soporte oportunos por favor, mirad aquí y leer las Normas generales del foro, esto nos servirá de ayuda para dar el mejor soporte..

Gracias.

La Administración de phpBB España.

Como integrar el diseño de tu web con el foroTema Solucionado

Dudas sobre estilos phpBB 3.0.x
Colaboraciones gráficas paquetes de rangos aquí y botones aquí.
  Reglas del Foro
Cerrado
Avatar de Usuario
nextgen
Ex Staff
Mensajes: 1726
Registrado: 25 Jul 2009, 03:16
Género:
Edad: 40

Como integrar el diseño de tu web con el foro  Tema Solucionado

#1

Mensaje por nextgen »

Bueno finalmente se ha conseguido integrar el diseño del foro con el sitio(portal), ahora mismo les dejamos unas imagenes para que vean como van quedando.

Sitio original
Imagen

Integrado con el Foro
Imagen

En esta guía se describira como poder integrar el foro con un sitio(portal), no es ningun script ni parecido es solamente un poco de estetica para el sitio, lo que se hara es crear una Cabecera, Una barra al lado izquierdo asi como una barra a la derecha, bueno a lo que vamos.

Abre: el common.css que esta en la ruta styles/prosilver/theme/common.css.

Busca:

Código: Seleccionar todo

/* Main blocks
---------------------------------------- */
Despues agrega:

Código: Seleccionar todo

#new_header{
      padding: 10px;
}

#left_bar{
      width: 150px;
      float: left;
      padding: 10px;
}

#right_bar{
      width: 150px;
      float: right;
      padding: 10px;
}
Ahora lo que haremos es darle la altura y anchura al estilo

En el common.css

Busca:

Código: Seleccionar todo

#wrap {
   padding: 0 20px;
   min-width: 650px;
}
Reemplaza con:

Código: Seleccionar todo

#wrap {
   padding: 0 20px;
        float: left;
        width: 650px;
}
Bueno ya tenemos la primera parte de la integración lista, ahora guardamos guardamos los cambios hechos en el common.css

Ahora nos toca hacer las modificaciones en los archivos html para eso abrimos el overall_header.html que esta en la ruta styles/prosilver/template/overall_header.html.

Busca:

Código: Seleccionar todo

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
Agrega despues:

Código: Seleccionar todo

<div id="new_header">New Header</div>
<div id="left_bar">Left side Menus and stuff</div>
<div id="right_bar">Right side Menus and stuff</div>
Llegado a este punto tenemos la opción de eliminar el header eso es opcional asi que si quieren pueden hacerlo o no. Si desean eliminar el header pueden hacerlo de esta manera.

Busca:

Código: Seleccionar todo

      <div class="headerbar">
         <div class="inner"><span class="corners-top"><span></span></span>

         <div id="site-description">
            <a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
            <h1>{SITENAME}</h1>
            <p>{SITE_DESCRIPTION}</p>
            <p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
         </div>

      <!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
         <div id="search-box">
            <form action="{U_SEARCH}" method="post" id="search">
            <fieldset>
               <input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
               <input class="button2" value="{L_SEARCH}" type="submit" /><br />
               <a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
            </fieldset>
            </form>
         </div>
      <!-- ENDIF -->

         <span class="corners-bottom"><span></span></span></div>
      </div>
Y eliminalo.

Ya hecho esto necesitamos agregar el footer asi que haremos asi que abrimos nuevamente nuestro common.css

Busca:

Código: Seleccionar todo

#right_bar{
      width: 150px;
      float: right;
      padding: 10px;
}
Agrega despues:

Código: Seleccionar todo

#new_footer{
   clear: both;
}
Luego de aver agregado la modificación guardamos los cambios.

Ahora lo que haremos sera integrar el footer en nuestro archivo html y para eso abrimos el overall_footer.html que se encuentra en la ruta styles/prosilver/template/overall_footer.html

Busca:

Código: Seleccionar todo

<div>
   <a id="bottom" name="bottom" accesskey="z"></a>
   <!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
</div>
Agrega antes:

Código: Seleccionar todo

<div id="new_footer"></div>
Hasta este punto ya tenemos integrado nuestro foro con el sitio(portal), bien ahora lo que haremos sera agregar las barras laterales y para eso hacemos lo siguiente.

Abrimos el common.css

Busca:

Código: Seleccionar todo

/* Horizontal lists
----------------------------------------*/
Agregar antes:

Código: Seleccionar todo

/* Vertical lists (LEFT BAR MENU)
----------------------------------------*/
#leftmenu {
width: 150px;
padding: 0px;
margin: 0px;
}

#leftmenu h1 {
display: block;
background-color: blue;
font-size: 90%;
padding: 3px 0 5px 3px;
border: 1px solid #000000;
color: #333333;
margin: 0px;
width:150px;
}

#leftmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}
#leftmenu ul li {
margin: 0px;
padding: 0px;
}
#leftmenu ul li a {
display: block;
border-bottom: 1px dashed #C39C4E;
padding: 5px 0px 2px 4px;
text-decoration: none;
color: #666666;
width:150px;
}

#leftmenu ul li a:hover, #leftmenu ul li a:focus {
color: #000000;
background-color: #eeeeee;
}
/* END LEFT BAR MENU  */
Ahora nuevamente en el overall_header.html

Busca:

Código: Seleccionar todo

<div id="left_bar">
En la misma linea despues , agrega (antes del </div>):

Código: Seleccionar todo

<div id="leftmenu">
      <h1>PHPBB ROCKS</h1>
         <ul>
            <li><a href="#" tabindex="1">Home</a></li>
            <li><a href="#" tabindex="2">About Us</a></li>
            <li><a href="#" tabindex="3">SUBSILVER</a></li>
            <li><a href="#" tabindex="4">THEMES</a></li>
            <li><a href="#" tabindex="5">Games</a></li>
            <li><a href="#" tabindex="6">Links</a></li>
         </ul>
         </div>
Con esto ya tenemos nuestro foro 100% integrado el sitio(portal) con el foro, ya después pueden hacer el mismo procedimiento de esto ultimo con el <div id="right_bar">.

Pues espero que les haya servido este pequeño tutorial ;)

Gracias a: rhythm1
Arriba
Cerrado

Volver a “Soporte para Estilos phpBB 3.0.x”