Beautify robin begin topic sharing button code record

Watson Blog
Watson Blog
Watson Blog
one thousand four hundred and twenty-one
article
nine
comment
November 25, 2017 00:15:10 WordPress comment five hundred and thirty-four two Reading mode

The effect picture after beautifying the robin begin theme sharing button is as follows:

Beautify robin begin topic sharing button code record

Find the following code in the topic css and replace it.

  1. /**Like to share**/   
  2. #social  {  
  3.      position :  relative ;   
  4.      margin :  50px   auto ;   
  5. }  
  6. .social-main {  
  7.      position :  relative ;   
  8.      margin : 0  auto ;   
  9.      width :  243px ;   
  10. }  
  11. .social-main span {  
  12.      float :  left ;   
  13. }  
  14. .social-main a {  
  15.      color :  #999 ;   
  16.      line-height :  36px ;   
  17.      border -radius:  2px ;   
  18. }  
  19. .share-s a, .shang-s a {  
  20.      text-align :  center ;   
  21. }  
  22. .like a {  
  23.      float :  left ;   
  24.      padding-left :  15px ;   
  25. }  
  26. .social-main a:hover {  
  27.      background :  #f1f1f1 ;   
  28.      color :  #444 ;   
  29.     transition:  all  0.2s ease-in 0s;   
  30. }  
  31. .like a {  
  32.      background :  #fff ;   
  33.      width :  120px ;   
  34.      display :  block ;   
  35.      border :  1px   solid   #ddd ;   
  36. }  
  37. .share-s a {  
  38.      background :  #fff ;   
  39.      width :  120px ;   
  40.      display :  block ;   
  41.      padding-left :  15px ;   
  42.      border :  1px   solid   #ddd ;   
  43. }  
  44. .social-main i {  
  45.      color :  #999 ;   
  46.      margin : 0  5px  0 0;   
  47. }  
  48. /**Appreciation**/   
  49. .shang-empty {  
  50.      position :  absolute ;   
  51.      left :  90px ;   
  52.      top :  0px ;   
  53.      width :  62px ;   
  54.      height :  38px ;   
  55.      overflow :  hidden ;   
  56. }  
  57. .shang-empty span {  
  58.      background :  #fff ;   
  59.      width :  60px ;   
  60.      height :  60px ;   
  61.      display :  block ;   
  62.      margin : - 10px  0 0 0;   
  63.      border -radius:  60px ;   
  64.      border :  1px   solid   #ddd ;   
  65. }  
  66. .shang-p a {  
  67.      position :  absolute ;   
  68.      background :  #fff ;   
  69.      left :  96px ;   
  70.      top : - 5px ;   
  71.      width :  48px ;   
  72.      height :  48px ;   
  73.      font-size :  16px ;   
  74.      line-height :  45px ;   
  75.      display :  block ;   
  76.      border :  1px   solid   #ddd ;   
  77.      border -radius:  40px ;   
  78.      left :  101px \9;   
  79.      top : 0\9;   
  80.      width :  38px \9;   
  81.      height :  38px \9;   
  82.      line-height :  35px \9;   
  83. }  
  84. .shang-s {  
  85.      height :  37px ;   
  86. }  
  87. #shang  {  
  88.      width :  280px ;   
  89.      display :  block ;   
  90. }  
  91. .shang-img {  
  92.      float :  left ;   
  93. }  
  94. .shang-img img {  
  95.      width :  140px ;   
  96.      height :  auto ;   
  97. }  
  98. .shang-main h4 {  
  99.      font-size :  15px ;   
  100.      font-size : 1.5rem;   
  101.      text-align :  center ;   
  102.      margin-bottom :  10px ;   
  103. }  
  104. .shang-main i {  
  105.      color :  #ff0000 ;   
  106. }  
  107. /**Share**/   
  108. #share  {  
  109.      position :  absolute ;   
  110.      top : - 60px ;   
  111.     rightright: - 29px ;   
  112.      width :  302px ;   
  113.      height :  68px ;   
  114.      display :  none ;   
  115.      z-index : 999;   
  116. }  
  117. #share  a {  
  118.      float :  left ;   
  119.      background :  #999 ;   
  120.      font-size :  20px  ! important;   
  121.      color :  #fff ;   
  122.      width :  40px ;   
  123.      height :  40px ;   
  124.      line-height :  40px ;   
  125.      margin-left :  4px ;   
  126.      padding-left : 0;   
  127.      text-align :  center ;   
  128.      border -radius:  3px ;   
  129.      background : rgba(128, 128, 128, 0.9);   
  130. }  
  131. #share  .be-addbox:hover {  
  132.      background :  #7ab951  ! important;   
  133. }  
  134. #share  .be-qzone:hover {  
  135.      background :  #ff7400  ! important;   
  136. }  
  137. #share  .be-stsina:hover {  
  138.      background :  #ff0000  ! important;   
  139. }  
  140. #share  .be-tqq:hover {  
  141.      background :  #46c0e6  ! important;   
  142. }  
  143. #share  .be-renren:hover {  
  144.      background :  #3b68ac  ! important;   
  145. }  
  146. #share  .be-weixin:hover {  
  147.      background :  #006f1d  ! important;   
  148. }  
  149. .bd_weixin_popup {  
  150.      height :  250px  ! important;   
  151. }  
  152. .bd_weixin_popup_foot {  
  153.      display :  none ;   
  154. }  

