{"id":8969,"date":"2013-03-01T13:25:04","date_gmt":"2013-03-01T13:25:04","guid":{"rendered":"https:\/\/brennigjones.com\/blog\/?p=8969"},"modified":"2013-02-28T22:10:47","modified_gmt":"2013-02-28T22:10:47","slug":"redesigning","status":"publish","type":"post","link":"https:\/\/brennigjones.com\/blog\/?p=8969","title":{"rendered":"Redesigning"},"content":{"rendered":"

The observant, regular visitor (provided that person is a non-mobile device, non-tablet user) will have noticed that this website has been going through a serious of redesign experiments in the last week.<\/p>\n

I have been playing with seven design variations. I liked bits of most of them, but none gave me everything I felt I was looking for.<\/p>\n

After many hours of scrabbling about, I came to realise that I wasn’t going to find an off-the-shelf design that ticked all of my boxes.<\/p>\n

There was nothing for it.\u00a0It was time to roll my sleeves up and crack and hack the hundreds of lines of css code that hold this website together.<\/p>\n

Unfortunately, though, the old design was put together by someone else.\u00a0And hacking about with someone else’s css is never fun. Every change contemplated, every edit made, everything has to be carefully scrutinised.<\/p>\n

Why?<\/p>\n

Because what looks like a simple ever so tiny tweak here, could have massive implications in a different section of the website.<\/p>\n

I decided that the base design I wanted to use would be the Dot-B.<\/p>\n

After installing Dot-B, the first thing I did was incorporate a sideview of the Bandit’s fuel-tank\/engine cross-section, in the header.<\/p>\n

\"cropped-61.jpg\"<\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Then I scrolled down to a post and used the css (cascading style sheet) design behind that as my proof-of-concept.<\/p>\n

\"BlogUpdate1\"<\/a><\/p>\n

 <\/p>\n

 <\/p>\n

The first view looked like this.<\/p>\n

 <\/p>\n

I decided I didn’t like the text size; I wanted the font to be slightly larger.<\/p>\n

 <\/p>\n

 <\/p>\n

\"BlogUpdate2\"<\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

A quick tweak of the css gave me this, slightly too large, text.<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\"BlogUpdate3\"<\/a><\/p>\n

 <\/p>\n

This is a much better font size, but I felt unhappy with the mouse-over behaviour of the post title.<\/p>\n

 <\/p>\n

I also wanted to change the hyperlink colours<\/p>\n

 <\/p>\n

 <\/p>\n

\"BlogUpdate4\"<\/a><\/p>\n

 <\/p>\n

A few minutes later and the mouse-over behaviour of all post titles had been improved.<\/p>\n

 <\/p>\n

I also felt that the new ‘first-look’ at hyperlinks and the mouse-overs of hyperlinks was an improvement.<\/p>\n

 <\/p>\n

\"BlogUpdate5\"<\/a><\/p>\n

 <\/p>\n

Finally, a cross-browser compatibility check showed that a couple of browsers offered poor granular definition between shaded\/unshaded background and foreground text.<\/p>\n

A few minutes later this was fixed.<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Not too long ago, hacking another person’s css, to produce design and functionality changes across an entire website, in this manner, would have been a long, slow and laborious process.<\/p>\n

All of these changes took fifteen minutes.<\/p>\n

I have used a css editor called Sylizer<\/a>, to made these complex alterations.<\/p>\n

Stylizer is, quite simply, the mutt’s nuts.<\/p>\n

I might not stick with Dot-B, as a design, but I shall be sticking with Stylizer<\/a> as my css-Editor of choice.<\/p>\n","protected":false},"excerpt":{"rendered":"

The observant, regular visitor (provided that person is a non-mobile device, non-tablet user) will have noticed that this website has been going through a serious<\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-8969","post","type-post","status-publish","format-standard","hentry","category-stuff","two-columns"],"_links":{"self":[{"href":"https:\/\/brennigjones.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/8969","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/brennigjones.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/brennigjones.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/brennigjones.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/brennigjones.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8969"}],"version-history":[{"count":0,"href":"https:\/\/brennigjones.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/8969\/revisions"}],"wp:attachment":[{"href":"https:\/\/brennigjones.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8969"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/brennigjones.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=8969"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/brennigjones.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=8969"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}