文章
推广

度崩资源网 | Telegram群 | 广告位招租

RiPro 主题美化教程+源码[Wordpress主题][Ripro主题美化]

RiPro 主题美化教程+源码
RiPro 主题美化教程+源码[Wordpress主题][Ripro主题美化]

添加底部波浪效果、友情链接添加友情链接自助申请界面、添加VIP角标、修改右侧悬浮导航

效果演示（一）
RiPro 主题美化教程+源码[Wordpress主题][Ripro主题美化]-度崩网-几度崩溃
效果演示（一）
RiPro 主题美化教程+源码[Wordpress主题][Ripro主题美化]-度崩网-几度崩溃
教程一、添加底部波浪效果
第一步：主题目录 -> footer.php 在“</footer>”后添加如下代码
  1. <div class="waveHorizontals mobile-hide">
  2.  
  3.                 <div id="waveHorizontal1" class="waveHorizontal"></div>
  4.  
  5.                 <div id="waveHorizontal2" class="waveHorizontal"></div>
  6.  
  7.                 <div id="waveHorizontal3" class="waveHorizontal"></div>
  8.  
  9. </div>
 第二步：主题目录 -> assets -> css -> diy.css 添加如下样式
  1. .waveHorizontals {
  2.  
  3.     width: 100%;
  4.  
  5.     height: 20px;
  6.  
  7.     position: relative;
  8.  
  9.     overflow: hidden;
  10.  
  11.     z-index: 1;
  12.  
  13.   background-color:#fff !important
  14.  
  15. }
  16.  
  17. .ripro-dark .waveHorizontals {
  18.  
  19.     width: 100%;
  20.  
  21.     height: 20px;
  22.  
  23.     position: relative;
  24.  
  25.     overflow: hidden;
  26.  
  27.     z-index: 1;
  28.  
  29.   background-color:#181616 !important
  30.  
  31. }
  32.  
  33. #waveHorizontal1 {
  34.  
  35.     -webkit-mask: url(../images/augsc_01.svg);
  36.  
  37.     mask: url(../images/augsc_01.svg);
  38.  
  39.     animation-delay: -2s;
  40.  
  41.     animation-duration: 12s;
  42.  
  43. }
  44.  
  45. #waveHorizontal1, #waveHorizontal2, #waveHorizontal3 {
  46.  
  47.     background-color: #f9b015!important;
  48.  
  49. }
  50.  
  51. .ripro-dark #waveHorizontal1{
  52.  
  53.     background-color: #f1f1f1!important;
  54.  
  55. }
  56.  
  57. .ripro-dark  #waveHorizontal2{
  58.  
  59.     background-color: #f1f1f1!important;
  60.  
  61. }
  62.  
  63. .ripro-dark  #waveHorizontal3{
  64.  
  65.     background-color: #f1f1f1!important;
  66.  
  67. }
  68.  
  69. .waveHorizontal {
  70.  
  71.     width: 200%;
  72.  
  73.     height: 100%;
  74.  
  75.     display: block;
  76.  
  77.     position: absolute;
  78.  
  79.     left: 0;
  80.  
  81.     bottom: 0;
  82.  
  83.     background-repeat: repeat-x;
  84.  
  85.     background-position: left bottom;
  86.  
  87.     background-size: 350px 100%;
  88.  
  89.     transform-origin: 0 100% 0;
  90.  
  91.     animation-name: move;
  92.  
  93.     animation-timing-function: linear;
  94.  
  95.     animation-iteration-count: infinite;
  96.  
  97. }
  98.  
  99. @keyframes move{0%{transform:translate(-175px,0px) scale(1,1)}50%{transform:translate(-87px,0px) scale(1,0.5)}100%{transform:translate(0px,0px) scale(1,1)}}
  100.  
  101.  
  102. #waveHorizontal2 {
  103.  
  104.     -webkit-mask: url(../images/augsc_02.svg);
  105.  
  106.     mask: url(../images/augsc_02.svg);
  107.  
  108.     animation-delay: -2s;
  109.  
  110.     animation-duration: 5s;
  111.  
  112. }
  113.  
  114. #waveHorizontal3 {
  115.  
  116.     -webkit-mask: url(../images/augsc_03.svg);
  117.  
  118.     mask: url(../images/augsc_03.svg);
  119.  
  120.     animation-delay: -1s;
  121.  
  122.     animation-duration: 3s;
  123.  
  124. }
 教程二、添加友情链接效果
