phpBB España Oficial • Como integrar el diseño de tu web con el foro

Página 1 de 1

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

Publicado: 14 Oct 2014, 19:47

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

Imagen

Integrado con el Foro
Imagen

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