Journal of Tormod Haugen

First steps

I’ve begun making some small changes to the Simpla Theme, in order to get something looking *just* like I want. I’ll share my changes, and also the code if somebody asks for it. For now this is filed as work in progress. And there will be progress.

Here are the things I did to change the theme as it looks now (2009-01-04T20:59:12+01:00). Increase / change font size and screen real estate. Flip the sidebar to the left. Fix logout from near comment field. I’d love to hear if you like / dislike the changes.

Change font size

First order of business is to increase the text size, because I’ve seen what it helps on some devices. The code changes are from:

13
14
15
16
17
18
19
20
21
22
23

body{   
        background:#fff url(./images/bg.png) repeat-x;
        border-top:5px solid #333;
        color:#555;
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size:62.5%;
        line-height:1.5;
        margin:0;
        padding:0;
        text-align:center;
}

Change relevant line to the following:

18

        font-size:12pt;

Then remove lines 30 and 36 from the following block:

24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

#wrap{  
        margin:0 auto;
        text-align:left;
        width:76em;
}
content{
        font-size:1.2em;
        float:left;
        padding:1em;
        width:40em;
}
#sidebar{
        font-size:1.1em;
        float:right;
        padding-top:2em;
        width:20em;
}

That is, these line should be removed:

30

        font-size:1.2em;

36

        font-size:1.1em;

These font-size changes means that we have to redistribute a bit of space in the content area. Change line 24, 33 and 39 from above to the following:

24

        max-width:80em;

33

        width:70%;

39

        width:25%;

Flip sidebar to the left hand side

Next step is to flip the sidebar to the left hand side, just because I can. Change line 30 (or 31 if you didn’t change the font-size like above from the first block of code) to the next line:

29
30
31
32
33

#content{
        float:left;
        padding:1em;
        width:70%;
}

30

        float:right;

Minor fixes needed for Wordpress 2.7

Logout link in comment.php needed updating because of the new security measures in Wordpress. If this isn’t done, you won’t be able to log out from the link beside the comment field. Find and replace first block of code with the second block of code:

76

<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Log out of this account">Logout &raquo;</a></p>

76

<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Log out of this account">Log out &raquo;</a></p>