Friday, January 4, 2013

More blog tweaks - (In your face blogger!)

I've entered the matrix.

You'll never see the world the same again.
So I've jumped in and looked at the code for my blog using "view source code", chrome's developer tools and the Edit HTML feature in blogger template view. ***Please remember that most of the changes were done using Internet Explorer 8 to work around the "Apply to Blog" button issue.***

I see what the missing gadget code should read like, but it is not visible in the code that is displayed for editing by blogger.

So let's review the issue at hand.


In black text are the things that should automatically be showing based on the template, but aren't. In red are the CSS elements I can customize, some of which I screwed up when I added the banner.

So first off let's consider the things that should be showing and aren't.

I'm still perplexed as to why my pages won't show in the header bar and only the first four gadgets. (I can't remember if I tried moving the gadgets around in layout and if that makes a difference, I'll try now.)

WOOHOO!!! In your face blogger!

Like magic, the pages appeared.
Stupid, but all I did was move my gadgets around in layout. As I moved each one up above "My Blog List" it seemed to appear. When I was done the pages magically appeared in the header bar. Who knew?

The translate gadget doesn't show, but I'm not too concerned about that.

Now for the bits in Red.

These are all things that had to be done by customizing the template in the advanced settings. If I recall correctly the header bar font was changed by customizing Links. For the header image and gadget box I used the code from Southern Speakers here and here. For the header I ended up adding 200 to all of the pixel size values except for this one:

.viewitem-panel .viewitem-inner {
top: 300px;
padding-bottom: 120px !important;
height: auto !important;
}
As you can see I left the padding-bottom value at 120 and it seemed to still work.

I also re-sized the image using the trick in the post. In the blog address there is a section that reads s1600. This is your image size at 100%. I ended up with s800 as IE was acting wonky at the time I tried s1200. I think it looks okay, at some point I'll make a new banner to fit the space better.

For the Gadget dock I just put in a value of 400. I may increase it to 425 or 450 if it gets in the way of the dashboard button too much.

For the final piece, the title and description, I have no good work around as yet. The tutorial on Southern Speakers here doesn't work as is. The main reason is that the classes .titlewrapper and .descriptionwrapper don't exist in the flipcard dynamic view. I will go out on a limb and guess that they are not in any dynamic view.

After looking at the code I saw that the blog title is in the HTML title tag. the description is in its own div with the class .title. So I went with the above code snippets and just changed the names to title and .title respectively. It moved both, but also the header background image. So I'll need to play with that some more.

Barring that one incomplete task I'm reasonably happy with the look of the blog. I hope you are too and that this little diversion into the black arts of the web has not driven you to the edge of your sanity.

4 comments:

  1. One problem I've found is your header takes up 2/3's of my screen, which leaves the other 1/3 for your posts, so if you put any biggish pics up, I'll have to scroll up and down to see it all?? Not sure if this is just me or not?

    ReplyDelete
    Replies
    1. Hey Ray, sorry about that. What is your screen resolution? Mine is a whopping 1920 x 1080 pixels. I'll investigate a fix, but there may be nothing for it other than to drastically reduce the size of the header background image. Thanks for letting me know because, as I said before, ultimately the most important thing is that the viewers can get at what they want to read.

      Delete
    2. I've done a few more tweaks. Let me know if that works better for you. Usually when I look at my posts they come up floating above the site, when I read individual ones. I did have the post display under the banner after I replied to your post and it was annoying.

      Delete
    3. All looks fine now Sean! Nice one!

      Delete

LinkWithin

Related Posts Plugin for WordPress, Blogger...