Ajustar el ancho + 2 dudas

Mana_mybb_import8155 8 Dec, 2010, 3:03 pm

URL del foro: http://www.pbforos.co.cc/
Versión del foro: 1.6
Actualización: Ninguna

Hola!

Bueno, en mi foro tendre 2 themes navideños, uno es el X-Christmas de EroKenji.
Y pues el otro me basare en un Apart, tome el Flame, pero la verdad cual sea no interesa mucho, lo que pasa es que los Apart se extienden a lo ancho de la pantalla, y pue eso hace que el banner se me vea feo en este caso:

[spoiler=Spoiler] [Imagen: asdfgm.png]

[/spoiler]

Ese ajuste del ancho lo quiero hacer por 2 razones, la primera, para que no se vean esas franjas rojas a los lados del banner.
y la segunda, es para que se vea el background, el cual solo lo logro ver en las pantallas de redireccion.
Me gustaria que me dijeran como ajustarlo.

1ª duda:Como puedo poner un borde parecido al que tienen en este foro foro, me refiero a ese que encierra gris, que encierra por ejemplo la caja de los iconos gestuales :V.

2ª duda:Bueno he notado que en los themes Apart, o por lo menos todos los que he probado, por ejemplo si en un tema una imagen es muy grande, [de ancho], no aparece la barra de dezplazamiento horizontal en el navegador, pensaba que yo habia configurado algo mal, pero me he fijado que solo me pasa con los temas Apart.

Bueno, espero sus respuestas :3

Última modificación: 8 Dec, 2010, 3:05 pm por neileraitor.

nocktis21 8 Dec, 2010, 5:00 pm

Me da gusto que el tema que hize si este siendo utilizado T_T

Bueno, te dire la solucion, crea un <div id="wrapper"> y lo pones hasta arriba de todo en la plantilla "header".
Css:

Código:
#wrapper {

    width: 990px;

    margin: 0 auto;

}

Pero mejor pasame tu plantilla header y yo lo hago.

Respuesta a la duda #1: Sustituye esto en el css:
.tborder {
background: #ffffff;
width: 100%;
margin: auto auto;
border: 1px solid #bdbdbd;
padding: 3px;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}

Respuesta a la duda #2: Quizas sea que dichas imagenes estan en un div con tamaño limitado, esto hace que una imagen mas grande se corte y solamente se muestre el tamaño dicho en el css.
Ejemplo: <div class="img2"><a href="http://google.com"></div>

Código:
.img2 {

        background: url(imagen) top left no-repeat;

        width: 800px;

        height: 250px;

}

Esto hara que la imagen solo mida 800x250px y si mide mas se recortara el resto.

Última modificación: 8 Dec, 2010, 5:05 pm por Azagthoth.

Mana_mybb_import8155 8 Dec, 2010, 5:31 pm

Aqui va :
[spoiler=Header]

Código PHP:
<?php 

<div id="container">

        <a name="top" id="top"></a>

        <div id="header">

            <div id="logo">

                <div class="wrapper">

                    <a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>

                </div>

            </div>

            <div id="panel">

                <div class="upper"><!-- This div(class="upper") is closed in the header_welcomeblock_member and header_welcomeblock_guest templates -->

                    <div class="wrapper">

                        <ul class="menu top_links">

                            <li><a href="{$mybb->settings['bburl']}/search.php" class="search">{$lang->toplinks_search}</a></li>

                            <li><a href="{$mybb->settings['bburl']}/memberlist.php" class="memberlist">{$lang->toplinks_memberlist}</a></li>

                            <li><a href="{$mybb->settings['bburl']}/calendar.php" class="calendar">{$lang->toplinks_calendar}</a></li>

                        </ul>

                        {$welcomeblock}

            </div>

        </div>

        <div id="content">

            <div class="wrapper">

                {$pm_notice}

                {$bannedwarning}

                {$bbclosedwarning}

                {$unreadreports}

                {$pending_joinrequests}

                <navigation>

                <br />

[/spoiler]

~EroKenji escribió:Respuesta a la duda #2: Quizas sea que dichas imagenes estan en un div con tamaño limitado, esto hace que una imagen mas grande se corte y solamente se muestre el tamaño dicho en el css.
Ejemplo: <div class="img2"><a href="http://google.com"></div>

Código:
.img2 { background: url(imagen) top left no-repeat; width: 800px; height: 250px; }
Esto hara que la imagen solo mida 800x250px y si mide mas se recortara el resto.

Esta no te entendi mucho xd
Me podrias decir que modificar exactamente
para que el div no tenga limite ;D

Última modificación: 8 Dec, 2010, 5:54 pm por neileraitor.

uben 8 Dec, 2010, 8:36 pm

amigo ballaa tu global.css
y busca esto donde
.logo {
width: 100%;
float: left;
margin: 0px 0px 0px 0px;
height: 100%;
}
dice margin: pon 0px 0px 0px 0px; en todo para que no quede el borde o si no dejame tu css para ver ok espero averte ayudado

