代码改变世界

DIY博客园的博客皮肤

2014-10-07 21:36 by coderidea, ... 阅读, ... 评论, 收藏, 编辑

    十一在家闲来无事,就把博客园的博客美化了下。

    博客园属于我见过的博客托管平台里自由度最高的了,可以完全的的重写CSS,来达到重新布局的作用,JS的定制性也蛮好的,可以实现自己想要达到的效果。

    那么怎么做呢?

      1 选择custom皮肤(注:此模板是博客园的标准模板,本来打算下载下来改,下载后发现跟现在博客园模板貌似有区别的,不是最新版的,所以直接线上操作了)

      2 把自己的CSS 拷过来放到页面定制CSS代码中

      3 禁用模板默认CSS(注:这样就完全重写CSS了)

 

     

    修改优化地见本博客模板效果(注 在博客园皮肤上做了优化而已,并不是完全重新设计)。

    本博客优化后的样式文件

     

  1 #EntryTag {
  2     margin-top: 20px;
  3     font-size: 9pt;
  4     color: gray;
  5 }
  6 .topicListFooter {
  7     text-align: right;
  8     margin-right: 10px;
  9     margin-top: 10px;
 10 }
 11 #divRefreshComments{
 12     text-align: right; 
 13     margin-right: 10px;
 14     margin-bottom: 5px;
 15     font-size: 9pt;
 16 }
 17 
 18 * {
 19     margin: 0;
 20     padding: 0;
 21 }
 22 html {
 23     height: 100%;
 24 }
 25 body {
 26     padding-bottom: 40px;
 27     padding-top: 60px;
 28 
 29     min-height: 101%;
 30 
 31     background-color: #FFFFFF;
 32     color: #404040;
 33     font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
 34     font-size: 13px;
 35     font-weight: normal;
 36     line-height: 18px;
 37     margin: 0;
 38 
 39 }
 40 table {
 41     border-collapse: collapse;
 42     border-spacing: 0;
 43 }
 44 fieldset, img {
 45     border: 0;
 46 }
 47 ul {
 48     word-break: break-all;
 49 }
 50 li {
 51     list-style: none;
 52 }
 53 h1, h2, h3, h4, h5, h6 {
 54     font-size: 100%;
 55     font-weight: normal;
 56 }
 57 
 58 a {
 59     color: #0069D6;
 60     font-weight: inherit;
 61     line-height: inherit;
 62     text-decoration: none;
 63 }
 64 .clear {
 65     clear: both;
 66 }
 67 
 68 #home {
 69     margin: 0 auto;
 70     min-width: 930px;
 71 }
 72 #header {
 73     left: 0;
 74     position: fixed;
 75     right: 0;
 76     top: 0;
 77     z-index: 1030;
 78     margin-bottom: 18px;
 79     overflow: visible;
 80 background-color: #2C2C2C;
 81 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 -1px 0 rgba(0, 0, 0, 0.1) inset;
 82 clear: both;
 83 content: "";
 84 /*display: table;*/
 85 
 86 
 87 }
 88 #blogTitle {
 89     /*height: 60px;
 90     clear: both;*/
 91     float: left;
 92 }
 93 #blogTitle h1 {
 94     padding: 8px 12px 8px;
 95         float: left;
 96         font-size: 20px;
 97     font-weight: 200;
 98     line-height: 1;
 99     color: #FFFFFF;