Replace it with the following code.

  1. /**Like to share**/   
  2. #social  {  
  3.      position :  relative ;   
  4.      margin :  50px   auto ;   
  5. }  
  6. .social-main {  
  7.      position :  relative ;   
  8.      margin : 0  auto ;   
  9.      width :  243px ;   
  10. }  
  11. .social-main span {  
  12.      float :  left ;   
  13. }  
  14. .social-main a {  
  15.      color :  #fff ;   
  16.      line-height :  36px ;   
  17.      border -radius:  40px ;   
  18. }  
  19. .share-s a, .shang-s a {  
  20.      text-align :  center ;   
  21. }  
  22. .like a {  
  23.      float :  left ;   
  24.      padding-left :  15px ;   
  25. }  
  26. .social-main a:hover {  
  27.      background :  #696969 ;   
  28.      color :  #fff ;   
  29.     transition:  all  0.2s ease-in 0s;   
  30. }  
  31. .like a {  
  32.      background :  #FF0000 ;   
  33.      width :  120px ;   
  34.      display :  block ;   
  35.      border :  1px   solid   #ddd ;   
  36. }  
  37. .share-s a {  
  38.      background :  #0000FF ;   
  39.      width :  120px ;   
  40.      display :  block ;   
  41.      padding-left :  15px ;   
  42.      border :  1px   solid   #ddd ;   
  43. }  
  44. .social-main i {  
  45.      color :  #fff ;   
  46.      margin : 0  5px  0 0;   
  47. }  
  48. /**Appreciation**/   
  49. .shang-empty {  
  50.      position :  absolute ;   
  51.      left :  90px ;   
  52.      top :  0px ;   
  53.      width :  62px ;   
  54.      height :  38px ;   
  55.      overflow :  hidden ;   
  56. }  
  57. .shang-empty span {  
  58.      background :  #fff ;   
  59.      width :  60px ;   
  60.      height :  60px ;   
  61.      display :  block ;   
  62.      margin : - 10px  0 0 0;   
  63.      border -radius:  60px ;   
  64.      border :  1px   solid   #ddd ;   
  65. }  
  66. .shang-p a {  
  67.      position :  absolute ;   
  68.      background :  #ffab2e ;   
  69.      left :  96px ;   
  70.      top : - 5px ;   
  71.      width :  48px ;   
  72.      height :  48px ;   
  73.      font-size :  16px ;   
  74.      line-height :  45px ;   
  75.      display :  block ;   
  76.      border :  1px   solid   #ddd ;   
  77.      border -radius:  40px ;   
  78.      left :  101px \9;   
  79.      top : 0\9;   
  80.      width :  38px \9;   
  81.      height :  38px \9;   
  82.      line-height :  35px \9;   
  83. }  
  84. .shang-s {  
  85.      height :  37px ;   
  86. }  
  87. #shang  {  
  88.      width :  280px ;   
  89.      display :  block ;   
  90. }  
  91. .shang-img {  
  92.      float :  left ;   
  93. }  
  94. .shang-img img {  
  95.      width :  140px ;   
  96.      height :  auto ;   
  97. }  
  98. .shang-main h4 {  
  99.      font-size :  15px ;   
  100.      font-size : 1.5rem;   
  101.      text-align :  center ;   
  102.      margin-bottom :  10px ;   
  103. }  
  104. .shang-main i {  
  105.      color :  #ff0000 ;   
  106. }  
  107. /**Share**/   
  108. #share  {  
  109.      position :  absolute ;   
  110.      top : - 60px ;   
  111.     rightright: - 29px ;   
  112.      width :  302px ;   
  113.      height :  68px ;   
  114.      display :  none ;   
  115.      z-index : 999;   
  116. }  
  117. #share  a {  
  118.      float :  left ;   
  119.      background :  #999 ;   
  120.      font-size :  20px   
  121.      color :  #fff ;   
  122.      width :  40px ;   
  123.      height :  40px ;   
  124.      line-height :  40px ;   
  125.      margin-left :  4px ;   
  126.      padding-left : 0;   
  127.      text-align :  center ;   
  128.      border -radius:  20px ;   
  129.      background : rgba(128, 128, 128, 0.9);   
  130. }  
  131. #share  .be-addbox {  
  132.      color :  #7ab951 ;   
  133.      border :  1px   solid   #7ab951 ;   
  134.      background :  #fff ;   
  135. }  
  136. #share  .be-addbox:hover {  
  137.      background :  #7ab951  ! important;   
  138.      color :  #fff  ! important;   
  139. }  
  140. #share  .be-qzone {  
  141.      color :  #ff7400 ;   
  142.      border :  1px   solid   #ff7400 ;   
  143.      background :  #fff ;   
  144. }  
  145. #share  .be-qzone:hover {  
  146.      background :  #ff7400  ! important;   
  147.      color :  #fff  ! important;   
  148. }  
  149. #share  .be-stsina {  
  150.      color :  red ;   
  151.      border :  1px   solid   red ;   
  152.      background :  #fff ;   
  153. }  
  154. #share  .be-stsina:hover {  
  155.      background :  #ff0000  ! important;   
  156.      color :  #fff  ! important;   
  157. }  
  158. #share  .be-tqq {  
  159.      color :  #46c0e6 ;   
  160.      border :  1px   solid   #46c0e6 ;   
  161.      background :  #fff ;   
  162. }  
  163. #share  .be-tqq:hover {  
  164.      background :  #46c0e6  ! important;   
  165.      color :  #fff  ! important;   
  166. }  
  167. #share  .be-renren {  
  168.      color :  #3b68ac ;   
  169.      border :  1px   solid   #3b68ac ;   
  170.      background :  #fff ;   
  171. }  
  172. #share  .be-renren:hover {  
  173.      background :  #3b68ac  ! important;   
  174.      color :  #fff  ! important;   
  175. }  
  176. #share  .be-weixin {  
  177.      color :  #006f1d ;   
  178.      border :  1px   solid   #006f1d ;   
  179.      background :  #fff ;   
  180. }  
  181. #share  .be-weixin:hover {  
  182.      background :  #00ff43  ! important;   
  183.      color :  #fff  ! important;   
  184. }  
  185. .bd_weixin_popup {  
  186.      height :  250px  ! important;   
  187. }  
  188. .bd_weixin_popup_foot {  
  189.      display :  none ;   
  190. }  

Watson Blog
  • This article is written by Published on November 25, 2017 00:15:10
  • This article is collected and sorted by the website of Mutual Benefit, and the email address for problem feedback is: wosnnet@foxmail.com , please keep the link of this article for reprinting: https://wosn.net/813.html

Comment