第一步：主题目录打开 functions.php ，在最后添加如下代码
  1. /*开启wordpress友情链接管理*/
  2.  
  3. add_filter( 'pre_option_link_manager_enabled', '__return_true' );
 第二步：主题目录 -> footer.php ，在“<?php if ( _cao( ‘cao_copyright_text’, ” ) != ” ) : ?>”前添加如下代码
  1. <div class="codesign-dw">
  2.  
  3.         <div class="col-xs-12 friend-links">
  4.  
  5.                 <ul class="codesign-fl">
  6.  
  7.                         <li class="codesign-fl-title">友情链接：</li>
  8.  
  9.                         <?php wp_list_bookmarks('title_li=&categorize=0&orderby=name&show_images=0'); ?>
  10.  
  11.                 </ul>
  12.  
  13.         </div>
  14.  
  15. </div>
 第三步：主题目录 -> assets -> css -> diy.css 添加如下样式
  1. .col-xs-12.friend-links {
  2.  
  3.     padding: 14px;
  4.  
  5. }
  6.  
  7. .codesign-fl {
  8.  
  9.     display: flex;
  10.  
  11.     list-style: none;
  12.  
  13.     padding: 0;
  14.  
  15.     margin: 0;
  16.  
  17.         font-size: 13px;
  18.  
  19. }
  20.  
  21. .codesign-fl li{
  22.  
  23. margin-left: 10px;
  24.  
  25. }
  26.  
  27. .codesign-fl a{
  28.  
  29.     color: #949494;
  30.  
  31. }
  32.  
  33. .codesign-fl a:hover{
  34.  
  35.     color: #058ff9;
  36.  
  37. }
  38.  
  39. .codesign-dw{
  40.  
  41.         border: 1px dashed #ccc;
  42.  
  43.         background-color: #f7f8fa;
  44.  
  45.         text-shadow: #fff 0px 1px 0px;
  46.  
  47. }
  48.  
  49. .ripro-dark .codesign-dw{
  50.  
  51.         border: 1px dashed #44444487;
  52.  
  53.         background-color: #2d2d2d;
  54.  
  55.         text-shadow: #000 0px 1px 0px;
  56.  
  57. }
 教程三、添加友情链接自助申请界面
第一步：主题目录打开 functions.php ，搜索“pages/tags.php”（跟着教程走的童鞋请搜索“pages/vip.php”），换行添加如下代码
  1. 'pages/links.php' => array('自助友链', 'links'),
 解释：默认自动添加页面，页面标题为“自助友链”，页面地址为“links”
