Huge thanks to Denny Unger of WorldWorks Games for his considerable help in giving PB an overdue facelift. If you'll pardon the narcissism (yes, that's me looking angsty over on the right), I think it's dead-on.
I had hair then.
My only complaint rests with Blogger itself, whose template obstinately refuses to let me replace the generic masthead but does let me resize a graphic and post it on top of the default graphic. For example, I was unable to erase the blue "chiclets" you see on the left-hand side. Not that they necessarily look bad, but I would have preferred to post Denny's graphic in its original full-size glory. (He actually sent me two of them, one blue; I thought the gray version contrasted better with the background.)
Thanks again, Denny!
21 comments:
My pleasure Mac. Anything to keep you inspired ;) What would I do without Posthumanblues to fill my breaks?
If you need a different treatment or size just give me a shout. I wish I knew more about blogger templates. I suppose we'll have to suffer until someone with more knowledge stumbles by.
Denny
The only thing I can possibly think of (given Blogger's limitations) is to make a taller version to help take up more of the space up there. Then again, looking at it again, I think a taller graphic would still leave an annoying blue border...
In any case, no big deal. I think it looks cool. I can always mess with it later if I decide the version I'm using now is intolerable. ;-)
I dunno, looks good to me. The melancoly 'Mac' topside fits perfectly.
Of course this is from a guy who's own blog looks like a 'National Geographic', so take it for what it's worth! LOL!
Looks excellent, Mac.
Mac, you can take that masthead out and replace it very easily. You just have to change from the "New Blogger" to the "classic Blogger" and hack the HTML.
Anyway, I like the new look! It's fresh and clean, just like a load of laundry out of the dryer! :)
Dane--
Oh, no *way* am I going back to the old Blogger!
You can delete blogger's official header code and add your own html header by going into your template and allowing more than 1 widget in the header area.
Pisces--
Hey, thanks! I'll give that a try.
Hi Mac! First time commenting here. You've got great content, a great mind, and are a great writer. Short on adjectives today. Anyway, I like the new look, and am commenting on this because of various problems blogger has thrown at me, too as they tweak their code. You surely do not need to go back to old blogger, and the custom css template can be tweaked. But first I would try resizing your custom header to about 760x190 or 770x200 or whatever it is to cover up the tictac blue chiclets (if you haven't already). If that doesn't work, download the template or just examine it online to find where the default chiclets banner originates from and replace that with html pointing to your banner jpg. If you are afraid of accidentally reaming the code on your main page, make an invisible test blog and pilot it out there!
cuz… I think the generic blogger look of it really doesn't match your genius content, y'know.
fwiw-
Mac-
I looked at the source code from your page. The default banner for tictacblueberry loads from http://www.blogblog.com/tictac_blue/top_div_blue_left.gif . If you download it you will see it is a 847x240 pixel GIF with transparent areas on the sides. If you re-size your New masthead/banner (to about 770?) so it fits in the non-transparent area, then upload it to blogger/picasa, then go into your template (not the drag-and-droppy interface) and replace the aforementioned url with the linklink to the new revised banner, you should be good. I suggest keeping it exactly the same size, filetype, and transparency so it wedges in there nicely and doesn't throw off the rest of the page.
Hey, BTC!
Thanks for dropping by. I've tried messing with the template and I don't see a way to do it, but I'll try again.
(It *would* look better without those "chiclets," wouldn't it?)
It *would* look better -- especially if you have already created the full-size masthead. You hate to see it cropped down and confined to a corner "free speech area" and to just settle for that.
3 ideas came to mind.
What I suggested was to open the template and search it for the string top_div_blue_left.gif
If you find it is there, then it should be easy to replace with another link to your preferred pre-uploaded file. If you don't find top_div_blue_left.gif then what I said before would not work.
The line of code looks like this (in my browser, not necessarily your template): background: #e0e0e0 url(http://www.blogblog.com/tictac_blue/top_div_blue_left.gif) no-repeat left top;
I've done substitutions of images in the sidebar and body of my blog, so I know it is possible, but maybe blogger loads the header banner a different way. (??) If the css pulls it off another page, then there may not be a url in the template to change. Then I guess you would be stuck with pasting over it, and constrained in how to do so. But I don't really think that is so. I may take a look if I have 15 or 20 minutes to dig up that template and how it appears to an editor within blogger, as opposed to the source code given to a browser.
I should mention another workaround that I am using now. Blogger had suddenly cropped my banner image (masthead) to a thin slice of its former self (December 2007). That pissed me off because I had just re-made it. I found that I could upload it in the drag-and-drop widget template editing interface and drag it to the top of the page (or the bottom of the page) (and by "page" I mean the BODY field or division here). In other words, forget "header". Upload it in the "body" and drag it up above the main columns and sidebar. Visually it is almost indistinguishable. Technically it is in the body. Take a look at mine and you will see that below the Blogger/Google searchbar is a centimeter or two thick strip of blurbage (blogDescription) which is technically the whole header! (I chose to not display any image there.) Below that is a large banner image which is lodged in the code at the very beginning of the body.
I thought that blogger had stopped cropping, resizing, or confining the banner images since I saw a reversion to the way it was before on some course blogs I maintain. However, from what you say, it sounds like they are still messing with it. It annoyed me that I had to keep changing it just to make it stay the same.
So to recap, since that came out so confusing,
my Plan A would be to alter that one line of code (if it is there),
Plan B is to use the (top of the) BODY = (bottom of the) HEADER workaround, and if that was unsatisfactory, Plan C would be to download the template, rename it, (giving full credit), change parts of it, and re-upload it because I figure once it is your own template Blogger would not be updating or messing with it anymore.
Apologies for my ignorance of css, I'm just approaching it as a problem-solver.
FWIW
Mac-
I looked at this template.
Short answer: i think you need to change it -- either by just choosing another, or by customizing it and saving/uploading that.
It is more restrictive than other templates. And if you like that template you can basically use all the things you like about it in your new template.
I created a test blog which i will delete shortly. Please take a look at
http://blueberrytaster.blogspot.com/
for sort of a review of this hexperience.
I made a wide version of your masthead (with a shadow and glowing edge), which was supposed to perfectly slot in to replace the generic-chiclet, but as you can see it floated off to the southeast.
You are welcome to use any of the modified banners I made if you think it is a step up (of course).
I will delete the test blog as soon as I see something from so as not to violate your fundamental POSThuman rights.
Keep writing!
-B
BTC--
Interesting. Damn, those chiclets aren't going anywhere, are they?
Fortunately, I have two full-size versions of the banner currently in use (one gray, one blue). At the moment, I'm leaning toward messing with the template's HTML so that Denny's design shows up as intended.
(I'd switch templates entirely, but this is the only one I really like -- which is pretty amazing given Blogger's sizeable line-up.)
You can probably safely delete the "taster" blog, as it's now obvious I can't do anything without going deeper than I'd wanted to.
Big thanks for the help! :-)
When I saw your original post I thought I would speak up since I had a similar problem and solved it. Unfortunately my two easy solutions don't apply to this (tic-tac blueberry) template (and, yeah, you had probably already thought of them).
It's good that you know which template you like; Blogger's bad for locking up your freedom to fully control it. Their constraints go way beyond the integrity of the graphic design. They don't really have a wide variety of styles; they tend to all share a similar look. But for anything more you just need to roll up your sleeves and dig into the css/html.
I will delete all posthuman content from that test blog and maybe try transplanting a large chunk of the html/css from another template (or vice versa) to see if it creates a viable mashup/hybrid. Now that my mind has locked onto this problem I would like to solve it, and working with it is the best/only way to learn something like this css. I think transplanting entire blocks of code (within tags) might be easier than editing the particular line -- sort of like how transplanting the nucleus or mitochondrial dna is easier than editing the one gene responsible for the disorder. If I come up with a fix before you or someone else does I will be back!
Ja-
-B
The Fix!
(first place I tried, easier than i thought)
Just go in to your template html, scroll down just a ways beyond
/* ---( header and site name )--- */
to where it says
#header {
margin: 0;
padding-top: 25px;
padding-$endSide: 60px;
padding-bottom: 35px;
padding-$startSide: 160px;
and change that to
#header {
margin: 0;
padding-top: 0px;
padding-$endSide: 0px;
padding-bottom: 0px;
padding-$startSide: 0px;
check my mock-up
http://blueberrytaster.blogspot.com/
it only takes a minute
but you may need to resize your header at 847x240, using top_div_blue_left.gif from http://www.blogblog.com/tictac_blue/top_div_blue_left.gif as your model, if you want the transparency, gray border, line across the top, etc to all mesh together perfectly.
"but you may need to resize your header at 847x240"
i mean "banner" or "masthead"
OK, I've figured it out. Unfortunately, I'm not satisfied with how it looks. I'm going to put this project on hold temporarily...
Thanks for your comments I saw in e-mail (not here now). Enjoying your free online writings is payback enough. Actually I still feel a little guilty for not having bought any of your books yet (although my unread book stack is already sky-high). I wonder if Amazon has them in the Japan store?
Also, when is anyone ever going to learn css unless they have a problem to solve? And this way I help someone and someone says "thanks".
Learning css/html is probably not a language that would pay back big dividends unless you are a web page designer. We only need it once in a while at times like these and then only because Blogger didn't make it easy. You'd be better off learning French, Russian, Japanese, or German -- one of those human languages.
As for getting control of the header banner, I don't know how to delete the underlying one. Actually, it could be good to have it there because your superimposed gif could have areas of transparency that would allow you to take advantage of the border shadow and line across the top that are there in the default background. I didn't think of that earlier when I made my alternate images but it could be easier to just make it 847x240 with 80 pixels of transparent space around the outside. Hmm… It could only be a problem if you are trying to use something thinner than that. Then the underlying one sticks out like underwear. That's why I applied "blur" to the chiclet-space before I pasted Denny's pic over it.
What you can do, first of all, is play around with those numbers. It will give you the ability to slide your existing uploaded masthead (or any other) around into any x-y position (but i see you've pulled it down now). If you have pre-sized it perfectly, 0 is the number you want.
Secondly, I'll repeat my offer for you to use one of the files I made. It's just the default image, plus some "blur" in the chiclet-space, plus Denny's masthead, plus a drop-shadow, plus… something else? Maybe that was all. They are (still) at these 2 urls:
http://bp2.blogger.com/_gUf8tiSifgg/SBsbzrR3_GI/AAAAAAAACs4/9UlMweEmCv8/s1600-h/NEO_top_div_blue_left.gif
and
http://bp0.blogger.com/_gUf8tiSifgg/SBsbhLR3_FI/AAAAAAAACsw/ElHslTYzrLc/s1600-h/Nuevo3top_div_blue_left.gif
I think one of those might be a good intermediate step between the default and your final goal.
Finally, I think you need to go back to Denny and see if he has a larger version of your preferred masthead. You have 847 x 240 pixels to play with, maybe more if you ignore the sizing of the body of the blog. But if you stay consistent with the body of the blog, the grey shadow and transparent areas that allow that line across the top etc, then you can paste in something sized about 767 x 232 into the free chiclet space. Scaling up the one you had a few days ago (macsblog640.jpg) will get blurry, pixelated, or uncrisp, as you say. Maybe the default isn't so bad; it kinda grew on me again after i had tired of it, since it matches the rest of the style so well. But people expect more originality from you, I suppose.
Bottom line: I'd say to stick up one of my Denny+blueberry remixes until you can get a larger "pittari" (perfect-fit) image from Denny. But that's me. It's your call.
-signing off from japan-
-B
BTC--
Thanks for your comments I saw in e-mail (not here now).
I deleted 'em since I figured out what I was missing and didn't want to bug you. But I guess there's no harm in your reading them.
It's not that I actively dislike the default banner -- like you say, it fits with the rest of the design. But it's limiting.
I'll see what I can come up with. (I'm not much for graphics programs, but this gives me a reason to care.)
Mac-
I had another idea. I just tweaked it, so here is HTML Fix #2, better than HTML Fix #1:
A different, easier, and more elegant solution:
1. Make a jpeg 765 x 239 pixels
2. Upload it in the usual Layout:Page Elements:Edit Header widget. Save.
3. Go to Layout:Edit HTML and
4. Change the html to read:
#header {
margin: 0;
padding-top: 0px;
padding-$endSide: 0px;
padding-bottom: 0px;
padding-$startSide: 41px;
Why?
+ Using a jpeg means you don't have to mess with a gif and creating transparent space, a potential stumbling block and completely unnecessary since the top line and shadows along the blog's borders are already taken care of by the underlying default image.
+ Also, jpegs look better and more photographic.
+ Another side benefit is that the padding-startside variable also controls where the text for Blog-title and blog-description start, so using this method they start in the right place, the same place as the jpeg. The other solution started the text off in the transparent space to the left. NOoo! That really clinches this as a better fix. (You may not be using the text if your blog title is in the jpeg, though.)
- The only complication is that you need to change the padding-$startside varible to 41, instead of zer0ing them all out. Easy. 41px. I tried my estimate of 30, then 39, and those are no good. The magic number is 41 pixels.
http://blueberrytaster.blogspot.com/ is currently displaying that solution (with a somewhat random jpeg) and it looks pretty seamless.
-B
Post a Comment