Live Redesign

It’s this time already and I am about to start chopping the new design. I have taken a local copy of all the server files and have setup everything so as soon as I press save the file is automatically uploaded back to the server.

I can’t wait to see the new design up and running so I’m going to get started, underneath here should be the live blog section where I will post small updates to what I am doing. I will keep my eyes on the comments if you have any questions.

Thank you for coming to check my progress and please remember to share this with as many people as you can.


Im just working on the post titles right now


The LIVE redesign of ValidateThis is coming along nicely. Just been adding some more behind the scene bits


The header is coming along nicely, still not sure on this menu. Will it do for now?


Just messing around with the header and my mountain like effect. z-indexing used to be hard but I find it really easy now


Ok it’s setup but I will re-active it only when it is needed


This cookie control is stupid. The web should be open and about Conventions not Requirements


Just adding in some Cookie control to ValidateThis to make sure I comply with the new EU Law :-(


Woah that looks funky… A massive header!


What’s everyone upto today? I’m just about to start working on again, getting closer to finishing it


Had to resort to an extra div but the end effect is there… I bet this looks horrible on a mobile upto yet haha


The share box looks great here but Im having to rethink, try liking on FB, ideas?


Now to get rid of the AddThis wordpress plugin as it seems to be added to every Liveblog entry aswell


Ok I think that’s good, what you think? looks better in firefox


Check out the new share box in Firefox and then Chrome… Firefox seems to do a better job at clipping 😉


Points to anyone who knows the best way to vertical align text inside a single element. Not wanting line-height as it could be 2 lines


Want to follow along with what I’m working on? Go to a single blog entry (not the homepage). Just before the comments 😉


And were back, LIVE redesign of Day 3 is gonna be a short one but its a labor of love so why not get a few hours in?


I have just identified a problem with the site that is affecting speed, but I will do all the speed optimizations in one go


Just about to setup #Chrome remote debugging on my #Android tablet. Gotta love these features thanks @paul_irish @ChromiumDev @googlechrome


A nice and simple footer for


Its looking good up to yet, now onto the footer text and logo


I’m just working on the footer now, check out the CSS3 circles complete with clipping


Pc…. sooo…. slow…


Ooohhh it looks pretty being all dark! O_o


The white theme is growing on me, so I will create a theme option to easily switch back if I want to. TwentyEleven has these built in


Just about to start working on again in my live redesign. Just getting a plan together for the next step and mobile


Well work on is done for the day. I will pick up where I left off after work tomorrow. What do you think upto yet?


Now to add a background vignette effect. Anyone see any examples of this in the wild?


Ok so the sidebar is complete now, minus a few tweaks, but the look of it is there, check it out


That’s both of the Twitter box’s complete, along with custom JS.. What do you think?



That took longer than I though, but I now have a list of recent followers, quick share to all your friends so they can be on it


Just creating some Javascript / jQuery to get a list of my recent followers and display then just how I want them :-)


It need some tweaking but it works now, AuthorBox complete @andrewbeniston


Now the author box is dynamic lets test it for a different user! @andrewbeniston


Just getting the user data in wordpress with a set variable and falling back to a default profile if its not set $curauth = ($currentAuthor) ? get_user_by(‘id’, $currentAuthor) : get_user_by(‘id’, 2);


That’s the static version done, now to make it dynamic. Still want one extra effect but it can wait until later today



I can already see where I can optimize thing, but I will leave them for now and write them in to articles explaining why


Check out my pure #css3 hello my name is sticker, nearly finished with the author box now


Chopping sprites is fun! Just got all the images ready for the author box


Base widget styling is done, onto my new author box, static at first then make dynamic with wordpress author info


The widget area is coming along nicely, just added some CSS3 transitions but only working in #ff at the minute


The widget sidebar is coming along nicely, still some tweaking needed


Working through someone else’s theme is weird at first, until you start getting your head around it


First, copy the TwentyEleven theme as a starting point and customize the settings


Testing, testing, 1,2,3! Does the liveblog work?

  • ArtWorked (@ArtWorked)

    @AaronLayton I would never use WordPress default theme as starting point, Although I know many do. It’s a messy theme :)

  • Dylan Cook

    Would it not have been quicker for you to build it from scratch, so its your way of coding and there are no nasty surprises? Or am I just being a control freak a usual 😉

    • Aaron Layton

      Nah it would have been better for sure, but would have taken longer… When I started redesigning I was only going to change a few colours and images… then I just started adding more to it

  • Roberto

    I like the new design. Looks great in SG2 :)

    Finally was an easy update. True?

  • Ryan Williams (@thrik)

    @AaronLayton They look good. Think I can see where this is going based on the teaser header image 😀

  • Ryan Williams (@thrik)

    @AaronLayton Love it, very cool idea.

  • Henry Puttick (@HPuttick)

    @AaronLayton r u making that for desktops only atm. On the iphone parts are weird looking. :/ looks good though.

  • Tanguy Martin (@tanguy_martin)

    @AaronLayton I like the effect when you hover on the social media icons

  • Smudge (@SmudgeGD)

    @AaronLayton looking good on desktop… some funkiness going on in mobile!

  • Deon Thomas (@DuffleDoe)

    @AaronLayton very cool!

  • Webdev @ 2toria (@2toria_webdev)

    @AaronLayton Looks great in Chrome/Firefox, but it seems broken on Safari on the iPad. Just a heads up.

  • Mat Richardson (@2toria_webdev)

    @AaronLayton I wondered about that before. Seems to take a long while to load all of the tweet/G+ icons into your twitter feed..

  • ArtWorked (@ArtWorked)

    @AaronLayton I bet it still better than an over priced MAC !

  • ArtWorked (@ArtWorked)

    @AaronLayton good luck mate, it must be quiet challenging but impressive concept and work 😉

  • Micah Godbolt (@micahgodbolt)

    @AaronLayton display table cell?

  • Steven Schobert (@stevenschobert)

    @AaronLayton have an example?

  • Carlos Ramos (@OMGCarlos)

    @AaronLayton Easiest way would be to set “display: table;” or “display: table-cell;” and then “vertical-align: middle;”

  • Viktor Rutberg (@vrutberg)

    @AaronLayton padding-top and padding-bottom perhaps?

  • Christian Schaefer (@derSchepp)

    @AaronLayton nope, you need at least two.

  • Patrick Schmidt (@Woellchen)

    @AaronLayton display: table-cell; vertical-align: middle; i think

  • Tiffany Tse (@tiffany_tse)

    @AaronLayton I like the idea of doing a live redesign. Cool stuff. :-)

  • sreejesh kv ✔ (@sreejesh_kv)

    @AaronLayton display:table-cell with vertical-align:middle ?

  • Ryan Williams

    Looking mega right now. 😀

    • Aaron Layton

      It’s getting there slowly… 

  • Ryan Williams (@thrik)

    @AaronLayton Don’t know if it’s changed, but last year the ICO said their enforcement will be minimal until web browser controls improve.

  • Ryan Williams (@thrik)

    @AaronLayton As in you get letters if someone reports you, not fines. Also it only affects non-essential cookies (ie: analytics).