WordPress & CSS

Network Culture Lab
I have been worked with several website with wordpress, this time it was a big modification base on existing theme. Also, I have tried to explore different plug-in and issues. Below are some of the issues that worth to record:


  1. Think about the target audience, mission & vision of the site -> tone of the site
  2. Sketch and wireframes
  3. Mock up with sets of color, active/hover color + behavior, behavior handing (side box) and picture thumbnail
  4. Think about code handing e.g search page, icons..etc
  5. CSS coding
  6. Plug-in exploration


  • Navigation with jquery (with horizontal and vertical ref) -> see ref here and some tutorial here
  • Font: letter-spacing allow you change the individual character spacing, it is good to use for like navigation/ sub title e.g h1{letter-spacing:2px;}
  • Form + Search + icon handling (image can be put inside search box, you can set the placeholder + onblur etc)
  • Form > textarea -> better decoration, see ref here
  • Padding: A must to know the box concept (margin > border > padding > content)
  • underline -> deal with text underline vs border bottom -> deal with a border of the box (text-decoration: underline vs border-bottom: 2px solid white),
  • When you have more than 1 icon what to place on the same horizontal position, you can use “li” as display, and then with {display:inline;} -> more reference here
  • clear float to reset everything -> more reference here
  • Set border opacity -> more reference here
  • css text wrapper tool with video/image ->  auto generate the css / javascript -> more ref here

As a designer, if you want to learn jquery properly instead of just modifying some parameters, see some great tutorial here 1 |

Posted in Design & Tools, Research & Practise | Comments Off

August 4, 2011