【提问】主题侧边栏+自定义HTML+全局小工具标题mac风格-zibll综合交流社区-zibll子比主题-WordPress主题模板-zibll子比主题

已解决主题侧边栏+自定义HTML+全局小工具标题mac风格

小工具demo(自定义HTML)h3标题

20240201140826390-image

小工具demo(主题侧边栏)

20240201141014263-image

小工具demo(主题底部全宽)适应手机端

20240201141310600-image

 

JS代码

放入主题目录:functions 文件

function custom_widget_title_class($params) {
$title = $params[0]['widget_name'];
$params[0]['before_title'] = '<h3 class="widget-titlee">'; //修改为你自己的需求
$params[0]['after_title'] = '</h3>';

return $params;
}

add_filter('dynamic_sidebar_params', 'custom_widget_title_class');

css代码:

放到主题自定义style里

/*自定义html侧边栏H3标题样式*/
h3.widget-titlee {
font-size: 16px;
font-weight: 500;
color: #333;
text-transform: uppercase;
padding-bottom: 13px;
margin-top: 2px;
margin-bottom: 15px;
position: relative;
border-bottom: 1px solid #ddd;
text-shadow: 0 0.25px 1.5px rgba(0,0,0,0.25);
}

h3.widget-titlee:after {
content: " ";
position: absolute;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #ff5d58 !important;
width: 12px;
height: 12px;
-webkit-box-shadow: 20px 0 #ffb528,40px 0 #26c73d;
box-shadow: 20px 0 #ffb528,40px 0 #26c73d;
top: 5px;
right: 45px;
}

h3.widget-titlee:after {
content: " ";
position: absolute;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #ff5d58 !important;
width: 12px;
height: 12px;
-webkit-box-shadow: 20px 0 #ffb528,40px 0 #26c73d;
box-shadow: 20px 0 #ffb528,40px 0 #26c73d;
top: 5px;
right: 45px;
}
/*自定义html侧边栏H3标题样式*/

/*主题小工具*/
.title-theme:after {
content: " ";
position: absolute;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #ff5d58 !important;
width: 12px;
height: 12px;
-webkit-box-shadow: 20px 0 #ffb528,40px 0 #26c73d;
box-shadow: 20px 0 #ffb528,40px 0 #26c73d;
top: 5px;
right: 45px;
}
/*主题小工具*/

请登录后发表评论