myblog2_1.png

Wikidot API

created: 1237952153|%e %B %Y, %H:%M
Ed Johnson

I've had a chance to play around a bit with the new Wikidot API and so far it looks promising! I posted a sample script. I'll have more content related to installing and using Python for Windows later on.

Steal This CSS! Part 2

created: 1236028026|%e %B %Y, %H:%M
Ed Johnson

Read Part 1

If you looked at my CSS file in Part 1, you'll see that I don't exactly follow conventional formatting. Essentially, I took each page element's CSS block and converted into individual lines, each with a single CSS style on it. For example, a "conventional" section of CSS might look like this:

#header h1 {
    position: absolute;
    text-align: top;
    width: 360px;
    padding: 0;
    margin: 0;
    border-bottom: none;
    left: 10px;
    top: 25px;
    font-size: 1.5em;
}

Using MS Excel with a couple of simple macros and formulas, I split each block so that a single CSS sytle is on its own line and the result is like this: 
#header h1 {    border-bottom: none; }
#header h1 {    font-size: 1.5em; }
#header h1 {    left: 10px; }
#header h1 {    margin: 0; }
#header h1 {    padding: 0; }
#header h1 {    position: absolute; }
#header h1 {    text-align: top; }
#header h1 {    top: 25px; }
#header h1 {    width: 360px; }

I then sorted the entire CSS file in order by page element to get the complete result you see in Part 1.
There are 2 things I really like about this non-conventional formatting.
  1. If you use the Web Developer or Firebug plugins with Firefox to edit CSS, it's really simple to find the block you want to change.
  2. I can quickly resort my CSS by style. Doing this, I can quickly change, for example, the color scheme of my entire site and not worry about missing any page elements.

For example, here are all of the CSS styles that have the background color that I assigned to the top navigation bar on this site:

#edit-cancel-button:hover {    background: #254b5c; }
#edit-diff-button:hover {    background: #254b5c; }
#edit-preview-button:hover {    background: #254b5c; }
#edit-save-button:hover {    background: #254b5c; }
#edit-save-continue-button:hover {    background: #254b5c; }
#ntf-cancel:hover {    background: #254b5c; }
#ntf-post:hover {    background: #254b5c; }
#ntf-preview:hover {    background: #254b5c; }
#side-bar h1 a:hover {    background: #254b5c; }
#side-bar h1:hover {    background: #254b5c; }
#side-bar h1:hover a {    background: #254b5c; }
#top-bar {    background: #254b5c; }
.page-options-bottom a:hover {    background: #254b5c; }
body {    background: #254b5c; }
input.button:hover {    background: #254b5c; }

As you can see, if you wanted to steal my CSS and edit the colors, you can do it easily by having all of the elements that share the same color grouped together. The other thing this method helps me with is in identifying colors that I may have missed editing.
Note: The reason for the gap between the "{" and the style name is that there is a tab character in between. This is also useful since you can copy this code and paste it directly into Excel and it will end up in 2 columns, rather than one. Conversely, copying the 2 columns and pasting it back into your custom CSS box in Wikidot creates the tab space. Bottom line? It's easy to go back and forth between Excel and Wikidot!

You can download the Excel file I used and try it out yourself. Let known what you think!

If you like the layout of my CSS, but want to change the color scheme, I suggest you visit one of the many sites devoted to web site color schemes and create your own scheme. Then grab my Excel file and start sorting and editing. A couple of sites I like for color schemes are ColorBlender and ColorScheme Designer.

Steal This CSS!

created: 1235969370|%e %B %Y, %H:%M
Ed Johnson

I launched my new theme today. Ever since reading Rob Elliot's gem on the community site, I have been spending most of my free time tweaking things in custom CSS.

This actually turned into a 2-part project. Part 1 is the result you see (identifying the page elements and applying styles to create the new theme). Those who use the Firebug or Web Developer plugins for Firefox know how great those tools are. What's always been a challenge for me is tracking down where a particular element is located in the CSS. The other issue is that sometimes the same element and style are repeated in more than one place in a CSS file.

This is where my second project came in. I decided to create my CSS file in a way that would be easy for those using the Firefox plugins to "have a play" (as my friends across the pond might say). I also set up my CSS in Microsoft Excel so I could easily sort it in different ways. For example, it's easy for me to list all of my color styles together or to quickly resort the list in order of element. I'll save the full story for another day.
Read Part 2

Like the new look I've created? Then…

Steal My CSS!
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License