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

Question

I have the "WP-client" plugin for Wordpress that allows each user to have their own personal "HUB Page" that they are redirected to upon login. Each User has a custom field with the slug "wpc_portal_alert", and when I place the shortcode "{wpc_portal_alert}" on the page, it displays the contents of the custom field within a CSS error message box. The problem that I am encountering is that when I leave the field blank, the picture and red field created by the are still there (Pictured Below). I need to somehow check to see if the field has text, and if it does NOT, then not display the . I was thinking that this would require javascript, which I'm pretty capable of, but I would probably need to access the database to get the content of the custom field. I'm not too familiar with MySQL, Databases, or 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

Try this code:

.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/

Just change the top and bottom padding by line-height. Also add a box-shadow instead of the border.

Remove the error text in my example to see how it works.