CSS properties used in the theme modification of the blog park

Source: Internet
Author: User

Style Overrides

The ID selector is larger than the class selector.

For the ID selector that you want to overwrite in the original theme, use !import overrides.

For CSS properties that you want to cancel in the original theme, use the inherit .

Floating elements

Set to, in order for the position component to fixed float on top of other components z-index .

Fuck me on GitHub

element.style{    top:0;    right:0;    border:0;    z-index:100;    position:fixed;}
Transparent input Box

Set background to transparent make the input box transparent;

borderset to 0 to hide the border, then append the bottom style, note the order, and the style that is declared later overrides the previous.

input#nav_search{    background:transparent;    transition:.6s ease-in-out;    border:0;    border-bottom:1pxsolid#fff;    color:#fff;    width:5pc;}

A change can be declared after the same element attribute changes in CSS3, that is transition . transition: all .6s ease-in-out; Represents a complete animation within 0.6s.

Icon Gallery

Introduce Http://fontawesome.io. For example, the search icon is
fa fa-search

Spacing Settings between components

Use padding and margin to set the spacing instead of declaring width and hight after adjusting the center.

Set Div rounded Corners
#post_detail.postTitle{    border-top-right-radius:10px;    border-top-left-radius:10px;}
Set Font size
#post_detail.postTitle{    font-size:30px;    font-weight:400;}
Set a three-dimensional border
#post_detail{    box-shadow:08px17px0rgba(0,0,0,.2)06px20px0rgba(0,0,0,.19);}
Set up dashed split for announcements
.my-profile{    border-bottom:1pxdashed#333;    padding-bottom:25px;    margin-bottom:25px;}
Set the color to the left of the reference block
#cnblogs_post_body ul.post-copyright{    border-left:3pxsolid#ff1700;    background-color:#f9f9f9;}
Scramble the vertical rows of a category
.catListPostCategory{    display:inline-block;}

CSS properties used in the theme modification of the blog park

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.