More comments plug-in custom CSS style beautification

Let's talk about the beautification of custom CSS styles. I have been talking about comments for a while. Some styles seem awkward, so I just want to beautify it a little. How can I beautify it? There is a custom CSS in the personalized settings mentioned above. Just paste the CSS style code you want to change and save it. Note: If some attributes are not modified, add one after each attribute! Important, you can see the effect by setting the priority to the highest level, for example, padding: 10px; if this attribute does not take effect, you need to change it like this: padding: 10px! Important; this will take effect. The following is my blog's custom CSS multi-statement style. Share it and use it as needed. Note: The theme I want to talk about is BlueBox, which is not the default one. Please be optimistic;
 

The code is as follows:

Copy code

# Ds-reset. ds-avatar img { Width: 54px; height: 54px;/* set the length and width of the image. Change the value based on your own comment box */ Border-radius: 27px;/* Set the image rounded corner effect. Here, I directly set the pixel that exceeds width/2, that is, the circle */ -Webkit-border-radius: 27px;/* rounded corner effect: Compatible with webkit browsers */ -Moz-border-radius: 27px; Box-shadow: inset 0-1px 0 # 3333sf;/* Set the image shadow effect */ -Webkit-box-shadow: inset 0-1px 0 # 3333sf; -Webkit-transition: 0.4 s; -Webkit-transition:-webkit-transform 0.4 s transfer-out; Transition: transform 0.4 s rotate-out;/* the change time is set to 0.4 seconds (the change action is to rotate the following image for 360 read )*/ -Moz-transition:-moz-transform 0.4 s transition-out; } # Ds-reset. ds-avatar img: hover { /* Set the CSS style when the mouse is suspended in the Avatar */ Box-shadow: 0 0 10px # fff; rgba (255,255,255,. 6), inset 0 0 20px rgba (255,255,255, 1 ); -Webkit-box-shadow: 0 0 10px # fff; rgba (255,255,255,. 6), inset 0 20px rgba (255,255,255, 1 ); Transform: rotateZ (360deg);/* image rotation 360 degrees */ -Webkit-transform: rotateZ (360deg ); -Moz-transform: rotateZ (360deg ); } . Ds-account-control {width: 90px! Important ;} . Ds-icon-settings {position: relative! Important; left: 10px! Important ;} . Ds-account-control ul {right: 0px! Important ;} . Ds-account-control ul li a {line-height: 22px! Important; padding-right: 10! Important ;} # Ds-reset li. ds-tab a. ds-current {padding: 2px 6px! Important ;} /* Like button */ # Ds-reset a. ds-like-thread-button {padding: 4px 8px! Important ;} /* Number of comment reminders */ # Ds-reset a. ds-unread-comments-count {padding: 1px 4px! Important ;} # Ds-thread # ds-reset. ds-login-buttons. ds-more-services {width: 60px ;} # Ds-thread # ds-reset. ds-sort a {margin-left: 14px ;} # Ds-ctx {border: 1px solid # ddd! Important; border-bottom: none! Important; background: # fefefefe! Important ;} # Ds-reset # ds-ctx {max-width: 100%! Important ;} . Ds-ctx-entry {border-bottom: solid 1px # ddd! Important; padding: 12px 20px! Important ;} . Ds-comment-body p {padding-left: 30px! Important ;} . Ds-post-button {width: 80px! Important ;} . Ds-post-options. ds-sync {right: 80px! Important ;} . Ds-textarea-wrapper textarea, # ds-thread # ds-reset. ds-textarea-wrapper. ds-hidden-text {font-size: 12px! Important ;} # Ds-reset a {padding: 0px! Important ;} . Ds-more-services {padding: 0! Important ;}

Effect

No effect before customizing CSS

Effect after use

Share To: 0

Supplement: Collection of CSS custom settings

1. Hide the content shared at the bottom of the comment box in the weibo QQ space.
. Ds-sync {display: none! Important ;}
2. Define the background of the comment box
You just need to change the url to the image address you want. It seems that you need an absolute path. It is not clear. I use an absolute path.

