0

各ユーザーがログイン時にリダイレクトされる独自の「HUBページ」を持つことができるWordpress用の「WP-client」プラグインがあります。各ユーザーにはスラッグ「wpc_portal_alert」を含むカスタム フィールドがあり、ショートコード「{wpc_portal_alert}」をページに配置すると、カスタム フィールドの内容が CSS エラー メッセージ ボックスに表示されます。私が遭遇している問題は、フィールドを空白のままにすると、 によって作成された画像と赤いフィールドがまだそこにあることです (下の画像)。フィールドにテキストがあるかどうかを何らかの方法で確認する必要があり、そうでない場合は表示されません。これには JavaScript が必要であると考えていましたが、これにはかなりの能力がありますが、カスタム フィールドのコンテンツを取得するには、おそらくデータベースにアクセスする必要があります。MySQL、データベース、

ここに画像の説明を入力

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');
}
4

1 に答える 1

2

このコードを試してください：

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

行の高さで上下のパディングを変更するだけです。また、境界線の代わりにボックス シャドウを追加します。

この例のエラー テキストを削除して、どのように機能するかを確認してください。

于 2013-08-29T21:21:38.153 に答える