This forum uses cookies

This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm whether you accept or reject these cookies being set.

A cookie will be stored in your browser regardless of choice to prevent you being asked this question again. You will be able to change your cookie settings at any time using the link in the footer.

MangoVirtual - Alojamiento Web

[Error]  Ayuda con personalizacion de theme
* URL del foro: www.Infomaster21.com * Versión del foro: 1.6 * Actualización: --- Buenas, hace un buen tiempo que estoy personalizando un theme, p...

Buenas, hace un buen tiempo que estoy personalizando un theme, pero me tope con 2 problemas que no logro resolver.
AQUI hay una captura de lo que hice hasta ahora.

Problema 1:
El header... el theme original viene hecho un desastre en esta plantilla, tiene espacio como para poner un logo de 80px de alto, pero solo puede ponerse uno de 35px, porque si se coloca uno mas grande se corre todo de lugar. Toque todo... pero no logro encontrar una configuracion adecuada.

Header:
Código:
<a name="top" id="top"></a>
<div id="header">
   <table width="100%" cellpadding="0" cellspacing="0">
   <tr>
   <td height="36px">
      <div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>
   </td></tr>
   <tr><td>
   <div class="menu">
      <ul>
      <li><a href="portal.php">Portal</a></li>
      <li><a href="index.php" class="active">Foros</a></li>
      <li></li>
      <li><a href="{$mybb->settings['bburl']}/memberlist.php">{$lang->toplinks_memberlist}</a></li>
      <li><a href="{$mybb->settings['bburl']}/calendar.php">{$lang->toplinks_calendar}</a></li>
      <li><a href="{$mybb->settings['bburl']}/misc.php?action=help">{$lang->toplinks_help}</a></li>
      </ul>                        
   </div>
   </td>
   <td>
   {$welcomeblock}
   </td>
   </tr>
   </table>
</div>    

<hr class="hidden" />
<br/>
<div id="container">
                <div id="content">
        <hr class="hidden" />
        <br class="clear" />
        
            {$pm_notice}
            {$bannedwarning}
            {$bbclosedwarning}
            {$unreadreports}
            {$pending_joinrequests}
            <navigation>
            <br />

Global.css:
Código:
body {
    background: #dedede;
    color: #000;
    margin: 0;
    padding: 0;
    text-align: center;
    line-height: 1.4;
    
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 13px;
}

a:link {
    color: #026CB1;
    text-decoration: none;
}

a:visited {
    color: #026CB1;
    text-decoration: none;
}

a:hover, a:active {
    color: #000;
    text-decoration: underline;
}

#container {
    background: #f9f9f9;
    width: 90%;
    color: #000000;
    border: 1px solid #66a6d1;
    margin: auto auto;
    margin-bottom: 50px;
    padding: 20px;
    padding-top: 0;
    text-align: left;
    -moz-border-radius: 6px;
    -webkit-border-bottom-radius: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
}

#copyright {
        width: 90%;
        color: #000000;
    margin: auto auto;
        padding: 20px;
}

#header {
    background: #72add4 url(images/blueoverlay/headerbk.gif) bottom left repeat-x;
    height: 120px;
    text-align: left;
}

#content {
    width: auto !important;
}

#panel {
    color: #000;
    font-size: 11px;
}

#panel .remember_me input {
    vertical-align: middle;
    margin-top: -1px;
}

table {
    color: #000000;
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 13px;
}