第二步：主题目录 -> pages 目录下添加“links.php”，并在“links.php”中添加如下代码
  1.  <?php
  2.  
  3. /**
  4.  
  5. * Template name: 自助友链
  6.  
  7. * Description:   A Friendship link page
  8.  
  9. */
  10.  
  11. get_header();
  12.  
  13. ?>
  14.  
  15. <?php
  16.  
  17. if( isset($_POST['blink_form']) && $_POST['blink_form'] == 'send'){
  18.  
  19. global $wpdb;
  20.  
  21.  
  22. // 表单变量初始化
  23.  
  24. $link_name = isset( $_POST['blink_name'] ) ? trim(htmlspecialchars($_POST['blink_name'], ENT_QUOTES)) : '';
  25.  
  26. $link_url = isset( $_POST['blink_url'] ) ? trim(htmlspecialchars($_POST['blink_url'], ENT_QUOTES)) : '';
  27.  
  28. $link_description = isset( $_POST['blink_lianxi'] ) ? trim(htmlspecialchars($_POST['blink_lianxi'], ENT_QUOTES)) : ''; // 联系方式
  29.  
  30. $link_target = "_blank";
  31.  
  32. $link_visible = "N"; // 表示链接默认不可见
  33.  
  34.  
  35. // 表单项数据验证
  36.  
  37. if ( empty($link_name) || mb_strlen($link_name) > 20 ){
  38.  
  39. wp_die('连接名称必须填写，且长度不得超过30字');
  40.  
  41. }
  42.  
  43.  
  44. if ( empty($link_url) || strlen($link_url) > 60 || !preg_match("/^(https?://)?(((www.)?[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)?.([a-zA-Z]+))|(([0-1]?[0-9]?[0-9]|2[0-5][0-5]).([0-1]?[0-9]?[0-9]|2[0-5][0-5]).([0-1]?[0-9]?[0-9]|2[0-5][0-5]).([0-1]?[0-9]?[0-9]|2[0-5][0-5]))(:d{0,4})?)(/[w- ./?%&=]*)?$/i", $link_url)) { //验证url
  45.  
  46. wp_die('链接地址必须填写');
  47.  
  48. }
  49.  
  50.  
  51. $sql_link = $wpdb->insert(
  52.  
  53. $wpdb->links,
  54.  
  55. array(
  56.  
  57. 'link_name' => '【待审核】--- '.$link_name,
  58.  
  59. 'link_url' => $link_url,
  60.  
  61. 'link_target' => $link_target,
  62.  
  63. 'link_description' => $link_description,
  64.  
  65. 'link_visible' => $link_visible
  66.  
  67. )
  68.  
  69. );
  70.  
  71.  
  72. $result = $wpdb->get_results($sql_link);
  73.  
  74.  
  75. wp_die('亲，友情链接提交成功，【等待站长审核中】！<a href="'.$_SERVER["REQUEST_URI"].'">点此返回</a>', '提交成功');
  76.  
  77.  
  78. }
  79.  
  80.  
  81. get_header();
  82.  
  83. ?>
  84.  
  85.  
  86. <div id="main">
  87.  
  88.         <div class="container">
  89.  
  90.                 <div class="card-header bg-transparent">
  91.  
  92.                         <h3 class="mb-0" style="text-align: center;">申请友情链接</h3>
  93.  
  94.                 </div>
  95.  
  96.                 <div class="srcdict-yqlj">
  97.  
  98.                         <div class="col-lg-6 col-12">
  99.  
  100.                         <!--表单开始-->
  101.  
  102.                                 <form method="post" class="mt20" action="<?php echo $_SERVER["REQUEST_URI"]; ?>">
  103.  
  104.                                         <div class="form-group">
  105.  
  106.                                                 <label for="blink_name"><font color="red">*</font> 链接名称:</label>
  107.  
  108.                                                 <input type="text" size="40" value="" class="form-control" id="blink_name" placeholder="请输入链接名称" name="blink_name">
  109.  
  110.                                         </div>
  111.  
  112.                                         <div class="form-group">
  113.  
  114.                                                 <label for="blink_url"><font color="red">*</font> 链接地址:</label>
  115.  
  116.                                                 <input type="text" size="40" value="" class="form-control" id="blink_url" placeholder="请输入链接地址" name="blink_url">
  117.  
  118.                                         </div>
  119.  
  120.                                         <div class="form-group">
  121.  
  122.                                                 <label for="blink_lianxi">联系QQ:</label>
  123.  
  124.                                                 <input type="text" size="40" value="" class="form-control" id="blink_lianxi" placeholder="请输入联系QQ" name="blink_lianxi">
  125.  
  126.                                         </div>
  127.  
  128.                                         <div>
  129.  
  130.                                                 <input type="hidden" value="send" name="blink_form">
  131.  
  132.                                                 <button type="submit" class="btn btn-primary">提交申请</button>
  133.  
  134.                                                 <button type="reset" class="btn btn-default">重填</button>
  135.  
  136.                                                 （提示：带有<font color="red">*</font>，表示必填项~）
  137.  
  138.                                         </div>
  139.  
  140.                                 </form>
  141.  
  142.                                 <!--表单结束-->
  143.  
  144.                         </div>
  145.  
  146.                         <div class="col-lg-6 col-12">
  147.  
  148.                         <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  149.  
  150.                                 <article class="col-md-10 mt20 col-md-offset-2 view clearfix">
  151.  
  152.                                 <?php if(function_exists('cmp_breadcrumbs')) cmp_breadcrumbs();?>
  153.  
  154.                                         <p class="mt20">欢迎同类站点与本站交换友情链接，要求有权重有排名，收录良好的，内容健康，内容相关更佳。</p> <!--根据自身修改-->
  155.  
  156.                                         <p class="mt20"><strong>友链自助申请须知</strong></p>
  157.  
  158.                                         <p>&#10004; 申请前请先加上本站链接；</p>
  159.  
  160.                                         <p>&#10004; 稳定更新，每月至少发布1篇文章，最好是建站半年以上；</p>
  161.  
  162.                                         <p>&#10004; 禁止一切产品营销、广告联盟类型的网站，优先通过同类原创、内容相近的网站；</p>
  163.  
  164.                                         <p class="mt20"><strong>本站链接信息</strong></p>
  165.  
  166.                                         <?php echo sprintf( '<p>名称: %s</p>',esc_attr(get_bloginfo( 'name'))); ?></p>
  167.  
  168.                                         <?php echo sprintf( '<p>网址: %s</p>',esc_attr(get_bloginfo( 'url' ))); ?></p>
  169.  
  170.                                 </article>
  171.  
  172.                         </div>
  173.  
  174.  
  175.                 </div>
  176.  
  177.         </div>
  178.  
  179. </div>
  180.  
  181. <?php endwhile; else: ?>
  182.  
  183. <?php endif; ?>
  184.  
  185. </div>
  186.  
  187. <?php get_footer(); ?>
 第三步：主题目录 -> assets -> css -> diy.css 添加如下样式
  1. /*自助申请友情链接*/
  2.  
  3. @media screen and (max-width: 750px) {
  4.  
  5. .container .row .card  {width: 100%}
  6.  
  7. }
  8.  
  9. .container .row .pricing-deco .deco-layer {
  10.  
  11.         -webkit-transition: -webkit-transform 0.5s;
  12.  
  13.         transition: transform 0.5s;
  14.  
  15. }
  16.  
  17.  
  18. .container .row .pricing-deco:hover .deco-layer--1 {
  19.  
  20.         -webkit-transform: translate3d(15px,0,0);
  21.  
  22.         transform: translate3d(15px,0,0);
  23.  
  24. }
  25.  
  26.  
  27. .container .row .pricing-deco:hover .deco-layer--2 {
  28.  
  29.         -webkit-transform: translate3d(-15px,0,0);
  30.  
  31.         transform: translate3d(-15px,0,0);
  32.  
  33. }
  34.  
  35.  
  36. .srcdict-yqlj{
  37.  
  38.         margin-left: -10px;
  39.  
  40.         margin-right: -10px;
  41.  
  42.         display: flex;
  43.  
  44.         background:#fff;
  45.  
  46.         border: 1px solid rgba(0, 0, 0, 0.05);
  47.  
  48.         border-radius: 6px;
  49.  
  50.         box-shadow: 0 4px 12px 0 rgba(52, 73, 94, 0.1);
  51.  
  52. }
  53.  
  54.  
  55. .clearfix{
  56.  
  57.         color: #fff;
  58.  
  59.         background-color: #fc7c5f;
  60.  
  61.         margin-top: 1rem;
  62.  
  63.         padding: 1rem 1.5rem;
  64.  
  65.         border: 1px solid transparent;
  66.  
  67.         border-radius: .375rem;
  68.  
  69.         max-width: 100%;
  70.  
  71. }
  72.  
  73.  
  74. .mt20{
  75.  
  76.         margin-top: 20px;
  77.  
  78.         margin-bottom: 15px;
  79.  
  80. }
  81.  
  82. .ripro-dark .article-copyright {
  83.  
  84.     background: #f0f0f0;;
  85.  
  86.     border: 1px dashed #232425;
  87.  
  88. }
  89.  
  90. .ripro-dark #help h2, #down h2,.ripro-dark #help dt{
  91.  
  92.         color: #eee;
  93.  
  94. }
  95.  
  96.  
  97. .card-header
  98.  
  99. {
  100.  
  101.     padding: 1.25rem 1.5rem;
  102.  
  103.     font-size: 1.0625rem;
  104.  
  105.     background-color: #fff;
  106.  
  107. }
  108.  
  109. .card-header:first-child
  110.  
  111. {
  112.  
  113.     border-radius: calc(.375rem - 1px) calc(.375rem - 1px) 0 0;
  114.  
  115. }
 教程四、添加资源VIP角标
