buzzy | My Semagic Template thingy (or Moo XVII)

In yesterday's entry, I mentioned that I had edited Semagic's template file. It's the file called "sem_prev_u1.html" in your Semagic folder. I'm going to talk about the reasons things are the way they are and some of the quirks. When I first started editing it, I wanted the background to be darker, so I made it white on black. I usually make the background color of the areas with images and captions black, so those blended into the background. That's when I decided on gray for the background for just the area with the entry text. I also reduced the margins so there's less empty space around the edges. There's already plenty of empty space around the edges because the web browser ActiveX control Semagic uses is not at the edges of the window. Another thing I aimed for was HTML5/CSS3 compliance. I ran it through the W3C Validators for HTML5 and CSS just to be sure. After I got everything pretty enough, it was time to deal with some of the inconsistencies. The mood and music are prefaced with "current mood" and "current music", but the tags and location are prefaced by "Tags" and "Location". I prefer the latter. When the security is set to "Friends" it just says "friends". When it's set to private, then it says "Security: private". When it's set to public, it says nothing. I don't know what it says for the custom security level, since that doesn't work with Dreamwidth. Semagic adds line breaks after the mood and music, but adds them before the tags and location. This causes a blank line between the mood/music (when they're displayed) and the tags/location (when they're displayed). I took care of these inconsistencies by adding some scripting that makes things a bit more consistent. I usually don't use <B> tags, but since those are actually put into the template by Semagic itself, I left them there. Also, %%journalname%% is always blank for me, so I commented it out. Now that you know the background, I can show you the code. If you want this, back up your old version and put this into the sem_prev_u1.html file. I think you can just triple-click in the box to get the whole thing selected:

<!DOCTYPE html>
<html>
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>%%title%%</title>
        <style type="text/css">
            body { font-size: 10pt; font-family: Verdana,Tahoma,Arial,sans-serif; color: #FFF; word-wrap: break-word; margin: 2px; background-color: #000; }
            a { text-decoration: none; color: #CCF; }
            a:hover { text-decoration: underline; }
            a:active { color: #FCC; }
            a:visited { color: #FCF; }
            #entryarea { background-color: #CCC; color: #000; border-left: 1px solid #888; border-top: 1px solid #888; border-right: 1px solid #FFF; border-bottom: 1px solid #FFF; padding:4px; margin: 4px; clear: both; }
            #entryarea a { color: #00F; }
            #entryarea a:active { color: #F00; }
            #entryarea a:visited { color: #F0F; }
            #picturearea { float: left; margin-right:2px; background-color:#CCC; color:#000; padding:3px; border:2px solid #888; }
            #miscarea { float: right; margin-left: 2px; width: 40%; }
            #subject { color: #CCF; font-weight: bold; font-style: italic; font-size: 1.25em; }
        </style>
    </head>
    <body>
        <div id="picturearea">%%picture%%</div>
        <div id="miscarea">
            <span id="mood">%%mood%%</span>
            <span id="music">%%music%%</span>
            <span id="tags">%%tags%%</span>
            <span id="location">%%location%%</span>
            <span id="security">%%sec_string%%</span>
        </div>
        %%name%% (%%username%%) wrote <!--%%journalname%%--> on %%time%%<br>
        <span id="subject">%%subject%%</span>
        <div id="entryarea">
            %%event%%
        </div>
        <script>
            // Let's make the mood match the other items at the top
            if (document.getElementById("mood").innerHTML !== "") {
                document.getElementById("mood").innerHTML = document.getElementById("mood").innerHTML.replace(/<B>current mood:<\/B>/, "<b>Mood:</b>");
            }
            // Now the same for the music
            if (document.getElementById("music").innerHTML !== "") {
                document.getElementById("music").innerHTML = document.getElementById("music").innerHTML.replace(/<B>current music:<\/B>/, "<b>Music:</b>");
            }
            // Remove the extra space in the tags area
            if (document.getElementById("tags").innerHTML !== "") {
                document.getElementById("tags").innerHTML = document.getElementById("tags").innerHTML.replace(/<BR>/, "") + "<br>";
            }
            // And now the same from the location
            if (document.getElementById("location").innerHTML !== "") {
                document.getElementById("location").innerHTML = document.getElementById("location").innerHTML.replace(/<BR>/, "") + "<br>";
            }
            // Let's make the security display more consistent
            if (document.getElementById("security").innerHTML === "friends<BR>") {
                document.getElementById("security").innerHTML = "<b>Security:</b> Friends";
            } else {
                if (document.getElementById("security").innerHTML === "<B>Security:</B> private<BR>") {
                    document.getElementById("security").innerHTML = "<b>Security:</b> Private";
                } else {
                    if (document.getElementById("security").innerHTML === "") {
                        document.getElementById("security").innerHTML = "<b>Security:</b> Public";
                    }
                }
            }
        </script>
    </body>
</html>

When you finish with the file, your Semagic preview will look something like this:

I wanted to make it a bit prettier...maybe add a subtle background and round the borders slightly, but Semagic's IE ActiveX control doesn't seem to support anything that wasn't supported by IE8, even though I have IE11 installed. At least that gets rid of the eye-searing white background that was a pain when writing entries late at night.

I did manage to get round borders around the userpic, but I had to cheat to get them — I just made a small PNG that I encoded using base64 and put in the file using the data: URI scheme. Because the data: URI scheme requires the file be encoded as text, I had to shrink the file down quite a bit. The original PNG was 356 bytes. Instead of using a 256 color palette, I used an 8 color one. That saved 69 bytes. Running OptiPNG on it shrunk it by another 18 bytes. Removing the chunk that says what software created the file dropped another 37 bytes. So the originally 356-byte file is now a 232-byte file. In base64, it's 334 bytes of text. If you're still with me and you want the rounded borders as a reward for reading that, replace the CSS at the top for #picturearea with this new code for #picturearea and #picturearea img (preview of the difference is below if you can't see it):

#picturearea { float: left; margin-right:2px; color:#000; background: #000 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHAAAABwBAMAAAA0zul4AAAAGFBMVEVmZmYiIiIEBARTU1MyMjLMzMyZmZmurq6h+q9mAAAAi0lEQVRYw+3ZwQnCQBSE4SeIZ91UsEMaEIJnSWpYvQripgK3fmt4c/Wf+9fAPyGpXpIrkkKqWyS3FCmkrae3SKH5tLfkxmtV6J52rY2jot6+efh8l5h7M9bXmHYHjmucPw58HIBAIBAIBAKBQCAQCAQCgUAg8N+hHWbtFGzHZzt3+4HdTvr+ieDdFj964bDUYUo5lwAAAABJRU5ErkJggg==') 50% 50% no-repeat; width: 112px; height: 112px; }
#picturearea img { position: relative; top: 6px; left: 6px; }

It's a pretty subtle rounding effect and the regular border might be good enough. Here's a comparison of the plain border and the rounded edge, in case you wanted to see it before using it:

Of course, with the knowledge of the little quirks of Semagic's template system, you can make a better preview. Maybe you could style it so it looks exactly like the journal style you use. I didn't because I wanted it generic. Besides, the two journals I post to have different styles. I hope this was useful to someone.