100     display: block;
101 }
102 #blogTitle a {
103 color: #FFFFFF;
104     display: block;
105 padding-left:15px;
106 }
107 
108 #blogTitle h2 {
109     margin-left: 4em;
110     line-height: 1.5;
111     
112     float: left;
113     
114 }
115 #blogLogo {
116 /*    float: right;*/
117 }
118 
119 #navigator {
120 float:left;margin-right:20px;font-size: 14px;
121 /*
122     background-color: black;
123     height: 30px;
124     clear: both;
125     
126 float: left;*/
127     left: 0;
128     right: 0;
129     margin: 0 0 0 0;
130     position: relative;
131 }
132 #navList {
133    display: inline-block;
134 
135     float:left;margin-right:20px;font-size: 14px;
136     left: 0;
137     right: 0;
138     margin: 0 10px 0 0;
139     position: relative;
140 }
141 #navList li {
142     float: left;
143     line-height: 18px;
144 }
145 #navList a {
146     float: none;
147     line-height: 19px;
148     padding: 8px 10px 8px;
149     text-decoration: none;
150     text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
151     display: block;
152     /*
153     display: block;
154     width: 5em;
155     height: 22px;
156     float: left;
157     text-align: center;
158     padding-top: 8px;
159     border-right: 1px solid #ccc;
160     */
161 }
162 #navList a:link, #navList a:visited, #navList a:active {
163     color: white;
164 }
165 #navList a:hover {
166     color: white;
167 }
168 
169 .blogStats {
170     float: right;
171     color: #0088CC;
172         margin-top: 8px;
173     margin-right: 2px;
174     text-align: right;
175     padding: 0;
176 }
177 /*****home和头部结束**************************/
178 
179 /*****主页文章列表开始**************************/
180 #main{
181     text-align: left;
182      padding-left: 20px;
183     padding-right: 20px;
184 }
185 #mainContent{min-height: 200px;margin-right:330px;top:100px;right:10px;}
186 #sideBar{position:absolute;width:300px;border-top-width:0;overflow:hidden;padding:0 15px 20px 
187 
188 30px;top:60px;right:20px;}
189 .forFlow{margin:0 30px 0 30px;}
190 .day {
191     min-height: 10px;
192     _height: 10px;
193     margin-bottom: 20px;
194     padding-bottom: 5px;
195 }
196 .dayTitle {
197 /*    width: 100%;
198     color: #666;
199 
200     font-weight: bold;
201     line-height: 1.5em;
202     font-size: 110%;
203     margin-top: 3px;
204     margin-bottom: 10px;
205 
206     clear:both;
207     border-bottom: 2px solid #666;
208     text-align:center;
209 */
210     border-bottom: 1px solid #DDDDDD;
211     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
212     margin-bottom: 17px;
213     text-align:right;
214     font-size: 14px;
215 
216 }
217 .postTitle,.entrylistPosttitle,.entrylistItemTitle  {
218     font-size: 110%;
219     font-weight: bold;
220     float: right;
221     line-height: 1.5;
222     width: 100%;
223     clear:both;
224     color: #444;
225 }
226 .postTitle a:link, .postTitle a:visited, .postTitle a:active {
227     color: #444;
228 }
229 .postTitle a:hover {
230     color: #F60;
231 }
232 
233 
234 .entrylistPosttitle a:hover {
235     color: #F60;
236 }
237 
238 .postCon {
239     float: right;
240     line-height: 1.5;
241     width: 100%;
242     clear:both;
243     padding: 10px 0;
244 }
245 .postDesc {
246     float: right;
247     width: 100%;
248     clear:both;
249     text-align: right;
250     padding-right: 5px;
251     color: #666;
252     margin-top: 5px;
253 }
254 .postDesc a:link, .postDesc a:visited, .postDesc a:active, 
255 .entrylistItemPostDesc a:link, .entrylistItemPostDesc a:visited, .entrylistItemPostDesc a:active {
256     color: #666;
257     background-color: #62CFFC;
258       border-radius: 3px 3px 3px 3px;
259     color: #FFFFFF;
260     font-size: 9.75px;
261     font-weight: bold;
262     padding: 1px 3px 2px;
263     text-shadow: none;
264 }
265 .postDesc a:hover, .entrylistItemPostDesc a:hover  {
266       background-color: #46A546;
267 }
268 .postSeparator {
269     clear: both;
270     height: 15px;
271     width: 100%;
272     clear:both;
273     float: right;
274     margin: 0 auto 15px auto;
275 }
276 /*****主页文章列表开始**************************/
277 
278 /*****侧边栏开始********************************/
279 #sideBar {
280     min-height: 200px;
281     padding: 9px 9px 9px 15px;
282     -o-text-overflow: ellipsis;
283     text-overflow: ellipsis;
284     overflow: hidden;
285     word-break: break-all;
286 
287     background-color: #F5F5F5;
288     border: 1px solid rgba(0, 0, 0, 0.05);
289     border-radius: 4px 4px 4px 4px;
290     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset;
291     margin-bottom: 20px;
292     min-height: 20px;
293 }
294 .newsItem .catListTitle {
295     display: none;
296 }
297 .newsItem {
298     padding: 15px 0 5px 0px;
299     margin-bottom: 8px;
300 }
301 /**日历控件样式开始**/
302 #calendar {
303     width: 220px;
304 }
305 #calendar .Cal {
306     width: 100%;
307     line-height: 1.5;
308 }
309 .Cal {/**日历容器table**/
310     border: none;
311     color: #666;
312 }
313 #calendar table a:link, #calendar table a:visited, #calendar table a:active {
314     font-weight: bold;
315 }
316 #calendar table a:hover {
317     color: white;
318     text-decoration: none;
319     background-color: #F60;
320 }
321 .CalTodayDay{/**今天日期样式**/
322     color:#f60;
323 }
324 #calendar .CalNextPrev a:link,#calendar  .CalNextPrev a:visited, #calendar .CalNextPrev a:active {/**上个月、下个月箭头样式**/
325     font-weight: bold;
326     background-color: white;
327 }
328 .CalDayHeader{
329     border-bottom:1px solid #ccc;    
330     padding:5px 0px 5px 0px
331 }
332 .CalTitle{/**日历年月头部样式**/
333     width:100%;
334     color:black;
335     border-bottom:1px solid #666;    
336 }
337 /**日历控件样式结束**/
338 .catListTitle {
339     font-size: 14px;
340     line-height: 36px;
341     color: #404040;
342     font-weight: bold;
343     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
344     border: 0 none;
345     font-family: inherit;
346 }
347 
348 #leftcontentcontainer > div > ul > li > a {
349 padding: 3px 15px;
350 margin-left: -15px;
351     margin-right: -15px;
352     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
353     color: #0088CC;
354 }
355 
356 
357 .catListPostCategory > a{
358 color: #0069D6;
359     font-weight: inherit;
360     line-height: inherit;
361 }
362 
363 
364 .catListComment {
365     line-height: 1.5;
366 }
367 .divRecentComment {
368     text-indent: 2em;
369     color: #666;
370 }
371 #sideBarMain ul {
372     margin: 0 0 1px 15px;
373 }
374 /*****侧边栏结束********************************/
375 
376 
377 /****查看文章页面开始*************************/
378 #topics {
379     width: 100%;
380     min-height: 200px;
381     padding: 0px 0px 10px 0;
382     float: left;
383     -o-text-overflow: ellipsis;
384     text-overflow: ellipsis;
385     overflow: hidden;
386     word-break: break-all;
387 }
388 #topics .postTitle .entrylistPosttitle{
389     font-size: 130%;
390     font-weight: bold;
391     border-bottom: 1px solid #999;
392     float: left;
393     line-height: 1.5;
394     width: 100%;
395     padding-left: 5px;
396 }
397 .postBody {
398     padding: 5px 2px 5px 5px;
399     line-height: 1.5;
400     color: #000;
401 }
402 #EntryTag {
403     color: #666;
404 }
405 #EntryTag a {
406     margin-left: 5px;
407 }
408 #EntryTag a:link, #EntryTag a:visited, #EntryTag a:active {
409     color: #666;
410 }
411 #EntryTag a:hover {
412     color: #f60;
413 }
414 #topics .postDesc {
415     float: right;
416     width: 100%;
417     text-align: right;
418     padding-right: 5px;
419     color: #666;
420     margin-top: 5px;
421 }
422 .feedback_area_title {
423     font-weight: bold;
424     margin-top: 20px;
425     border-bottom: 1px solid #333;
426     margin-bottom: 10px;
427     padding-left: 8px;
428 }
429 .louzhu {
430 background:transparent url('images/icoLouZhu.gif') no-repeat scroll right top;
431 padding-right:16px;
432 }
433 .feedbackListSubtitle {
434     color: #666;
435 }
436 .feedbackListSubtitle a:link, .feedbackListSubtitle a:visited, .feedbackListSubtitle a:active {
437     color: #666;
438     font-weight: normal;
439 }
440 .feedbackListSubtitle a:hover {
441     color: #f60;
442 }
443 .feedbackManage {
444     width: 200px;
445     text-align: right;
446     float: right;
447 }
448 .feedbackCon {
449     border-bottom: 1px solid #ccc;
450     background: url('images/comment.gif') no-repeat 5px 0px;
451     padding: 15px 18px 10px 40px;
452     min-height: 35px;
453     _height: 35px;
454     margin-bottom: 1em;
455     line-height: 1.5;
456     width:100%;
457 }
458 #divRefreshComments {
459     text-align: right;
460     margin-bottom: 10px;
461 }
462 .commenttb {
463     width: 320px;
464 }
465 /****查看文章页面开始*************************/
466 .post { 
467  background-color: #FFFFF;
468     border-radius: 6px 6px 6px 6px;
469     padding: 20px;
470 }
471 /****列表页面开始******************************/
472 .entrylistTitle,.PostListTitle,.thumbTitle{/**几个分类列表的标题样式**/
473     font-size: 110%;
474     font-weight: bold;
475     border-bottom: 1px solid black;
476     text-align: right;
477     padding-bottom: 3px;
478     padding-right: 10px;
479 }
480 
481 .entrylistDescription {
482     color: #666;
483     text-align: right;
484     padding-top: 5px;
485     padding-bottom: 5px;
486     padding-right: 10px;
487     margin-bottom: 10px;
488 }
489 .entrylistItem {
490     min-height: 20px;
491     _height: 20px;
492     margin-bottom: 30px;
493     padding-bottom: 5px;
494     width: 100%;
495 }
496 .entrylistPosttitle a:hover {
497 }
498 .entrylistPostSummary {
499     margin-top: 5px;
500     padding-left: 5px;
501     margin-bottom: 5px;
502 }
503 .entrylistItemPostDesc {
504     text-align: right;
505     color: #666;
506 }
507 .entrylist .postSeparator {
508     clear: both;
509     width: 100%;
510     font-size: 0;
511     line-height: 0;
512     margin: 0;
513     padding: 0;
514     height: 0;
515     border: none;
516 }
517 
518 .pager {
519     text-align: right;
520     margin-right: 10px;
521 }
522 .PostList {
523     border-bottom: 1px solid #ccc;
524     clear: both;
525     min-height: 1.5;
526     _height: 1.5;
527     padding-top: 10px;
528     padding-left: 5px;
529     padding-right: 5px;
530     margin-bottom: 5px;
531 }
532 .postTitl2 {
533     float: left;
534 }
535 .postDesc2 {
536     color: #666;
537     float: right;
538     margin-right: ;
539 }
540 .postText2 {
541     clear: both;
542     color: #666;
543 }
544 .pfl_feedback_area_title {
545     text-align: right;
546     line-height: 1.5;
547     font-weight: bold;
548     border-bottom: 1px solid #666;
549     margin-bottom: 10px;
550 }
551 .pfl_feedbackItem {
552     border-bottom: 1px solid black;
553     margin-bottom: 20px;
554 }
555 .pfl_feedbacksubtitle {
556     width: 100%;
557     border-bottom: 1px dotted #666;
558     height: 1.5;
559 }
560 .pfl_feedbackname {
561     float: left;
562 }
563 .pfl_feedbackManage {
564     float: right;
565 }
566 .pfl_feedbackCon {
567     color: black;
568     padding-top: 5px;
569     padding-bottom: 5px;
570 }
571 .pfl_feedbackAnswer {
572     color: #F40;
573     text-indent: 2em;
574 }
575 .tdSentMessage {
576     text-align: right;
577 }
578 .errorMessage {
579     width: 300px;
580     float: left;
581 }
582 
583 /****列表页面结束******************************/
584 
585 /****相册页面开始******************************/
586 .divPhoto {
587     border: 1px solid #ccc;
588     padding: 2px;
589     margin-right: 10px;
590 }
591 
592 .thumbDescription {
593     color: #666;
594     text-align: right;
595     padding-top: 5px;
596     padding-bottom: 5px;
597     padding-right: 10px;
598     margin-bottom: 10px;
599 }
600 /****相册页面开始******************************/
601 
602 
603 /*****留言页面开始*****************************/
604 #footer {
605     text-align: center;
606     min-height: 15px;
607     _height: 15px;
608     border-top: 1px solid black;
609     margin-top: 10px;
610     padding-top: 10px;
611     margin-bottom: 10px;
612 }
613 /*留言查看页面的个人信息*/
614 .personInfo {
615     margin-bottom: 20px;
616 }
617 /*留言分页区域*/
618 .pages {
619     text-align: right;
620 }
621 /*****留言页面结束*****************************/
622 /*****第三部分结束*******************************/
623 
624 /**************************************************
625 第四部分:文章内容常用标签格式。这个部分是设置作者写作内容的部分。例如:
626 如果作者的文章用有p标签,则可通过这个对这些文章中的p标签进行设置。前面
627 的“.postBody”明确的指出了这里样式的作用范围。仅仅适用于文章主体部分。
628 建议这个不要设置过于详细的细节。因为,一些样式,一篇文章比较适合的话,
629 并不能保证所有的文章都适合。
630 **************************************************/
631 /*文章内部常用标签格式*/
632 .postBody {
633     line-height: 1.5;
634 }
635 .postBody p,.postCon  p{
636     text-indent: 2em;
637     margin: 0 auto 1em auto;
638 }
639 .postBody h2{
640     font-size: 150%;
641     margin: 15px auto 2px auto;
642     font-weight:bold;
643 }
644 .postBody h3 {
645     font-size: 120%;
646     margin: 15px auto 2px auto;
647     font-weight:bold;
648 }
649 .postBody h4{
650     font-size:110%;
651     margin:15px auto 2px auto;
652     font-weight:bold;
653     color:#333;
654 }
655 
656 .postBody h5{
657     font-size:100%;
658     margin:15px auto 2px auto;
659     font-weight:bold;
660     color:#333;
661 }
662 
663 .postBody a:link,.postBody a:visited,.postBody a:active{
664     text-decoration:underline;
665 }
666 .postCon a:link,.postCon a:visited,.postCon a:active{
667     text-decoration:underline;
668 }
669 .postBody ul,.postCon ul{
670     margin-left:2em;    
671 }
672 
673 .postBody li,.postCon li{
674     list-style-type:disc;
675     margin-bottom:1em;
676 }
677 
678 .postBody blockquote{
679     background:url('images/comment.gif')) no-repeat 25px 0px;
680     padding:10px 60px 5px 60px;
681     min-height:35px;
682     _height:35px;
683     line-height:1.6em;
684     color:#333;
685 }
686 /*****第四部分结束*******************************/
687 
688 
689 .c_b_p_desc{
690 overflow:visible;
691 }
692 
693 .postBody img {
694     background-color:#EDEDED;
695     border:1px solid #DBDBDB;
696     padding:8px 8px 8px 8px;
697     margin:0 0 5px 0;
698     clear:both;
699     max-width:600px;
700     height:auto;
701 }
702 
703 .postBody h3 {
704     margin: 35px 30px 15px 0;
705 font-size: 30px;
706 font-family: Georgia,"Nimbus Roman No9 L",serif;
707 }
708 
709 .postBody a:link, a:visited {
710 text-decoration: none;
711 color: #2B8DC0;
712 }
713 
714 .post h1 {
715 font-size: 30px;
716 line-height: 40px;
717 color: #4C4C4C;
718 font-family: Georgia,"Nimbus Roman No9 L",serif;
719 font-style:bold;
720 letter-spacing: -1px;
721 margin: 0 10px 20px 0;
722 font-weight: normal;
723 }
724 
725 .post h1 a:link, .post h1 a:visited {
726 color: #4C4C4C;
727 }
728 .cnblogs_code pre {
729 border-style: dashed 3px;
730 background-color: #FFF;
731 border-left: solid 5px #6ce26c;
732     margin: 0px 0px 10px 0px;
733     font-size: 10pt;
734     line-height: 140%;
735     max-width:600px;
736 }
737 div.post div.entry pre.code {
738     border-style: dashed;
739     
740 }
741 .cnblogs_code_toolbar {
742 margin-top: 0px;
743 }
744 .cnblogs_Highlighter{background-color: #FFF;}
745 
746 .cnblogs_code {
747 background-color: white;
748 font-family: Courier New;
749 font-size: 12px;
750 border: 0px solid #CCC;
751 padding: 0px;
752 word-break: break-all;
753 overflow: auto;
754 }
755 
756 .cnblogs_code_toolbar img {
757 display:none;
758 background-color: white !important;
759 border: none !important;
760 }
761 /*****自定义样式web馆**************************/
762 .author_profile_info img {
763 border-top-left-radius: 50%;
764 border-top-right-radius: 50%;
765 border-bottom-left-radius: 50%;
766 border-bottom-right-radius: 50%;
767 display: block;
768 width: 60px;
769 height: 60px;
770 border: 1px solid #ebebeb;
771 padding: 2px;
772 margin: 0;
773 max-width: 100%;
774 }
775 textarea, input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"], select[multiple=multiple] {
776     -webkit-box-sizing: border-box;
777     -moz-box-sizing: border-box;
778     box-sizing: border-box;
779     -webkit-transition: border-color;
780     -moz-transition: border-color;
781     transition: border-color;
782     background-color: white;
783     border-radius: 0.1875em;
784     border: 1px solid #ddd;
785     box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
786     font-family: "Source Sans Pro",sans-serif;
787     font-size: 0.92em;
788     margin-bottom: 0.69em;
789     padding: 0.46em 0.46em;
790     width: 100%;
791 }
792 
793 .div_my_zzk input[type="text"] {
794     margin-top: 7px;
795     width: 200px;
796     height: 30px;
797 }
798 
799 input.btn_my_zzk {
800     -webkit-font-smoothing: antialiased;
801     background-color: #25ade4;
802     border-radius: 0.1875em;
803     color: white;
804     display: inline-block;
805     border: 0;
806     font-size: 0.92em;
807     font-weight: bold;
808     line-height: 1;
809     padding: .75em 1em;
810     text-decoration: none;
811     width: 81px;
812     height: 30px;
813 }
814 .comment_btn {
815 height: 40px;
816 width: 96px;
817 border: none;
818 background: #778289;
819 background: rgba(29,47,58,.6);
820 display: inline-block;
821 padding: 10px 16px;
822 color: #fff;
823 line-height: 1.1;
824 border-radius: 3px;
825 font-weight: 500;
826 -webkit-transition: background .2s;
827 transition: background .2s;
828 text-shadow: none;
829 margin-bottom: 0;
830 font-size: 14px;
831 text-align: center;
832 vertical-align: middle;
833 cursor: pointer;
834 filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
835 box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);
836 }
837 
838 .feedback_area_title {
839     margin: 0 0 24px;
840     border-bottom: 2px solid;
841     border-color: #eaedee;
842     border-color: rgba(0,39,59,.08);
843     padding: 0px;
844     padding-bottom: 5px;
845 }
846 
847 div.feedback_area_title:after {
848     content: " ";
849     display: block;
850     height: 2px;
851     width: 62px;
852     background: #2e9fff;
853     margin-bottom: -7px;
854 }
855 #BlogPostCategory a {
856 padding: 5px 5px;
857 margin: 5px 5px 0 0;
858 text-transform: uppercase;
859 background: #75C9B3;
860 color: #fff;
861 letter-spacing: 1px;
862 font-size: 11px;
863 font-weight: bold;
864 line-height: 20px;
865 }
866 td{
867  padding-top:5px;
868 }
View Code

 

        

作者:web馆
出处:http://www.webguan.com/
欢迎任何形式的转载,但请务必注明出处。