第一步：主题目录 -> inc -> theme-functions.php ，搜索“// 获取图片高度”，在“<div class=”entry-media”>”后添加如下代码
  1. <?php if ((_get_post_shop_hide()) ||(_get_post_price()!=0)&& _cao('grid_is_price',true)){
  2.  
  3.                   echo '<i class="vwip30"></i>';        
  4.  
  5.           }else{
  6.  
  7.                   echo '<i class="vwip10"></i>';        
  8.  
  9.           }?>
 第二步：主题目录 -> assets -> css -> diy.css 添加如下样式
  1. .vwip30 {
  2.  
  3.     background-position: -40px 0
  4.  
  5. }
  6.  
  7. .vwip10,.vwip30 {
  8.  
  9.     position: absolute;
  10.  
  11.     z-index: 10;
  12.  
  13.     border-radius: 5px 0 0 0
  14.  
  15. }
  16.  
  17. .vwip10,.vwip30{
  18.  
  19.     display: inline-block;
  20.  
  21.     background-image: url(../images/tuyiyi_vip4_1.png);
  22.  
  23.     background-size: auto 40px;
  24.  
  25.     vertical-align: middle;
  26.  
  27.     height: 40px;
  28.  
  29.     width: 40px;
  30.  
  31. }
  32.  
  33. .vvip10,.vwip10 {
  34.  
  35.     background-position: 0 0
  36.  
  37. }
 第三步：主题目录 -> assets -> images 放入如下图片
