国内更专业
计算机技术平台

WordPress引用框体与警告特效设置

引用框体样式1:

这里是东云网引用框体样式1

设置方法:

1、在主题设置——自定义代码——自定义CSS样式中加入如下代码:

/*--blockquote引用框加背景(绿色)--*/
/*--www.pydyun.com--*/
/*--东云工作室--*/
.article-content blockquote {
	color: #7da33c;
	background: #ecf2d6 url('/wp-content/uploads/img/sc_notice.png') -1px -1px no-repeat;//此处应替换为对应网站的图片链接
	border: 1px solid #aac66d;
	padding: 15px 15px 5px 35px;
	margin: 0 0 15px;
	width: auto;
}
.article-content blockquote p {
	text-indent: 0 !important;
}

注:在代码background中url地址应替换为各自网站的图片链接→

2、在文章中使用时选择“格式”——“块”——“块引用”即可。

引用框体样式2:

这里是东云网引用框体样式2

设置方法:

1、在主题设置——自定义代码——自定义CSS样式中加入如下代码:

/*--blockquote引用框加背景(蓝色)--*/
/*--www.pydyun.com--*/
/*--东云工作室--*/
.sc_blue{
        color:#4d99d2;
        background:#dbe7f8 url('/wp-content/uploads/img/sc_blue.png') -1px -1px no-repeat;//此处应替换为对应网站的图片链接
        border:1px solid #4d99d2;
        overflow:hidden;
        margin:10px 0;
        padding:15px 15px 15px 35px
        }

注:在代码background中url地址应替换为各自网站的图片链接→

2、将文章编辑方式切换至文本样式,在文章代码中添加<div class="sc_blue">这里是内容区域</div>即可。

引用框体样式3:

这里是东云网引用框体样式3

设置方法:

1、在主题设置——自定义代码——自定义CSS样式中加入如下代码:

/*--blockquote引用框加背景(红色)--*/
/*--www.pydyun.com--*/
/*--东云工作室--*/
.sc_error {
	color: #c66;
	background: #ffecea url('/wp-content/uploads/img/sc_error.png') -1px -1px no-repeat;//此处应替换为对应网站的图片链接
	border: 1px solid #ebb1b1;
        overflow: hidden;
	padding: 15px 15px 5px 35px;
	margin: 0 0 15px;
	width: auto;
        }

注:在代码background中url地址应替换为各自网站的图片链接→

2、将文章编辑方式切换至文本样式,在文章代码中添加<div class="sc_error">这里是内容区域</div>即可。

引用框体样式4(Bootstrap警告01):

成功!很好地完成了提交。
信息!请注意这个信息。
警告!请不要提交。
错误!请进行一些更改。

设置方法:

1、代码

<div class="alert alert-success">成功!很好地完成了提交。</div>
<div class="alert alert-info">信息!请注意这个信息。</div>
<div class="alert alert-warning">警告!请不要提交。</div>
<div class="alert alert-danger">错误!请进行一些更改。</div>

将文章编辑方式切换至文本样式,在文章代码中添加以上任一行代码即可。

引用框体样式5(可取消的警告):

成功!很好地完成了提交。
信息!请注意这个信息。
警告!请不要提交。
错误!请进行一些更改。

设置方法:

1、代码

<div class="alert alert-success alert-dismissable">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                &times;
            </button>
            成功!很好地完成了提交。
        </div>
        <div class="alert alert-info alert-dismissable">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                &times;
            </button>
            信息!请注意这个信息。
        </div>
        <div class="alert alert-warning alert-dismissable">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                &times;
            </button>
            警告!请不要提交。
        </div>
        <div class="alert alert-danger alert-dismissable">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                &times;
            </button>
            错误!请进行一些更改。
</div>

将文章编辑方式切换至文本样式,在文章代码中添加以上任一div代码即可。

引用框体样式6(带链接的警告):

<div class="alert alert-success">
    <a href="#" class="alert-link">成功!很好地完成了提交。</a>
</div>
<div class="alert alert-info">
    <a href="#" class="alert-link">信息!请注意这个信息。</a>
</div>
<div class="alert alert-warning">
    <a href="#" class="alert-link">警告!请不要提交。</a>
</div>
<div class="alert alert-danger">
    <a href="#" class="alert-link">错误!请进行一些更改。</a>
</div>

将文章编辑方式切换至文本样式,在文章代码中添加以上任一div代码即可。

赞(0) 打赏
未经允许不得转载:东云网 » WordPress引用框体与警告特效设置

评论 抢沙发

评论前必须登录!

 

东云科技,与您偕行!

免责声明联系我们

觉得文章有用就打赏一下文章作者吧,么么哒~

支付宝扫一扫打赏

微信扫一扫打赏