.tborder {
    background: #fff;
    width: 100%;
    margin: auto auto;
    border: 1px solid #a5cae4;
    padding: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

.thead {
    background: #66a6d1 url(images/blueoverlay/thead.gif) top left repeat-x;
    color: #ffffff;
    -moz-border-radius-topright: 6px;
    -moz-border-radius-topleft: 6px;
}

.thead a:link {
    color: #ffffff;
    text-decoration: none;
}

.thead a:visited {
    color: #ffffff;
    text-decoration: none;
}

.thead a:hover, .thead a:active {
    color: #ffffff;
    text-decoration: underline;
}

.tcat {
    background: #e4f3ff;
    color: #000000;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 4px;
    border: 1px solid #a5cae4;
    font-size: 12px;
}

.tcat a:link {
    color: #000000;
}

.tcat a:visited {
    color: #000000;
}

.tcat a:hover, .tcat a:active {
    color: #000000;
}

.trow1 {
    background: #fff;
    border-bottom: 1px solid #cde8fa;
}

.trow2 {
    background: #FAFAFA;
    border-bottom: 1px solid #cde8fa;
}

.trow_shaded {
    background: #ffdde0;
}

.trow_selected td {
    background: #FFFBD9;
}

.trow_sep {
    background: #e5e5e5;
    color: #000;
    font-size: 12px;
    font-weight: bold;
}

.tfoot {
    background: #66a6d1 url(images/blueoverlay/thead.gif) top left repeat-x;
    color: #ffffff;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border--radius: 6px;
}

.tfoot a:link {
    color: #ffffff;
    text-decoration: none;
}

.tfoot a:visited {
    color: #ffffff;
    text-decoration: none;
}

.tfoot a:hover, .tfoot a:active {
    color: #ffffff;
    text-decoration: underline;
}

.bottommenu {
    background: #efefef url(images/blueoverlay/button.png) repeat-x;
    color: #000000;
        height: 30px;
    border: 1px solid #a5cae4;
    padding: 10px;
         -moz-border-radius: 6px;
    -webkit-border-radius:6px;
    border-radius:6px;
}

.navigation {
    background: #f0f0f0 url(images/blueoverlay/nav.png) repeat-x;
    color: #444444;
    border: 1px solid #CACACA;
    -moz-border-radius: 2px;
    height: 25px;
    line-height: 25px;
    
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

.navigation a:link {
    text-decoration: none;
}

.navigation a:visited {
    text-decoration: none;
}

.navigation a:hover, .navigation a:active {
    color: #444444;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

.navigation .active {
    color: #444444;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
}

.smalltext {
    font-size: 11px;
}

.largetext {
    font-size: 16px;
    font-weight: bold;
}

input.textbox {
    background: #ffffff;
    color: #000000;
    border: 1px solid #a5cae4;
    padding: 1px;
        -moz-border-radius: 6px;
    -webkit-border-radius:6px;
    border-radius:6px;
}

.button {
       background: #cde2f0 url(images/blueoverlay/button.png) repeat-x;
       color: #000000;
       border: 2px solid #a5cae4;
    padding: 2px 4px;
        -moz-border-radius: 4px;
    -webkit-border-radius:4px;
    border-radius:4px;
}

.button:hover {
       background: #a5cae4 url(images/blueoverlay/button.png) repeat-x;;
       color: #fff;
    border: 2px solid #cde2f0;
    padding: 2px 4px;
        -moz-border-radius: 4px;
    -webkit-border-radius:4px;
    border-radius:4px;
}

textarea {
    background: #ffffff;
    color: #000000;
    border: 1px solid #a5cae4;
    padding: 2px;
    font-family: Verdana, Arial, Sans-Serif;
    line-height: 1.4;
    font-size: 13px;
        moz-border-radius: 6px;
    -webkit-border-radius:6px;
    border--radius:6px;
}

select {
    background: #ffffff;
    border: 1px solid #a5cae4;
        moz-border-radius: 6px;
    -webkit-border-radius:6px;
    border--radius:6px;
}

.editor {
    background: #f1f1f1;
    border: 1px solid #a5cae4;
}

.editor_control_bar {
    background: #fff;
    border: 1px solid #0f5c8e;
        moz-border-radius: 6px;
    -webkit-border-radius:6px;
    border--radius:6px;
}

.autocomplete {
    background: #fff;
    border: 1px solid #000;
    color: black;
}

.autocomplete_selected {
    background: #adcee7;
    color: #000;
}

.popup_menu {
    background: #ccc;
    border: 1px solid #a5cae4;
}

.popup_menu .popup_item {
    background: #fff;
    color: #000;
}

.popup_menu .popup_item:hover {
    background: #C7DBEE;
    color: #000;
}

.trow_reputation_positive {
    background: #ccffcc;
}

.trow_reputation_negative {
    background: #ffcccc;
}

.reputation_positive {
    color: green;
}

.reputation_neutral {
    color: #444;
}

.reputation_negative {
    color: red;
}

.invalid_field {
    border: 1px solid #f30;
    color: #f30;
}

.valid_field {
    border: 1px solid #0c0;
}

.validation_error {
    background: url(images/blueoverlay/invalid.gif) no-repeat center left;
    color: #f30;
    margin: 5px 0;
    padding: 5px;
    font-weight: bold;
    font-size: 11px;
    padding-left: 22px;
}

.validation_success {
    background: url(images/blueoverlay/valid.gif) no-repeat center left;
    color: #00b200;
    margin: 5px 0;
    padding: 5px;
    font-weight: bold;
    font-size: 11px;
    padding-left: 22px;
}

.validation_loading {
    background: url(images/blueoverlay/spinner.gif) no-repeat center left;
    color: #555;
    margin: 5px 0;
    padding: 5px;
    font-weight: bold;
    font-size: 11px;
    padding-left: 22px;
}

/* Additional CSS (Master) */
img {
    border: none;
}

.clear {
    clear: both;
}

.hidden {
    display: none;
    float: none;
    width: 1%;
}

.hiddenrow {
    display: none;
}

.selectall {
    background-color: #FFFBD9;
    font-weight: bold;
    text-align: center;
}

.float_left {
    float: left;
}

.float_right {
    float: right;
}

.menu img {
    padding-right: 5px;
    vertical-align: top;
}

#panel .links {
    margin: 0;
    float: right;
}

.expcolimage {
    float: right;
    width: auto;
    vertical-align: middle;
    margin-top: 3px;
}

img.attachment {
    border: 1px solid #E9E5D7;
    padding: 2px;
}

hr {
    background-color: #000000;
    color: #000000;
    height: 1px;
    border: 0px;
}

#copyright {
    font: 11px Verdana, Arial, Sans-Serif;
    margin: 0;
    padding: 10px 0 0 0;
}

#debug {
    float: right;
    text-align: right;
    margin-top: 0;
}