RiPro 主题美化教程+源码[Wordpress主题][Ripro主题美化]-度崩网-几度崩溃
教程五、修改右侧悬浮导航
第一步：主题目录打开 footer.php ，修改如图所示内容
RiPro 主题美化教程+源码[Wordpress主题][Ripro主题美化]-度崩网-几度崩溃

 

  1. <!--右侧跟随导航开始-->        
  2.  
  3.  
  4. <link rel="stylesheet" href="//at.alicdn.com/t/font_1444248_u240hsu9sns.css">
  5.  
  6. <div class="float-box">
  7.  
  8. <ul class="float-ul float-radius float-text">
  9.  
  10. <li>
  11.  
  12. <?php if (_cao('is_qiandao','1')) : ?>
  13.  
  14. <div class="author-qiandao">
  15.  
  16. <?php if (_cao_user_is_qiandao()) {
  17.  
  18. echo '<a class="click-qiandao srcdict_qd_1" href="javascript:void(0);" etap="to_top" title="签到"><i class="iconfont icon-Sign"></i><br>已签 </a>';
  19.  
  20. }else{
  21.  
  22. echo '<a class="click-qiandao srcdict_qd_1" href="javascript:void(0);" etap="to_top" title="签到"><i class="iconfont icon-Sign"></i><br>签到</a>';
  23.  
  24. }
  25.  
  26. ?>
  27.  
  28. </div>
  29.  
  30. <?php endif; ?>
  31.  
  32. </li>
  33.  
  34. </ul>
  35.  
  36.  
  37. <ul class="float-ul float-radius float-text">
  38.  
  39. <li>
  40.  
  41. <a class="qq float-border float-text" href="javascript:void(0);">
  42.  
  43. <i class="iconfont icon-qq"></i><br>客服        
  44.  
  45. <div class="float-alert-box float-radius float-qq-box" style="display: none;">
  46.  
  47. <h6>工作时间</h6>
  48.  
  49. <p>工作日：9:00 - 18:00<br>节假日：9:00 - 18:00</p>
  50.  
  51. <div class="float-qq-btn float-radius">点击咨询客服</div>
  52.  
  53. </div>
  54.  
  55. </a>
  56.  
  57. </li>
  58.  
  59. </ul>
  60.  
  61. <ul class="float-ul float-radius float-text">
  62.  
  63. <li>
  64.  
  65. <a class="fankui float-border float-text" href="https://wpa.qq.com/msgrd?v=3&uin=<?php echo _cao('site_kefu_qq');?>&site=qq&menu=yes" target="_Blank"><i class="iconfont icon-fankuijianyi"></i><br>反馈</a>
  66.  
  67. </li>
  68.  
  69. <li>
  70.  
  71. <a class="float-border float-text" href="javascript:void(0);" etap="to_full" title="
  72.  
  73. 点击全屏">
  74.  
  75. <i class="iconfont icon-quanping"></i><br>全屏
  76.  
  77. </a>
  78.  
  79. </li>
  80.  
  81. <li>
  82.  
  83. <a class="float-border float-text tap-dark" href="javascript:void(0);" etap="tap-
  84.  
  85. dark" title="夜间模式">
  86.  
  87. <i class="iconfont icon-ios-sunny"></i><br>切换
  88.  
  89. </a>
  90.  
  91. </li>
  92.  
  93. </ul>
  94.  
  95. <ul class="float-ul float-radius float-text">
  96.  
  97. <li>
  98.  
  99. <a class="float-border float-text" href="javascript:void(0);" etap="to_top" title="返回顶部">
  100.  
  101. <i class="iconfont icon-top1"></i><br>
  102.  
  103. </a>
  104.  
  105. </li>
  106.  
  107. </ul>
  108.  
  109. </div>
  110.  
  111. <script>
  112.  
  113. $(".qq").hover(function () {
  114.  
  115. $(this).children(".float-qq-box").show()
  116.  
  117. },function() {
  118.  
  119. $(this).children(".float-qq-box").hide()
  120.  
  121. });
  122.  
  123. $(".weixin").hover(function () {
  124.  
  125. $(this).children(".float-weixin-box").show()
  126.  
  127. },function() {
  128.  
  129. $(this).children(".float-weixin-box").hide()
  130.  
  131. });
  132.  
  133. </script>
  134.  
  135. <!--右侧跟随导航结束-->
 第二步：主题目录 -> assets -> css -> diy.css 添加如下样式
  1. /* 跟随开始 */
  2. @media (max-width: 767px) {
  3.  
  4.         .search-form{
  5.  
  6.                 display: none
  7.  
  8.         }
  9.  
  10. }
  11.  
  12.  
  13. .showscaidan:before {
  14.  
  15.   content: "eaf1";
  16.  
  17. }
  18.  
  19.  
  20. .shows {
  21.  
  22.   font-family: "show" !important;
  23.  
  24.   font-size: 16px;
  25.  
  26.   font-style: normal;
  27.  
  28.   -webkit-font-smoothing: antialiased;
  29.  
  30.   -moz-osx-font-smoothing: grayscale;
  31.  
  32. }
  33.  
  34.  
  35. @font-face {font-family: "iconfont";
  36.  
  37.   src: url('//at.alicdn.com/t/font_1380870_o08dhovorbr.eot?t=1567357317161'); /* IE9 */
  38.  
  39.   src: url('//at.alicdn.com/t/font_1380870_o08dhovorbr.eot?t=1567357317161#iefix') format('embedded-opentype'), /* IE6-IE8 */
  40.  
  41.   url('//at.alicdn.com/t/font_1380870_o08dhovorbr.woff2?t=1567357317161') format('woff2'),
  42.  
  43.   url('//at.alicdn.com/t/font_1380870_o08dhovorbr.woff?t=1567357317161') format('woff'),
  44.  
  45.   url('//at.alicdn.com/t/font_1380870_o08dhovorbr.ttf?t=1567357317161') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  46.  
  47.   url('//at.alicdn.com/t/font_1380870_o08dhovorbr.svg?t=1567357317161#iconfont') format('svg'); /* iOS 4.1- */
  48.  
  49. }
  50.  
  51.  
  52.  
  53. .iconfont {
  54.  
  55.   font-family: "iconfont" !important;
  56.  
  57.   font-size: 16px;
  58.  
  59.   font-style: normal;
  60.  
  61.   -webkit-font-smoothing: antialiased;
  62.  
  63.   -moz-osx-font-smoothing: grayscale;
  64.  
  65. }
  66.  
  67.  
  68. .icon-QQqun:before {
  69.  
  70.   content: "e600";
  71.  
  72. }
  73.  
  74.  
  75. .icon-weixin:before {
  76.  
  77.   content: "e7e5";
  78.  
  79. }
  80.  
  81.  
  82. .icon-qqq:before {
  83.  
  84.   content: "e623";
  85.  
  86. }
  87.  
  88.  
  89. .icon-qqqun2:before {
  90.  
  91.   content: "e721";
  92.  
  93. }
  94.  
  95.  
  96. .icon-qq:before {
  97.  
  98.   content: "e607";
  99.  
  100. }
  101.  
  102.  
  103. .icon-qqq1:before {
  104.  
  105.   content: "e601";
  106.  
  107. }
  108.  
  109.  
  110. .icon-QQmian:before {
  111.  
  112.   content: "e630";
  113.  
  114. }
  115.  
  116.  
  117. .icon-fankui:before {
  118.  
  119.   content: "e61e";
  120.  
  121. }
  122.  
  123.  
  124. .icon-rijianmoshi:before {
  125.  
  126.   content: "e626";
  127.  
  128. }
  129.  
  130.  
  131. .icon-qqqun1:before {
  132.  
  133.   content: "e679";
  134.  
  135. }
  136.  
  137.  
  138. .icon-quanping2:before {
  139.  
  140.   content: "e6e2";
  141.  
  142. }
  143.  
  144.  
  145. .icon-qqqun:before {
  146.  
  147.   content: "e603";
  148.  
  149. }
  150.  
  151.  
  152. .icon-dingbu:before {
  153.  
  154.   content: "e643";
  155.  
  156. }
  157.  
  158.  
  159. .icon-gongzhonghao:before {
  160.  
  161.   content: "e618";
  162.  
  163. }
  164.  
  165.  
  166. .icon-VIPx:before {
  167.  
  168.   content: "e628";
  169.  
  170. }
  171.  
  172.  
  173. .icon-quanping:before {
  174.  
  175.   content: "e682";
  176.  
  177. }
  178.  
  179.  
  180. .icon-VIP:before {
  181.  
  182.   content: "e6b2";
  183.  
  184. }
  185.  
  186.  
  187. .icon-quanping1:before {
  188.  
  189.   content: "e887";
  190.  
  191. }
  192.  
  193.  
  194. .icon-yewan:before {
  195.  
  196.   content: "e669";
  197.  
  198. }
  199.  
  200.  
  201. .icon-huabanfuben-copy:before {
  202.  
  203.   content: "e6b5";
  204.  
  205. }
  206.  
  207.  
  208. .icon-Fill:before {
  209.  
  210.   content: "e6bd";
  211.  
  212. }
  213.  
  214.  
  215.  
  216. .iconfont {
  217.  
  218.   font-family: "iconfont" !important;
  219.  
  220.   font-size: 16px;
  221.  
  222.   font-style: normal;
  223.  
  224.   -webkit-font-smoothing: antialiased;
  225.  
  226.   -moz-osx-font-smoothing: grayscale;
  227.  
  228. }
  229.  
  230.  
  231. .float-radius{-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}
  232.  
  233. .float-text{color:#f9b015} /* 字体颜色 */
  234.  
  235. .ripro-dark a.float-text{color:#f9b015} /* 夜晚模式字体颜色 */
  236.  
  237. .float-icon{color:#f9b015} /* 图标颜色 */
  238.  
  239. .float-hover{color:#f9b015} /* 鼠标掠过字体颜色 */
  240.  
  241. .flost-hover-bg{background-color:#f9b015} /* 鼠标掠过背景颜色 */
  242.  
  243. .float-border{border-color:#ececec !important} /* 边框颜色 */
  244.  
  245. .float-box{
  246.  
  247.         width:68px;        /* 宽度 修改之后要修改float-alert-box里的right值，right值计算方式：此数值减去（5*2+2） */
  248.  
  249.         padding:5px;/* 按钮框边缘留出像素 */
  250.  
  251.         font-size:14px;/* 按钮字体大小 */
  252.  
  253.         position:fixed;right:0;top:75%;z-index:9997;
  254.  
  255.         margin-top:-303px;        /* 自身高度的一半 */
  256.  
  257.         _position: absolute;_top:expression(eval(document.documentElement.scrollTop+100));        /* 兼容低版本IE */
  258.  
  259. }
  260.  
  261. .float-ul,.float-ul li{margin:0;padding:0;}
  262.  
  263. .float-ul{margin-top:5px;text-align:center;line-height:1.2;list-style:none;background-color:#FFF;box-shadow: 0 2px 5px #e6e6e6;}
  264.  
  265. .float-ul .iconfont{font-size:22px;line-height:22px;}
  266.  
  267. .float-ul li a{display:block;width:100%;padding:10px 0;line-height:18px;}
  268.  
  269. .float-ul li a:hover{
  270.  
  271.   background: linear-gradient(-125deg,#f9b015 0%, #f7b832 100%);box-shadow: 0 8px 10px rgba(32,160,255,.3);color:#FFF;}
  272.  
  273. .float-ul li a.qq{-moz-border-top-left-radius:4px;-moz-border-top-right-radius:4px;border-top-left-radius:4px;border-top-right-radius:4px;position: relative;}
  274.  
  275. .float-ul li a.weixin{position: relative;}
  276.  
  277. .float-ul li a.fankui{-moz-border-bottom-left-radius:4px;-moz-border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-bottom-right-radius:4px;}
  278.  
  279. .float-ul li a.fankui .iconfont{font-size:22px;line-height:22px;}
  280.  
  281. .float-alert-box{width:180px;height:185px;background-color:#FFF;border:1px solid #ececec;position: absolute;right:56px;top:0;z-index:9998;display:none;}
  282.  
  283. .srcdict_qd_1:hover {
  284.  
  285.     background: #ffffff;
  286.  
  287.     box-shadow: 0 8px 10px rgba(32,160,255,.3);
  288.  
  289.     color: #0295f9;
  290.  
  291. }
  292.  
  293.  
  294. .srcdict_qd_1{
  295.  
  296.     background: linear-gradient(-125deg,#f9b015 0%, #f7b832 100%);
  297.  
  298.     box-shadow: 0 8px 10px rgba(32,160,255,.3);
  299.  
  300.     color: #FFF;
  301.  
  302. }
  303.  
  304. .float-qq-box{padding:20px 15px;}
  305.  
  306. .float-weixin-box{padding:15px;}
  307.  
  308. .float-weixin-box img{margin:0 auto;}
  309.  
  310. .float-weixin-box p{font-weight:600;color:#f9b015;margin-bottom:5px;}
  311.  
  312. .float-alert-box h6{font-size:20px;color:#f9b015;}
  313.  
  314. .float-alert-box p{line-height:24px;}
  315.  
  316. .float-ul li .float-qq-box{color:#666;}
  317.  
  318. .float-ul li .float-weixin-box{color:#666;top:-61px;}
  319.  
  320. .float-qq-btn{padding:10px;background-color:#f9b015;color:#FFF;}
  321.  
  322. @media screen and (max-width:639px){.float-box{display:none;}}
  323.  
  324. /* 跟随结束 */

相关推荐:

  1. Ripro主题添加常见问题FAQ[WordpressRipro主题美化]
  2. RiPro主题美化之二级菜单添加小圆点图标[wordpress美化教程]
  3. 文章页标题美化，添加文章页“常见问题FAQ”:RiPro日主题美化教程+源码[Wordpress主题]
  4. WordPress Ripro主题VIP独立介绍页美化教程+源文件[Wordpress主题美化]
  5. riproV6.6.5主题美化·网站实现复制内容弹出提示框[ripro美化教程]
  6. 怎么将qrcode.js生成二维码添加到网站上？[wordpress开发教程]
  7. 添加小铅笔 -WordPress Customize API[wordpress开发教程]
  8. wordpress怎么用PHP传递变量给JS[wordpress开发教程]
RiPro主题RiPro主题美化RiPro主题美化教程Windows主题美化
WordPress教程

wordpress安装新模板导致网站无法访问[Wordpress建站教程]

2019-11-29 14:40:11

WordPress教程

文章页标题美化，添加文章页“常见问题FAQ”:RiPro日主题美化教程+源码[Wordpress主题]

2019-12-16 15:50:08

猜你喜欢
本站所发布的一切源码、模板、应用等文章仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版，购买注册，得到更好的正版服务。如有侵权。本站内容适用于DMCA政策。若您的权利被侵害，请与我们联系处理，站长 QQ: 84087680 或 点击右侧 私信：盾给网 反馈，我们将尽快处理。
⚠️
本站所发布的一切源码、模板、应用等文章仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版，购买注册，得到更好的正版服务。如有侵权。本站内容适用于DMCA政策。
若您的权利被侵害，请与我们联系处理，站长 QQ: 84087680 或 点击右侧 私信：盾给网 反馈，我们将尽快处理。
0 条回复 A文章作者 M管理员
欢迎您，新朋友，感谢参与互动！
    暂无讨论，说说你的看法吧

请输入验证码

请输入图片中的验证码
点击发送按钮获取验证码

取消
×
×
￥undefined
请打开手机使用微信扫码支付
「」
×

....支付确认中....

「」
×
支付金额

￥

undefined
×
积分支付
您当前的积分为0

检测到您未绑定微信账户，请先绑定微信

立刻绑定
确定
×

打开微信扫一扫

扫码并「关注我们的公众号」安全快捷登录

×

下载海报：

个人中心
购物车
优惠劵
今日签到
私信列表
搜索

  • 扫码打开当前页

  • 官方QQ群

  • 微信公众号

  • 站长微信

返回顶部