WordPress Theme Development 10 – Stylesheet

Now come to the look of the web site. Style sheets play an important role in this. I decided to slip the whole stylesheet into different categories: reset, layout, colour, typography and ie. Main style sheet, style.css, will import those categories. Main style sheet also include the style of WordPress default generated classes as shown below.

15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
  1. @import "style/css/reset.css";
  2. @import "style/css/layout.css";
  3. @import "style/css/colour.css";
  4. @import "style/css/typography.css";
  5. @import "style/css/ie.css";
  6.  
  7. /* WordPress Generated Classes. More info: http://codex.wordpress.org/CSS */
  8. .aligncenter, div.aligncenter {
  9. display: block;
  10. margin-left: auto;
  11. margin-right: auto;
  12. }
  13.  
  14. .alignleft {
  15. float: left;
  16. }
  17.  
  18. .alignright {
  19. float: right;
  20. }
  21.  
  22. .wp-caption {
  23. border: 1px solid #ddd;
  24. text-align: center;
  25. background-color: #f3f3f3;
  26. padding-top: 4px;
  27. margin: 10px;
  28. /* optional rounded corners for browsers that support it */
  29. -moz-border-radius: 3px;
  30. -khtml-border-radius: 3px;
  31. -webkit-border-radius: 3px;
  32. border-radius: 3px;
  33. }
  34.  
  35. .wp-caption img {
  36. margin: 0;
  37. padding: 0;
  38. border: 0 none;
  39. }
  40.  
  41. .wp-caption p.wp-caption-text {
  42. font-size: 11px;
  43. line-height: 17px;
  44. padding: 0 4px 5px;
  45. margin: 0;
  46. }
  47.  
  48. /* *** WordPress Class Tags *** */
  49. /*
  50. .categories {...}
  51. .cat-item {...}
  52. .current-cat {...}
  53. .current-cat-parent {...}
  54. .pagenav {...}
  55. .page_item {...}
  56. .current_page_item {...}
  57. .current_page_parent {...}
  58. .widget {...}
  59. .widget_text {...}
  60. .blogroll {...}
  61. .linkcat{...}
  62. */

References

No Comments

No comments yet.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">