Input box background colors. txt

Before using the code, you must have an understanding of Hexun's blog. log on to the blog and click to enter the blog management background. Common settings and interface style connections can be added to the Code. The general setting "introduction or announcement" is the main code writing area. However, my personal test found that the "title" and "subtitle" can also be added to the Code. If the two are used, the code can be written freely. There is nothing to say in the "introduction or announcement". You just need to paste the code you have found on the Internet directly. I will not talk about it more, here we mainly talk about changing CSS in the interface style to personalize your blog. If you see the code, you will be dizzy and take it with me. Code address: Ghost.

The following describes the interface style settings:
1. Change the template style to a simple style (required ):
The following examples are all about simple: simple style, which has the least limitations.
2. Enter the interface style settings:
Write the modified CSS code in the Custom style code and save it. Click (default style code and description) to view the default style code, post it here. There are many parts below. We can only change one part, and just post the part you changed to the custom style code, you don't need to post it if you haven't changed it. The following sections explain how to use the most common code before you start.
Illustration code: Background-image: URL (write your image address here );
Background transparent code: Background-color: transparent. This can be used when you do not need to add a background to a certain area.
Background color code: Background-color: # f6f6f6; specifies the background color.
In the following description, () is to remove the code when adding the content.

1. Here we define the attributes of the entire page. Here we will focus on the following. If you want to add a background image to the entire page, it will be here. Insert the illustration code in {}: Background-image: URL (the address of the image you want to insert here );
<! -- Body -->
Body {
Font-size: 12px; (the font size here)
Font-family: tahoma, verdana, ""; (font here)
Background-color: # cccccc; (background color)
Background-position: Top left; (background image position)
Background-repeat: Repeat-X; (repeat: the background image is tiled vertically and horizontally. No-repeat: the background image is not tiled. Repeat-X: the background image is
Tiled horizontally, repeat-Y: the background image is tiled vertically)
Background-Attachment: fixed)
Cursor: URL ("http://www.mumayi.net/mumayi.cur"); (this is the way the Mouse looks, you can replace http://www.mumayi.net/mumayi.curwith your web
.)
SCROLLBAR-FACE-COLOR: # 8cc02c)
SCROLLBAR-HIGHLIGHT-COLOR: # ffffff;
SCROLLBAR-SHADOW-COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR: #95bd40;
SCROLLBAR-ARROW-COLOR: # FFFF00;
SCROLLBAR-TRACK-COLOR: #008000;
SCROLLBAR-DARKSHADOW-COLOR: #008000;
}

2. The following statements define the connection style:
<! -- Link and accessed link -->
A: Link, A: visited {
Text-Decoration: none;
Color: # 4073ab; (color)
Font-family: tahoma, verdana, ""; (font)
Border: solid 1px green; (the connected border, 1px is the width, and green is the color)
}
<! -- Move the mouse to the style on the Link --> (same as above, you can define a different style from above so that when you move the mouse over the link, there will be a dynamic effect, you can first look at my connection effect)
A: hover {
Text-Decoration: underline;
Color: #990000;
Font-family: tahoma, verdana, "";
}

3. Define the place where the input text looks like the 'search' input box.
<! -- Input box -->
Input {
Border: 1px solid # c0c0c0 ,)
Padding-Right: 1px;
Padding-left: 1px;
Padding-bottom: 1px;
Padding-top: 1px;
Font-family: tahoma, verdana, "";
Font-size: 11px;
Color: #000000;
Background-color: # ffffff; (background color)
}
<! -- Multi-line text box --> (enter a multi-line text field, for example, the input box for posting comments. See the previous setting)
Textarea {
Border: 1px solid # c0c0c0;
Background-color: # ffffff; (background color)
Font-family: tahoma, verdana, "";
Font-size: 12px;
Color: #000000;
}

4. Experiment on your own.
<! -- Select box -->
Select {
Font-family: tahoma, verdana, "";
Font-size: 11px;
Color: #000000;
Background-color: # ffffff;
}