blockquote {
    border: 1px solid #ccc;
    margin: 0;
    background: #fff;
    padding: 4px;
}

blockquote cite {
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    font-style: normal;
    display: block;
    margin: 4px 0;
}

blockquote cite span {
    float: right;
    font-weight: normal;
}

blockquote cite span.highlight {
    float: none;
    font-weight: bold;
    padding-bottom: 0;
}

.codeblock {
    background: #fff;
    border: 1px solid #ccc;
    padding: 4px;
}

.codeblock .title {
    border-bottom: 1px solid #ccc;
    font-weight: bold;
    margin: 4px 0;
}

.codeblock code {
    overflow: auto;
    height: auto;
    max-height: 200px;
    display: block;
    font-family: Monaco, Consolas, Courier, monospace;
    font-size: 13px;
}

.subforumicon {
    border: 0;
    vertical-align: middle;
}

.separator {
    margin: 5px;
    padding: 0;
    height: 0px;
    font-size: 1px;
    list-style-type: none;
}

form {
    margin: 0;
    padding: 0;
}

.popup_menu .popup_item_container {
    margin: 1px;
    text-align: left;
}

.popup_menu .popup_item {
    display: block;
    padding: 3px;
    text-decoration: none;
    white-space: nowrap;
}

.popup_menu a.popup_item:hover {
    text-decoration: none;
}

.autocomplete {
    text-align: left;
}

.subject_new {
    font-weight: bold;
}

.highlight {
    background: #FFFFCC;
    padding-top: 3px;
    padding-bottom: 3px;
}

.pm_alert {
    background: #FFF6BF;
    border: 1px solid #FFD324;
    text-align: center;
    padding: 5px 20px;
    margin-bottom: 15px;
    font-size: 11px;
}

.red_alert {
    background: #FBE3E4;
    border: 1px solid #A5161A;
    color: #A5161A;
    text-align: center;
    padding: 5px 20px;
    margin-bottom: 15px;
    font-size: 11px;
}

.high_warning {
    color: #CC0000;
}

.moderate_warning {
    color: #F3611B;
}

.low_warning {
    color: #AE5700;
}

div.error {
    padding: 5px 10px;
    border-top: 2px solid #FFD324;
    border-bottom: 2px solid #FFD324;
    background: #FFF6BF;
    font-size: 12px;
}

div.error p {
    margin: 0;
    color: #000;
    font-weight: normal;
}

div.error p em {
    font-style: normal;
    font-weight: bold;
    padding-left: 24px;
    display: block;
    color: #C00;
    background: url(images/blueoverlay/error.gif) no-repeat 0;
}

div.error.ul {
    margin-left: 24px;
}

.online {
    color: #15A018;
}