. Ds-textarea-wrapper.ds-rounded-top {background: # ffffff url (you want to set the comment box background image address) no-repeat right bottom! Important ;}
To describe the comment, the background color of the topic is used as the background of the overall comment box, which may make the comment not very conspicuous. You can enter the following code to change the background color of the overall comment box:

# Ds-thread {background: # ffffff ;}
The corner of the comment background is right by default. If you want to change it to a rounded corner, enter the following code (only valid in firefox, chrome, and later IE browsers, and ie6, will still be displayed at right angles):

# Ds-thread {border-radius: 5px ;}
Note: # ffffff can be replaced with the color you want to adapt to the comment text. For more colors, see the image color table on Wikipedia.

3. Hide the gradient background at the bottom of the comment box
# Ds-reset. ds-gradient-bg {background: none! Important ;}
Although there is a strong sense of stereoscopy, it is not consistent with the overall style of the topic and hidden. In this way, the bottom is transparent.

4. Define the font and color in the comment box
# Ds-thread # ds-reset. ds-textarea-wrapper textarea, # ds-thread # ds-reset. ds-textarea-wrapper. ds-hidden-text {font-family: '''Microsoft yahei '! Important; font-size: 12px; letter-spacing: 1px ;}
This seems to define the text font entered in the comment box. Well, it seems to be. To modify the font color of the comment body, enter the following code:

# Ds-thread # ds-reset. ds-comment-body p {color: # ffffff ;}
When you modify a part of the label style that is not shown in the preceding example, try to add :! Important

5. Define the font of the publish button and the gradient background.
# Ds-thread # ds-reset. ds-post-button {font-family: '''Microsoft yahei '! Important; font-weight: bold; font-size: 12px; background: none! Important; color: # 49976b! Important ;}
6. Hide the latest ranking button in the top right corner of the comment.
# Ds-thread # ds-reset. ds-sort {display: none ;}
7. Hide the background color and border of the total number of comments in the top left corner
# Ds-thread # ds-reset li. ds-tab a. ds-current {background: none; border: none ;}
8. Hide the copyright at the bottom
Many friends are looking for this code. However, it is not recommended. After all, it is better to display the copyright information.

# Ds-thread # ds-reset. ds-powered-by {display: none ;}
9. Define various text highlight colors and floating window highlight colors. Use the template color to set the following color values.
/* Define the highlighted font color */
# Ds-reset. ds-highlight {color: # 49976b! Important ;}
/* Define other highlighted colors in the comment box */
# Ds-thread # ds-reset # ds-bubble a {color: # 49976b! Important ;}
/* Define other highlighted colors in the comment box */
# Ds-thread # ds-reset # ds-bubble {color: # 49976b! Important ;}
/* Define other highlighted colors in the comment box */
# Ds-reset # ds-ctx. ds-ctx-entry. ds-ctx-head a {color: # 49976b! Important ;}
/* Define other highlighted colors in the comment box */
# Ds-thread # ds-reset a. ds-comment-context: hover {color: # 49976b! Important ;}
/* Define other highlighted colors in the comment box */
# Ds-thread # ds-reset a. ds-comment-context {color: # 49976b! Important ;}
10. Left and right margins of the comment box
If the left and right margins of your comment box are too small (the comment box is too wide), enter the following code to adjust the width until the width of the comment box is properly displayed on the page:

# Ds-thread {padding: 24px ;}
Or

# Ds-thread {margin: 24px ;}
If your comment box is too narrow, it may be that the width is set to an inappropriate value. Enter the following code to make the width automatically stretch:

# Ds-thread {width: auto ;}
11. Highlighted font color
The highlighted font includes "n comments", "n Weibo posts", the color of the comments name, and the display color (in most cases, the color is red by default). Enter the following code:

# Ds-thread # ds-reset. ds-highlight {color: # ffffff! Important ;}
These are all ready-made CSS code that can be directly copied. Of course, you can modify the color or other attributes on your own. You can achieve the desired effect.