5. the table containing the title and body is defined here.
<! -- A table containing the title and body -->
. Maintable {
Width: 768px; (the width is the left and right width of the page ,)
Border-color: #999999;
Border-style: solid;
Border-bottom-width: 0px;
Border-right-width: 1px;
Border-top-width: 0px;
Border-left-width: 1px;
Background-color: # f6f6f6; (background color. You can add the background image code)
}

6. Description
<! -- It indicates that the text is like the "host name". It's useless. don't do the same. -->
. Comment-text {
Font-size: 11px;
Color: Gray;
}
<! -- Highlight text --> (same as above, no more)
. Highlight {
Text-Decoration: underline;
Color: red;
}

7. Title Bar
<! -- Title bar --> (you can define the background image and mouse as in the body)
. Page-header {
}

8. Define the connection format of the title area. For details, refer to the definition of the body area.
<! -- Link to the title bar -->
. Page-header A: link {
Color: black;
Font-size: 24px;
Font-weight: bold;
Text-Decoration: none;
}
<! -- A link that has been accessed in the title bar -->
. Page-header A: visited {
Color: black;
Font-size: 24px;
Font-weight: bold;
Text-Decoration: none;
}
<! -- Move the title bar to the link with the mouse -->
. Page-header A: hover {
Color: #006400;
Font-size: 24px;
Font-weight: bold;
Text-Decoration: underline;
}
<! -- Title bar Subtitle -->
. Page-Subheader {
Font-size: 12px;
Font-weight: bold;
Color: #666666;
}

9. Here we define the copyright reputation of Hexun at the bottom of the page. You can add the following code: Display: none; hide it. Haha, don't be angry with Hexun !!!! Of course, you can also add the display: none; to other areas that you do not want to display, such as the title area, so that there is no title.
<! -- Footer -->
. Page-footer {
Border-top: 1px dashed # cccccc;
Display: none;
}

10,
<! -- Separation line between the title bar and the body area --> (you can add a background image)
. Header-splitter {
Height: 15px; (width)
Background-color: # e0e0e0;
}

11 is the entire left sidebar, quick link, calendar, etc. (you can add a background image)
<! -- Entire sidebar -->
. Sidebar {
Vertical-align: top;
Height: 400px;
Width: 180px;
White-space: nowrap;
}

12. The entire text area includes the title, content, and bottom of the article. You can add a background image to each part.
<! -- Entire body area -->
. Mainbox {
Vertical-align: top;
}

13. Define the page number of the Article Page
<! -- Pagination -->
. Multipage {
Color: #999999;
}
<! -- Current page -->
. Multipage-current {
Color: #999999;
Font-weight: bold;
Text-Decoration: underline;
}

14. The Panel is: A quick link, calendar, tags, latest articles, etc. Each of them is a panel. Of course, each of them can define a background image.
<! -- Panel -->
. Panel {
}
<! -- Panel title -->
. Panel-title {
Color: #666666;
Font-weight: bold;
Border-bottom: 1px dashed # cccccc;
}
<! -- Panel body -->
. Panel-content {
}
<! -- Calendar -->
. Calender-box {
Border-left: 0px solid #000;
Border-top: 0px solid #000;
}
<! -- Every day on the calendar -->
. Calendar-day {
Border-Right: 0px solid #000;
Border-bottom: 0px solid #000;
Color: #666666;
Text-align: center;
Padding: 4px;
}
<! -- The week on the calendar --> is the su Mo tu we th fr SA.
. Calendar-weekdays {
Border-Right: 0px solid #000;
Border-bottom: 0px solid #000;
Color: #999999;
Font-weight: bold;
Text-align: center;
Padding: 4px;
}
<! -- Today on the calendar --> current day
. Calendar-today {
Color: #666666;
Border: dashed 1px # cccccc;
Background-color: # f6f6f6;
Text-align: center;
Padding: 4px;
}
<! -- The selected day on the calendar -->
. Calendar-ThisDay {
Color: #666666;
Border: solid 1px # cccccc;
Text-align: center;
Padding: 4px;
}