nocktis21 8 Dec, 2010, 8:52 pm

Sustituye todo en la plantilla header por esto:

Código:
<div id="wrapper">

<div id="header">

<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>

            <div id="panel">

                <div class="upper"><!-- This div(class="upper") is closed in the header_welcomeblock_member and header_welcomeblock_guest templates -->

                    <div class="wrapper">

                        <ul class="menu top_links">

                            <li><a href="{$mybb->settings['bburl']}/search.php" class="search">{$lang->toplinks_search}</a></li>

                            <li><a href="{$mybb->settings['bburl']}/memberlist.php" class="memberlist">{$lang->toplinks_memberlist}</a></li>

                            <li><a href="{$mybb->settings['bburl']}/calendar.php" class="calendar">{$lang->toplinks_calendar}</a></li>

                        </ul>

                        {$welcomeblock}

                    </div>

                 </div>

<div class="content_wrap">

        <a name="top" id="top"></a>

        <hr class="hidden" />

        <div id="content">

            {$pm_notice}

            {$bannedwarning}

            {$bbclosedwarning}

            {$unreadreports}

            {$pending_joinrequests}

            <navigation><br />

Sustituye todo en la plantilla header_welcome_member por esto:

Código:
<!-- Continuation of div(class="upper") as opened in the header template -->

    <span class="welcome" align="left">{$lang->welcome_back} <a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}" class="logout">{$lang->welcome_logout}</a></span>

    </div>

</div>

<div class="lower">

    <div class="wrapper">

        <ul class="menu panel_links">

            <li><a href="{$mybb->settings['bburl']}/usercp.php" class="usercp">{$lang->welcome_usercp}</a></li>

            {$modcplink}

            {$admincplink}

        </ul>

        <ul class="menu user_links">

            <li><a href="#" onclick="MyBB.popupWindow('{$mybb->settings['bburl']}/misc.php?action=buddypopup', 'buddyList', 350, 350);">{$lang->welcome_open_buddy_list}</a></li>

            <li><a href="{$mybb->settings['bburl']}/search.php?action=getnew">{$lang->welcome_newposts}</a></li>

            <li><a href="{$mybb->settings['bburl']}/search.php?action=getdaily">{$lang->welcome_todaysposts}</a></li>

            <li><a href="{$mybb->settings['bburl']}/private.php">{$lang->welcome_pms}</a> {$lang->welcome_pms_usage}</li>

        </ul>

    </div>

</div>

En el tus estilos agrega:

Código:
#wrapper {

    width: 980px;

    margin: auto auto;

}

.content_wrap {

    background: #ffffff;

    padding: 5px;

    text-align: left; /* IE 5 fix */

}

Lo que hize fue cambiar el container por wrapper para definir el ancho de todo y eliminar el wrapper con class, el content_wrap es para el contenido de los foros.

Solo eliminar el valor de width y height pero eso solo si tiene un valor establecido.
Esto puede ser el porque la imagen no se corte pero necesitaría ver cual es la imagen y mirar el codigo que utiliza para saber si es así o si tiene alguna otra forma.

Última modificación: 8 Dec, 2010, 8:57 pm por Azagthoth.

Mana_mybb_import8155 8 Dec, 2010, 9:57 pm

Bueno lo unico que veo como un pequeñisimo error, es que esto esta descentrado (creo xd):
[spoiler=Spoiler] [Imagen: descentrado.png]

[/spoiler]
------------------------------------------------
Y pues para lo de las imagenes, pues en offtopic busca un tema de imagenes de Grand Fantasia xD, ahi hay muchas imagenes y puedes tomar como muestra eso. :v

nocktis21 8 Dec, 2010, 10:08 pm

(8 Dec, 2010, 9:57 pm)Mana escribió: Bueno lo unico que veo como un pequeñisimo error, es que esto esta descentrado (creo xd):
[spoiler=Spoiler][/spoiler]
------------------------------------------------
Y pues para lo de las imagenes, pues en offtopic busca un tema de imagenes de Grand Fantasia xD, ahi hay muchas imagenes y puedes tomar como muestra eso. :v

En el global.css busca: body y cambia el text-align: center; por text-align: left;

No tengo idea xD pero usa el plugin Fit on page: http://mods.mybb.com/view/fit-on-page redimensiona las imagenes y al dar clic en ellas muestra su tamaño original Big Grin

PD: Me encanta el foondo que pusiste xD

Última modificación: 8 Dec, 2010, 10:11 pm por Azagthoth.

Mana_mybb_import8155 8 Dec, 2010, 10:31 pm

Bueno, ya todo bien
Lo del fit on page ya lo tenia en mente , pero queria saber mas acerca del tema ;D
Gracias EroKenji, realmente me has sido de ayuda
+1 rep para ti (:
Pueden cerrar :3

[Error] Ajustar el ancho + 2 dudas