WordPress极简博客 WordPress极简博客
  • 新鲜事
  • 战疫情
  • UI素材
    • UI素材
    • 电商/节日
    • PPT
      • 节日庆典
      • 工作汇报
      • 商业计划书
    • word
      • 简历竞聘
      • 合同/公文
  • 创客头条
    • 音乐分享
    • 初创文章
    • 极客头条
    • 生活趣事
    • 生活日记
    • 防骗指南
  • 编程教学
    • API日记
    • Linux安全栏目
      • Linux运维安全汇总
      • DDOS攻击防护
      • XSS攻击防护
      • SQL安全防护
    • Python技术栏目
      • Python基础入门
      • Python基础结构
    • WordPress技术栏目
      • WP主题
      • WordPress技术教程
      • RIPRO主题美化
    • WordPress漏洞发布
    • 技术教程汇总
    • 严选源码
  • 专题
  • 基友
  • 隐私
  • 注册
    登录
立即登录
  • 首页
  • 云优化
  • 新疫情
  • 新鲜事
    • 热文
    • 极客
    • 生活
  • 技术篇
    • WP主题
    • 技术教程
    • Python入门
    • Python基础
  • 专题篇
  • 友链君
首页 初创 RiPro-v2美化头像框

RiPro-v2美化头像框

夏柔 9月 9, 2021

嘿嘿,灵感来源一个学习网站,可以让登录的用户看到自己的牛年元气头像~

大家先来看看样式吧~

RiPro-v2美化头像框-WordPress极简博客

当然了,因为夏柔不是很懂php,所以没写一个if判断条件;目前二开需求已经交给源分享了,至少可以在后台开启此功能、后台自定义头像框、判断用户条件生成头像框等。

如果大家想把这个功能实现在其他主题上,请联系夏柔定制~

好了,回归正题,教程开始:

首先来到 后台 => 外观 => 自定义 => 额外CSS 添加以下CSS代码:

.wpon_svip_logo_header{
        position: absolute;
        top: 0;
        left: 10;
        transform: scale(1.19, 1.19) translate(0, -5%)
    }

.wpon_svip_logo {
        position: absolute;
        top: 0;
        left: 10;
        transform: scale(1.19, 1.19) translate(0, -5%)
    }

来到 app.css 文件,修改以下内容:

1. 全局搜索 avatar-indicators:before 代码,大约在3653行,如图:

RiPro-v2美化头像框-WordPress极简博客

然后修改成:

.avatar-indicators:before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 5%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
/*     border: 2px solid #fff; */
    display: table;
/*     background-color: #19cb98; */
}

接下来依旧在 app.css 文件里,大约在7665行:

全局搜索 border-width-4 ,如图:

RiPro-v2美化头像框-WordPress极简博客

修改为:

border-width-4 {
/*         border: 4px solid; */
    }
RiPro-v2美化头像框-WordPress极简博客

CSS处理完,就该刷新缓存了。

添加头像框代码:

1. 首先来到 /ripro-v2/pages/user/header.php 大约在16行后面添加以下代码:

<img class="wpon_svip_logo" src="https://www.wpon.cn/ui-free/cow_frame.svg" alt="WordPress极简博客-优质博客">

2. 来到 /ripro-v2/template-parts/global/header-menu.php   分别大约在41、55行:

在41行添加以下代码:

<img class="wpon_svip_logo_header" src="https://www.wpon.cn/ui-free/cow_frame.svg" width="30" alt="avatar">

55行添加以下代码:

<img class="wpon_svip_logo" src="https://www.wpon.cn/ui-free/cow_frame.svg" alt="WordPress极简博客-优质博客">

好了,现在都弄完了,来前台刷新一下浏览器以及服务器缓存~

RiPro-v2美化头像框-WordPress极简博客

是不是非常酷哈哈!

当然了,这只是静态的,如果想做成动态 比如 SVIP才能拥有头像,这个需求就需要懂php技术的人来操作了,夏柔反正是不会~

只不过头像框就需要你们自己制作了,这个东西不至于让夏柔再教一遍吧。

依旧原创,转载请注明来源,谢谢~

#RIPRO#ripro-v2#会员#头像框
5
等 5 人赞过
J2dcg1.png
猜你喜欢
  • 绿联NAS搭建ubantu虚拟机安装宝塔面板保姆级教程
  • 阿里云用了管家备案感觉效率提高了
  • 自动化更新资源站系统上线
  • WP资源下载数据根据SQL语句导出
  • 三年腾讯云服务器到期了
  • 宝塔设置自动重启停止运行的Mysql数据库
  • 融合怪脚本:一键测试linux服务器性能、网络、IP质量等
  • 免费ssl数字证书申请-freegetssl
  • 朋友当兵去了
  • fastcdn之SSH列表数据接口
04 6月, 2020
快讯!凌晨现场直播抗议示威时,CNN记者被警方逮捕
夏柔
站长
夏山如碧 - 怀柔天下
1697
文章
25
评论
58145K
获赞
版权声明

文章采用创作共用版权 CC BY-NC-ND/2.5/CN 许可协议,与本站观点无关。

如果您认为本文侵犯了您的版权信息,请与我们联系修正或删除。
投诉邮箱wpsite@aliyun.com

栏目推荐
Python基础入门33
WordPress技术教程267
前沿技术情报所22
城市创新——新消费11
最近有哪些不可错过的热文23
程序员的养生之道0
节
春
  • 新鲜事
  • 疫情实况
  • UI素材
  • 技术教程
  • 音乐分享
  • 专题
  • 友情
  • 隐私
  • 云优化
Copyright © 2019-2025 WordPress极简博客. Designed by 夏柔. 辽公网安备21010502000474号 辽ICP备19017037号-2