- URL del foro: http://www.wayofninja.donkiehost.com
- Versión del foro: 1.6
- Actualización: Ninguna
Hola a todos, me gustaría modificar estéticamente la caja de mensajes... en su generalidad.
En primer lugar, me gustaría modificar el posbit con el postbit_classic:
Quiero conseguir que la barra negra que aparece en el nuevo sistema permanezca en el antiguo, para conseguir algo asi: (imagen conseguida gracias a modificacion con photoshop)
http://oi52.tinypic.com/raua6t.jpg
Este es el sistema tipico:
http://oi53.tinypic.com/2i03bbd.jpg
Este es el nuevo sistema:
http://oi52.tinypic.com/ddgv40.jpg.
___________________________________
Una vez conseguido esto, quisiera añadir un sombreado a TODA LA CAJA DEL MENSAJE.
Es decir, aqui esta sombreado el lugar donde aparecen los datos del autor, y el mensaje... pero ami me gustaria rodearlo todo, lo de afuera. Quedando algo asi:
http://i56.tinypic.com/20st177.jpg
Si ven, el alrrededor de todo el hueco del mensaje esta sombreado... pues me gustaria que quedara de esa manera.
___________________________________
Por ultimo queria saber, si hay forma de redondear la firma, con el sombreado, pero sin tener que seleccionar un color para lo de dentro.
Es decir, que el hueco de la firma quedara del color de fondo del mensaje, pero que estuviera rodeado por ese sombreado negro.
____________________________________
____________________________________
Para aclarar dudas, añadire aqui el codigo CSS, el Postbit y el Postbit_classic.
Postib_Classic:
Código:
{$ignore_bit}
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="{$post_extra_style} {$post_visibility}" id="post_{$post['pid']}">
<tr>
<td class="{$altbg}" width="15%" valign="top" style="white-space: nowrap; text-align: center;"><a name="pid{$post['pid']}" id="pid{$post['pid']}"></a>
<div class="trow4">
<div class="trow4">
<strong><span class="largetext">{$post['profilelink']}</span></strong> {$post['onlinestatus']}<br />
<span class="smalltext">
{$post['usertitle']}<br />
{$post['userstars']}
</div><br/>
<div class="trow4">
{$post['groupimage']}
</div><br/>
<div class="trow4">
{$post['useravatar']}<br />
</div><br/>
{$post['user_details']}
</div>
</span>
</td>
<td class="{$altbg}" valign="top">
<table width="100%">
<tr><td>{$post['posturl']}<span class="smalltext"><strong>{$post['icon']}{$post['subject']} {$post['subject_extra']}</strong></span>
<br />
<div id="pid_{$post['pid']}" style="padding: 5px 0 5px 0;">
{$post['message']}
</div>
{$post['attachments']}
{$post['signature']}
<div style="text-align: right; vertical-align: bottom;" id="post_meta_{$post['pid']}">
<div id="edited_by_{$post['pid']}">{$post['editedmsg']}</div>
{$post['iplogged']}
</div>
</td></tr>
</table>
</td>
</tr>
<tr>
<td class="{$altbg}" style="white-space: nowrap; text-align: center; vertical-align: middle;"><span class="smalltext">{$post['postdate']} {$post['posttime']}</span></td>
<td class="{$altbg}" style="vertical-align: middle;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr valign="bottom">
<td align="left" ><span class="smalltext">{$post['button_email']}{$post['button_pm']}{$post['button_www']}{$post['button_find']}{$post['button_rep']}</span></td>
<td align="right">{$post['button_edit']}{$post['button_quickdelete']}{$post['button_quote']}{$post['button_multiquote']}{$post['button_report']}{$post['button_warn']}{$post['button_reply_pm']}{$post['button_replyall_pm']}{$post['button_forward_pm']}{$post['button_delete_pm']}</td>
</tr>
</table>
</td>
</tr>
</table>Postbit
Código:
{$ignore_bit}
<a name="pid{$post['pid']}" id="pid{$post['pid']}"></a>
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="margin-bottom: 5px; {$post_visibility}" id="post_{$post['pid']}">
<tbody>
<tr>
<td class="tcat rounded_top">
<div class="float_left smalltext">
{$post['postdate']}, {$post['posttime']} <span id="edited_by_{$post['pid']}">{$post['editedmsg']}</span>
</div>
{$post['posturl']}
</td>
</tr>
<tr>
<td class="trow1 {$unapproved_shade}">
<table cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
<tr>
<td class="post_avatar" width="1" style="{$post['avatar_padding']}">
{$post['useravatar']}
</td>
<td class="post_author">
<strong><span class="largetext">{$post['profilelink']}</span></strong> {$post['onlinestatus']}<br />
<span class="smalltext">
{$post['usertitle']}<br />
{$post['userstars']}
{$post['groupimage']}
</span>
</td>
<td class="smalltext post_author_info" width="165">
{$post['user_details']}
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="trow2 post_content {$unapproved_shade}">
<span class="smalltext"><strong>{$post['icon']}{$post['subject']} {$post['subject_extra']}</strong></span>
<div class="post_body" id="pid_{$post['pid']}">
{$post['message']}
</div>
{$post['attachments']}
{$post['signature']}
<div class="post_meta" id="post_meta_{$post['pid']}">
{$post['iplogged']}
</div>
</td>
</tr>
<tr>
<td class="trow1 post_buttons {$unapproved_shade}">
<div class="author_buttons float_left">
{$post['button_email']}{$post['button_pm']}{$post['button_www']}{$post['button_find']}{$post['button_rep']}
</div>
<div class="post_management_buttons float_right">{$post['button_edit']}{$post['button_quickdelete']}{$post['button_quote']}{$post['button_multiquote']}{$post['button_report']}{$post['button_warn']}{$post['button_reply_pm']}{$post['button_replyall_pm']}{$post['button_forward_pm']}{$post['button_delete_pm']}
</div>
</td>
</tr>
</tbody>
</table>Global.CSS
Código:
body {
color: #000;
text-align: left;
line-height: 1.4;
margin: 0;
background-image: url(http://oi53.tinypic.com/mmucg0.jpg);
background-repeat: repeat-y;
background-position: center center;
background-attachment: fixed;
background-color: #353535;
}
font-family: Tahoma, Verdanan, Arial, Sans-Serif;
font-size: 13px;
}
a:link {
color: #e9893f;
text-decoration: none;
}
a:visited {
color: #e9893f;
text-decoration: none;
}
a:hover, a:active {
color: #6f3d1f;
text-decoration: underline;
}
#container {
color: #000;
text-align: left;
line-height: 1.4;
margin: auto auto;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
width: 1000px;
}
.wrapper {
width: 1000px;
margin: auto auto;
}
#header {
margin-left: -12px ;
}
#content {
background: #fff;
padding: 20px 1px;
overflow: hidden;
width: 1000px;
}
#panel ul.menu {
margin: 0;
padding: 0;
list-style: none;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
}
#panel ul.menu li {
margin: 0 5px;
display: inline;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
}
#panel ul.menu li a {
padding-left: 20px;
background-repeat: no-repeat;
background-position: left center;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
}
#panel .upper ul.top_links {
float: right;
font-weight: bold;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
}
#panel .upper ul.top_links a.search {
background-image: url(images/dawn/icons/search.gif);
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
}
#panel .upper ul.top_links a.memberlist {
background-image: url(images/dawn/icons/memberlist.gif);
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
}
#panel .upper ul.top_links a.calendar {
background-image: url(images/dawn/icons/calendar.gif);
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
}
#panel .upper ul.top_links a.help {
background-image: url(images/dawn/icons/help.gif);
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
}
#panel .upper a.logout {
font-weight: bold;
background: url(images/dawn/icons/logout.gif) right no-repeat;
padding-right: 20px;
margin-left: 10px;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
}
#panel .upper a.login,
#panel .upper a.lost_password {
background: url(images/dawn/icons/login.gif) no-repeat;
padding-left: 20px;
margin-left: 10px;
font-weight: bold;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
}
#panel .upper a.register {
background: url(images/dawn/icons/logout.gif) right no-repeat;
padding-right: 20px;
margin-left: 10px;
font-weight: bold;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
}
#panel .lower ul.panel_links {
float: left;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
}
#panel .lower ul.panel_links a.usercp {
background-image: url(images/dawn/icons/usercp.gif);
}
#panel .lower ul.panel_links a.modcp {
background-image: url(images/dawn/icons/modcp.gif);
}
#panel .lower ul.panel_links a.admincp {
background-image: url(images/dawn/icons/admincp.gif);
}
#panel .lower ul.user_links {
float: right;
}
#panel .lower ul.user_links li a {
padding: 0;
}
#panel .upper {
background: #0f0f0f url(images/dawn/tcat.png) repeat-x;
color: #fff;
border-top: 1px solid #444;
border-bottom: 1px solid #000;
padding: 7px;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
}
#panel .upper a:link,
#panel .upper a:visited,
#panel .upper a:hover,
#panel .upper a:active {
color: #fff;
}
#panel .lower {
background: #efefef;
color: #999;
border-top: 1px solid #fff;
border-bottom: 1px solid #ccc;
overflow: hidden;
padding: 5px;
}
#panel .lower a:link,
#panel .lower a:visited {
color: #666;
}
#panel .lower a:hover,
#panel .lower a:active {
color: #333;
text-decoration: none;
}
#panel .remember_me input {
vertical-align: middle;
margin: -3px 0 0 5px;
}
#panel input {
margin: -3px 0;
}
#panel input.button {
padding: 0;
}
fieldset {
border: 1px solid #ddd;
}
table {
color: #000000;
font-size: 13px;
}
.tborder {
background: #fff;
width: 100%;
margin: auto auto;
border: 1px solid #ccc;
padding: 1px;
}
.thead {
color: #fff;
background-color: fab57e;
background-image: url(http://i53.tinypic.com/6ygu2e.jpg);
border-bottom: 1px solid #9a4e20;
padding: 8px;
}
.thead a:link {
color: #fff;
text-decoration: none;
}
.thead a:visited {
color: #fff;
text-decoration: none;
}
.thead a:hover, .thead a:active {
color: #fff;
text-decoration: underline;
}
.tcat {
background: #000000 url(http://oi56.tinypic.com/wunzgy.jpg) top left repeat-x;
color: #fff;
border-bottom: 1px solid #000;
padding: 6px;
font-size: 12px;
}
.tcat a:link {
color: #fff;
}
.tcat a:visited {
color: #fff;
}
.tcat a:hover, .tcat a:active {
color: #fff;
}
.trow1 {
background: #f5f5f5;
border: 1px solid;
border-color: #ddd #fff #ddd #fff;
}
.trow2 {
background: #efefef;
border: 1px solid;
border-color: #ddd #fff #ddd #fff;
}
.trow1 a {
color: #ba5f1a;
}
.trow2 a {
color: #ba5f1a;
}
.trow1 a:hover {
color: #61320e;
text-decoration: underline;
}
.trow2 a:hover {
color: #61320e;
text-decoration: underline;
}
.trow_shaded {
background: #ffdde0;
border: 1px solid;
border-color: #fff #ffb8be #ffb8be #fff;
}
.trow_selected td {
background: #FFFBD9;
color: #000;
border-right-color: #F7E86A;
border-bottom-color: #F7E86A;
}
.trow_selected td a:link,
.trow_selected td a:visited,
.trow_selected td a:hover,
.trow_selected td a:active {
color: #000;
}
.trow_sep {
background: #ddd;
color: #000;
border-bottom: 1px solid #c5c5c5;
padding: 6px;
font-size: 12px;
font-weight: bold;
}
.tfoot {
background: #d56c2c url(http://img585.imageshack.us/img585/6072/fondothread.png) top left repeat-x;
color: #ffffff;
border-top: 1px solid #fff;
padding: 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;
}
.thead input.textbox,
.thead select,
.tfoot input.textbox,
.tfoot select {
border: 1px solid #9a4e20;
}
.bottommenu {
background: #efefef;
color: #000000;
border: 1px solid #4874a3;
padding: 10px;
}
.navigation {
color: #000000;
font-size: 12px;
}
.navigation a:link {
text-decoration: none;
}
.navigation a:visited {
text-decoration: none;
}
.navigation a:hover, .navigation a:active {
text-decoration: none;
}
.navigation .active {
color: #000000;
font-size: small;
font-weight: bold;
}
.smalltext {
font-size: 11px;
}
.largetext {
font-size: 16px;
font-weight: bold;
}
input.textbox {
background: #ffffff;
color: #000000;
border: 1px solid #ccc;
padding: 3px;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
}
textarea {
background: #ffffff;
color: #000000;
border: 1px solid #ccc;
padding: 2px;
line-height: 1.4;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
}
select {
background: #ffffff;
padding: 3px;
border: 1px solid #ccc;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
}
input.button {
padding: 2px;
cursor: pointer;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
}
.editor {
background: #f1f1f1;
border: 1px solid #ccc;
}
.editor_control_bar {
background: #fff;
border: 1px solid #ccc;
}
.autocomplete {
background: #fff;
color: black;
border: 1px solid #ccc;
padding: 1px;
}
.autocomplete_selected {
background: #f2a555;
color: #fff;
}
.popup_menu {
background: #fff;
border: 1px solid #ccc;
}
.popup_menu .popup_item {
background: #efefef;
color: #000;
}
.popup_menu .popup_item:hover {
background: #f2a555;
color: #fff;
}
.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/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/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/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: #FFFBD9;
border-bottom: 1px solid #F7E86A;
color: #000;
text-align: center;
}
.float_left {
float: left;
}
.float_right {
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;
}
#debug {
float: right;
text-align: right;
margin-top: 20px;
font-size: 11px;
}
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: 4px;
white-space: nowrap;
text-decoration: none;
}
.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/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: 3px 6px;
margin-bottom: 3px;
}
.pagination a {
background: #f5f5f5;
border: 1px solid #ccc;
}
.pagination .pagination_current {
background: none;
color: #000;
border: none;
font-weight: bold;
}
.pagination a:hover {
background: #f2a555;
color: #fff;
border-color: #d56c2c;
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;
margin-top: 7px;
}
.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_buttons {
background: #f5f5f5;
padding: 3px 3px 0 3px;
border-bottom: 1px solid #ddd;
}
.post_content {
padding: 5px 10px;
}
.quick_jump {
background: url(images/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: #efefef;
border: 1px solid #fff;
outline: 1px solid #ccc;
padding: 5px;
margin-top: 5px;
font-weight: normal;
}
.pagination_breadcrumb_link {
vertical-align: middle;
cursor: pointer;
}
form #message {
width: 500px;
}
ul.MenuBarHorizontal {
margin: -10px 32px;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 1000px;
font-family: "Segoe Script";
font-size:12px;
}
ul.MenuBarActive {
z-index: 1000;
}
ul.MenuBarHorizontal li {
margin-top: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
float: left;
background-image: url(http://img59.imageshack.us/img59/2417/pergaminou.png);
width: 120px;
height: 27px;
}
ul.MenuBarHorizontal ul {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: -8.2em;
position: absolute;
left: -1000em;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible {
left: -4px;
margin: 4px 14px;
}
ul.MenuBarHorizontal ul li {
width: 100px;
background-image: url(http://img442.imageshack.us/img442/7811/medio0.jpg);
}
ul.MenuBarHorizontal ul ul {
position: absolute;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible {
top: 0;
left: auto;
}
ul.MenuBarHorizontal ul {
}
ul.MenuBarHorizontal a {
display: list-item;
cursor: pointer;
text-decoration: none;
margin-top: 5px;
color: #351B00;
font-stretch:semi-condensed;
font-weight:bolder;
}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
margin-top: 5px;
color: #C00;
font-stretch:semi-condensed;
font-weight:bolder;
}
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
}
ul.MenuBarHorizontal a.MenuBarItemSubmenu {
background-repeat: no-repeat;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu {
}
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover {
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover {
}
ul.MenuBarHorizontal iframe {
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
}
@
media screen, projection {
ul.MenuBarHorizontal li.MenuBarItemIE {
display: compact;
f\loat: none;
}
#trow4 {
background: #efefef;
border: 1px solid #000000;
padding: 2px;
}Gracias de antemano, tan solo por leer.