More implementation Interface Optimization

More implementation Interface Optimization

Previously, I felt that this default Interface was a bit ugly (of course I thought it was), but it didn't mean where it was.

The original intention was to change it. Prompt text in the comment boxGoogle Baidu cannot find a lot of information.

At last, I found that the backend management in the lecture can be customized.

When I checked the information, I found some styles of others, so I used them for reference and changed this by the way...

 

Improved the following content

 

Modify the background color of a comment box

 

#ds-thread #ds-reset .ds-textarea-wrapper {background: #ffffff;}

Modify the text format of a comment box

 

 

#ds-thread #ds-reset .ds-textarea-wrapper textarea,#ds-thread #ds-reset .ds-textarea-wrapper .ds-hidden-text{display: block;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;line-height: 20px;border: none;}

Custom avatar css Effect

 

 

#ds-reset .ds-avatar img,#ds-reset .ds-avatar img:hover{       -webkit-animation-fill-mode: both;       -moz-animation-fill-mode: both;       -ms-animation-fill-mode: both;       -o-animation-fill-mode: both;       animation-fill-mode: both;       -webkit-animation-duration: 0s;       -moz-animation-duration: 0s;       -ms-animation-duration: 0s;       -o-animation-duration: 0s;       animation-duration: 0s;       -webkit-animation-duration: 0.7s;       -moz-animation-duration: 0.7s;       -ms-animation-duration: 0.7s;       -o-animation-duration: 0.7s;       animation-duration: 0.7s;   }     @-webkit-keyframes swing {       20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }       20% { -webkit-transform: rotate(15deg); }          40% { -webkit-transform: rotate(-10deg); }       60% { -webkit-transform: rotate(5deg); }           80% { -webkit-transform: rotate(-5deg); }          100% { -webkit-transform: rotate(0deg); }   }     @-moz-keyframes swing {       20% { -moz-transform: rotate(15deg); }         40% { -moz-transform: rotate(-10deg); }       60% { -moz-transform: rotate(5deg); }          80% { -moz-transform: rotate(-5deg); }         100% { -moz-transform: rotate(0deg); }   }     @-o-keyframes swing {       20% { -o-transform: rotate(15deg); }           40% { -o-transform: rotate(-10deg); }       60% { -o-transform: rotate(5deg); }        80% { -o-transform: rotate(-5deg); }           100% { -o-transform: rotate(0deg); }   }     @keyframes swing {       20% { transform: rotate(15deg); }          40% { transform: rotate(-10deg); }       60% { transform: rotate(5deg); }           80% { transform: rotate(-5deg); }          100% { transform: rotate(0deg); }   }     #ds-reset .ds-avatar img:hover{       -webkit-transform-origin: top center;       -moz-transform-origin: top center;       -o-transform-origin: top center;       transform-origin: top center;       -webkit-animation-name: swing;       -moz-animation-name: swing;       -o-animation-name: swing;       animation-name: swing;   }  

Modify release button

 

 

#ds-thread #ds-reset .ds-post-button {font-weight: normal;font-size: 12px;text-shadow: none;border: 0;line-height: 23px;width: 100px;background: #00a3cf;color: #fff;}

Let's look at the comparison before and after the modification.