基于帐户信息的单个客户页面上的 Wordpress 错误消息

Question

我有一个用于 Wordpress 的“WP-client”插件，它允许每个用户拥有自己的个人“HUB 页面”，他们在登录时会被重定向到。每个用户都有一个带有“wpc_portal_alert”的自定义字段，当我在页面上放置短代码“{wpc_portal_alert}”时，它会在 CSS 错误消息框中显示自定义字段的内容。我遇到的问题是，当我将该字段留空时，由创建的图片和红色字段仍然存在（如下图所示）。我需要以某种方式检查该字段是否有文本，如果没有，则不显示 .我在想这需要 javascript，我非常有能力，但我可能需要访问数据库来获取自定义字段的内容。我对 MySQL、数据库或 PHP 不太熟悉。

HTML：

 <link href="http://troop18caz.com/error-style.css" rel="stylesheet" type="text/css" />
    &nbsp;
    <p style="text-align: center;"><span style="font-size: 25px; color: #800000;">Welcome to your Private and Secure Client Portal <span style="font-size: 25px;">| [wpc_client_logoutb]</span></span></p>
    <div class="errormsgbox">

    {wpc_portal_alert}

    </div>
    &nbsp;
    <table style="width: 100%;" border="0" cellspacing="0" cellpadding="0" align="center">
    <tbody>
    <tr>
    <td style="width: 50%;" valign="top"><img title="" alt="" src="[wpc_client_theme][/wpc_client_theme]/your_pages.png" /></td>
    <td style="width: 50%;" valign="top"><img title="" alt="" src="[wpc_client_theme][/wpc_client_theme]/upload_files.png" /></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td style="width: 50%;" valign="top">[shortmenu menu="Menu" enhance="flase" ]</td>
    <td style="width: 50%;" valign="top">Drag files to the box below, or click "Select Files" below.[wpc_client_uploadf][/wpc_client_uploadf]</td>
    </tr>
    <tr>
    <td style="width: 50%;" valign="top"></td>
    <td style="width: 50%;" valign="top"></td>
    </tr>
    <tr>
    <td style="width: 50%;" valign="top"><img title="" alt="" src="[wpc_client_theme][/wpc_client_theme]/uploaded_files.png" /></td>
    <td style="width: 50%;" valign="top"><img title="" alt="" src="[wpc_client_theme][/wpc_client_theme]/your_files.png" /></td>
    </tr>
    <tr>
    <td style="width: 50%;" valign="top">[wpc_client_fileslu][/wpc_client_fileslu]</td>
    <td style="width: 50%;" valign="top">[wpc_client_filesla][/wpc_client_filesla]</td>
    </tr>
    <tr>
    <td style="width: 50%; height: 70px;" valign="top"></td>
    <td style="width: 50%;" valign="top"></td>
    </tr>
    <tr>
    <td colspan="2" valign="top"><img title="" alt="" src="[wpc_client_theme][/wpc_client_theme]/messages.png" /></td>
    </tr>
    <tr>
    <td colspan="2" valign="top">[wpc_client_com][/wpc_client_com]</td>
    </tr>
    </tbody>
    </table>

CSS：

.successbox, .warningbox, .errormsgbox {
 font-weight:bold;
 border: 2px solid;
 margin: 10px 0px;
 padding:10px 10px 10px 70px;
 background-repeat: no-repeat;
 background-position: 10px center;
 width:90%;
}

.successbox {
 color: #4F8A10;
 background-color:#EDFCED;
 background-image:url('images/success.png');
}

.warningbox {
 color: #FFE222;
 background-color:#FAF9C9;
 background-image: url('images/warning.png');
}

.errormsgbox {
 color: #D8000C;
 background-color:#FDD5CE;
 background-image: url('http://troop18caz.com/wp-content/uploads/2013/08/error.png');
}

Answer 1

试试这个代码：

.successbox, .warningbox, .errormsgbox {
 -webkit-box-shadow:inset 0px 0px 0px 2px #D8000C;
 -moz-box-shadow:inset 0px 0px 0px 2px #D8000C;
 box-shadow:inset 0px 0px 0px 2px #D8000C;
 font-weight:bold;
 margin: 10px 0px;
 line-height: 60px;
 padding-left: 70px;
 background-repeat: no-repeat;
 background-position: 10px center;
 width:90%;
}

.successbox {
-webkit-box-shadow:inset 0px 0px 0px 2px #4F8A10;
 -moz-box-shadow:inset 0px 0px 0px 2px #4F8A10;
 box-shadow:inset 0px 0px 0px 2px #4F8A10;
 color: #4F8A10;
 background-color:#EDFCED;
 background-image:url('images/success.png');
}

.warningbox {
 -webkit-box-shadow:inset 0px 0px 0px 2px #FFE222;
 -moz-box-shadow:inset 0px 0px 0px 2px #FFE222;
 box-shadow:inset 0px 0px 0px 2px #FFE222;
 color: #FFE222;
 background-color:#FAF9C9;
 background-image: url('images/warning.png');
}

.errormsgbox {
-webkit-box-shadow:inset 0px 0px 0px 2px #D8000C;
 -moz-box-shadow:inset 0px 0px 0px 2px #D8000C;
 box-shadow:inset 0px 0px 0px 2px #D8000C;
 color: #D8000C;
 background-color:#FDD5CE;
 background-image: url('http://troop18caz.com/wp-content/uploads/2013/08/error.png');
}

http://jsfiddle.net/abZVC/1/

只需按行高更改顶部和底部填充。还要添加一个盒子阴影而不是边框​​。

删除我示例中的错误文本，看看它是如何工作的。