15. Define the document Area
<! -- Article area --> (entire article Area)
. Textbox {
Background-color: white;
Border: 1px dashed # cccccc;
}
<! -- Article title -->
. Textbox-title {
Font-size: 14px;
Border-bottom: 1px dashed # e0e0e0;
Padding-left: 10px;
}
<! -- Body of the article -->
. Textbox-content {
Padding-left: 8px;
}
<! -- Bottom -->
. Textbox-bottom {
Font-size: 11px;
Color: #999999;
}

16. The form is like the box in which you write a comment and post an article. You can try it and you will know who tested it and said it.
<! -- Form area -->
. Formbox {
Border: solid 1px # cccccc;
Background: # ffffff;
}
<! -- Form title -->
. Formbox-title {
Text-align: center;
Background-color: # efefef;
}
<! -- Form body content -->
. Formbox-content {
}
<! -- Form item title -->
. Formbox-rowheader {
Text-align: right;
Font-weight: bold;
}
<! -- Items in the form that need to be forcibly wrapped --> (this does not understand)
. Formbox-wordwrap {
Border: solid 1px # cccccc;
Background: # ffffff;
Word-wrap: Break-word;
Word-break: Break-all;
}
The following is a similar test, and you will understand it !!!!
<! -- Comment area -->
. Commentbox {
Background-color: white;
Border: 1px dashed # cccccc;
}
<! -- Comment title -->
. Commentbox-title {
}
<! -- Member list -->
. Member-list {
Background-color: # f6f6f6;
}
<! -- Table -->
. Gridbox {
Border-color: # cccccc;
Border-style: solid;
Border-bottom-width: 1px;
Border-right-width: 1px;
Border-top-width: 0px; border-left-width: 0px;
Background-color: white;
}

17. I don't understand the table, and I haven't tested the definition. Who knows it? Let me know.
<! -- Table lattice -->
. Gridbox-Td {
Border-color: # cccccc;
Border-style: solid;
Border-bottom-width: 0px;
Border-right-width: 0px;
Border-top-width: 1px;
Border-left-width: 1px;
}
<! -- Table title -->
. Gridbox-title {
Border-color: # cccccc;
Border-style: solid;
Border-bottom-width: 0px;
Border-right-width: 0px;
Border-top-width: 1px;
Border-left-width: 1px;
Text-align: center;
Background-color: # efefef;
}
<! -- Pagination in the table -->
. Gridbox-page {
Border-color: # cccccc;
Border-style: solid;
Border-bottom-width: 0px;
Border-right-width: 0px;
Border-top-width: 1px;
Border-left-width: 1px;
Text-align: right;
Background-color: # efefef;
}
<! -- Link Diagram -->
. Linklogo {
Border-color: # cccccc;
Border-width: 1px;
Border-style: solid;
Width: 150px;
}
<! -- Link Panel -->
. Panel-link {
Text-align: center;
}
<! -- Message text -->
. Message-text {
Font-size: 11px;
Color: Gray;
}
<! -- Message board -->
. MessageBox {
Background-color: white;
Border: 1px dashed # cccccc;
}
<! -- Message title -->
. MessageBox-title {
Border-bottom: 1px dashed # e0e0e0;
}
<! -- Message content -->
. MessageBox-content {
Height: 100px;
}
<! -- Display the article publishing Method -->
. Posttype-text {
Color: #990000;
} <! -- Search result list -->
. Searchresult {
Border-top: 1px dashed # cccccc;
} <! -- Search result title -->
. Searchresult-title {
Border-bottom: 1px dashed # cccccc;
} <! -- Excellent article list -->
. Essentialbox {
Border-top: 1px dashed # cccccc;
} <! -- Excellent article title -->
. Essentialbox-title {
Border-bottom: 1px dashed # cccccc;
}
<! -- Link "send private message" and "Add as friend" -->
. Sendmessage {color: # CCC ;}
<! -- Link "send private message" and "Add as friend" style -->. sendmessage A: Link,. sendmessage A: visited {color: # b0cae8 ;}
<! -- Link "send private message" and "Add as friend" style -->. sendmessage A: hover {color: # d28383 ;}