.offline {
    color: #C7C7C7;
}

.pagination {
    font-size: 11px;
    padding-top: 10px;
    margin-bottom: 5px;
}

.tfoot .pagination, .tcat .pagination {
    padding-top: 0;
}

.pagination .pages {
    font-weight: bold;
}

.pagination .pagination_current, .pagination a {
    padding: 2px 6px;
    margin-bottom: 3px;
}

.pagination a {
    border: 1px solid #81A2C4;
}

.pagination .pagination_current {
    background: #F5F5F5;
    border: 1px solid #81A2C4;
    font-weight: bold;
    color: #000;
}

.pagination a:hover {
    background: #F5F5F5;
    text-decoration: none;
}

.thread_legend, .thread_legend dd {
    margin: 0;
    padding: 0;
}

.thread_legend dd {
    padding-bottom: 4px;
    margin-right: 15px;
}

.thread_legend img {
    margin-right: 4px;
    vertical-align: bottom;
}

.forum_legend, .forum_legend dt, .forum_legend dd {
    margin: 0;
    padding: 0;
}

.forum_legend dd {
    float: left;
    margin-right: 10px;
}

.forum_legend dt {
    margin-right: 10px;
    float: left;
}

.success_message {
    color: #00b200;
    font-weight: bold;
    font-size: 10px;
    margin-bottom: 10px;
}

.error_message {
    color: #C00;
    font-weight: bold;
    font-size: 10px;
    margin-bottom: 10px;
}

.post_body {
    padding: 5px;
}

.post_content {
    padding: 5px 10px;
}

.quick_jump {
    background: url(images/blueoverlay/jump.gif) no-repeat 0;
    width: 13px;
    height: 13px;
    padding-left: 13px; /* amount of padding needed for image to fully show */
    vertical-align: middle;
    border: none;
}

.repbox {
    font-size:16px;
    font-weight: bold;
    padding:5px 7px 5px 7px;
}

._neutral {
    background-color:#FAFAFA;
    color: #999999;
    border:1px solid #CCCCCC;
}

._minus {
    background-color: #FDD2D1;
    color: #CB0200;
    border:1px solid #980201;
}

._plus {
    background-color:#E8FCDC;
    color: #008800;
    border:1px solid #008800;
}

.pagination_breadcrumb {
    background-color: #f5f5f5;
    border: 1px solid #fff;
    outline: 1px solid #ccc;
    padding: 5px;
    margin-top: 5px;
    font-weight: normal;
}

.pagination_breadcrumb_link {
    vertical-align: middle;
    cursor: pointer;
}

/* Menu */
.menu ul {
    width: 100%;
    height: 20px;
    margin: 0;
    padding: 0;
    padding-top: 47px;
    list-style: none;
    /*border-bottom: 5px solid #fff;*/
    /*background:  url(images/blueoverlay/menu_active_bg.gif) repeat-x top left;*/
}

html>body .hmenu ul {
    float: left;
}

.menu li {
    font-size: 11px;
    float: left;
    margin: 0;
    padding: 0 2px 0 0;
    list-style: none;
    padding-left:10px;
}

.menu a {
    color: #6cb2d6;
    float: left;
    padding: 4px 10px 4px 10px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-topleft: 3px;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    
    text-decoration: none;
}

.menu a:hover {
    color: #d7edfc;
    background: #176093;
}

.menu a.active {
    background: #65a8d6;
        color: #f0f7fc;
}

.avatar {
    display: inline;
    float: left;
    margin-top: 5px;
    margin-right: 15px;
}

#facebox {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  text-align: left;
}

#facebox .popup {
  position:relative;
  border:3px solid rgba(0,0,0,0);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  -webkit-box-shadow:0 0 18px rgba(0,0,0,0.4);
  -moz-box-shadow:0 0 18px rgba(0,0,0,0.4);
  box-shadow:0 0 18px rgba(0,0,0,0.4);
}

#facebox .content {
  display:table;
  width: 370px;
  padding: 10px;
  background: #fff;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}

#facebox .content > p:first-child {
  margin-top:0;
}

#facebox .content > p:last-child {
  margin-bottom:0;
}

#facebox .close {
  position:absolute;
  top:5px;
  right:5px;
  padding:2px;
  background:#fff;
}

#facebox .close img {
  opacity:0.3;
}

#facebox .close:hover img {
  opacity:1.0;
}

#facebox .loading {
  text-align: center;
}

#facebox .image {
  text-align: center;
}

#facebox img {
  border: 0;
  margin: 0;
}

#facebox_overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  height:100%;
  width:100%;
}

.facebox_hide {
  z-index:-100;
}

.facebox_overlayBG {
  background-color: #000;
  z-index: 99;
}

#breadcrumb {
    width: 100%;
    color: #9b9b9b;
    font: 11px Arial, Helvetica, sans-serif;
    background-image: url(images/blueoverlay/nav.png);
    background-repeat: repeat-x;
    height: 30px;
    line-height: 30px;
    border: solid 1px #cacaca;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

#breadcrumb li {
    list-style-type:none;
    float:left;
    padding-left:10px;
}

#breadcrumb a {
    height:30px;
    display:block;
    background-image:url(images/blueoverlay/nav_sep.png);
    background-repeat:no-repeat;
    background-position:right;
    padding-right: 15px;
    text-decoration: none;
    color:#454545;
}

.home {
    border:none;
    margin: 8px 0px;
        -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius:6px;
}

#breadcrumb a:hover {
    color:#35acc5;
}

.trow4 {
background: #fcfcfc;
width: 100%;
border: 1px solid #a1c9d8;
font-weight:bold;
padding: 2px;
font-size: 11px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

Problema 2:
Las tablas, no logro hacer que se visualice las lineas verticales de las celdas. En el listado de foros no importa, porque se ve bien asi, pero cuando ingreso a otro lugar no se entiende nada, por ejemplo, en el postbit no posee una linea que separe los datos del usuario con el contenido del mensaje.
Intente poniendo un borde de 1px en el trow1 y 2, pero se visualizaba mal, porque coloca 2 lineas separada por un espacio. Quite ese espacio en las propiedades del theme pero igual se ve mal.

Undecided
Podrías poner el theme online? Es que sino voy viendo el foro online con el código fuente no creo que de hecho nada.
Para lo primero cambia esto:

Código:
.menu ul {
    width: 100%;
    height: 20px;
    margin: 0;
    padding: 0;
    padding-top: 47px;
    list-style: none;
    /*border-bottom: 5px solid #fff;*/
    /*background:  url(../../../images/blueoverlay/menu_active_bg.gif) repeat-x top left;*/
}

Por esto:

Código:
.menu ul {
    width: 100%;
    height: 20px;
    margin: 0;
    padding: 0;
    padding-top: 40px;
    list-style: none;
    /*border-bottom: 5px solid #fff;*/
    /*background:  url(../../../images/blueoverlay/menu_active_bg.gif) repeat-x top left;*/
}

Para lo segundo... Tendría que cambiar el color del background del .tborder, pero no creo que fuera a quedar bien...
Gracias!!!, sintetizando:

1)_ .menu ul -> padding-top: 40px; esto indica la distancia entre el logo y los enlaces de la barra. Ya agrande el logo y achique esta distancia hasta que quedo bien.

2)_ .tborder : ya le puse un gris claro y alcanza para verse una separación entre las columnas sin quedar muy feo.

Nueva pregunta, al visualizar un post, el titulo del mensaje principal se ve mal, parece que una tabla para el titulo y otro para el mensaje, lo que queda muy mal, ver:

[Imagen: capgj2qg.png]

Por cierto, la columna del titulo queda no coincide con la columna del postbit, como lo arreglo?.


Big Grin
Última modificación: 25 Jul, 2011, 9:04 am por YondaimeKuba.
Es que son dos tablas diferentes... Sino fíjate en nuestro foro, también son dos tablas diferentes. Y lo otro... Edita el width de la plantilla showthread_classic_header.
Como hago para que ambas tablas se separen un poco asi no se chocan sus bordes?. Intente meterle un < BR / > en el showthread_classic_header y tambien probe en el showthread y nada se modifico.

Última modificación: 26 Jul, 2011, 9:46 am por YondaimeKuba.
Hay que ponerlo en el showthread... Tiene que irte. :S
Si, ahora lo veo.. no refrescaba bien el navegador. Con un Br queda mucho espacio, le puse una imagen de 3 px de alto y la separacion esta bien, pero igual se ve mal la linea.

Esto ya me canso, no puedo perder tantas horas en esto, mando todo al tacho.

Cierren!.