Showing posts with label html. Show all posts
Showing posts with label html. Show all posts

Tuesday, 28 July 2015

Change Blogger's "Cookie Consent" bar


If like me you are a user of blogger you will have no doubt notice that Google have kindly added a cookie consent message to your blog.

Image

You may have also seen the announcement when signing into the blogger

Image

Leading you to here to find about more information, including details on how to change the cookie consent bar to be appropriate for your blog.

If you want to change the values in the pop-up bar you can do so by adding a <script> tag into your templates <head>.

Log into Blogger, select Template from the menu and choose "Edit HTML" under the template.

In between the <head> and </head> tags you need to add a script tag and set a variable called "cookieOptions" which contains a json data e.g.:

<script>cookieOptions = {"msg": "This website uses cookies to ensure you get the best experience", "link": "http://www.stuffaboutcode.com/p/about.html", "close": "Ok", "learn": "More" };</script>

Will change the bar to:

Image

The tags all change particular elements of the bar:
  • msg = the message displayed in the box
  • link = the url which clicking "Learn More" will redirect too
  • learn = the text in the "Learn More" button
  • close = the text in the "Got it" button
Note - the official page says the "msg" tag is actually "message", this is incorrect, changing "message" wont affect it.

You don't have to change all the elements, if you just wanted to change the message you could use:

<script>cookieOptions = {"msg": "This website uses cookies to ensure you get the best experience"};</script>

and all the other elements would remain the same.

You can also disable the bar setting cookieChoices to a blank json document using:

<script>cookieChoices = {};</script>


Tuesday, 24 April 2012

Responsive web design example and source code

Anyway...  I recently posted a blog about a building a single page website which used media queries to change layout in real-time between a desktop & mobile format.  Click here to read it.

I few people have contacted me to ask if I would provide a link & source code for the page, so here it is:
Fyi - I've made a couple of changes in the last few days.

Adding a meta tag to enable viewport in mobile browsers
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Adding a condition to default the layout to desktop if the browser was IE8 or below
<!--[if lte IE 8]>
       <link rel="stylesheet" 
            href="browser-layout.css" 
            type="text/css" />
<![endif]-->

Saturday, 21 April 2012

Responsive design, Media queries and IE9

Getting media queries working with IE9!

Anyway...  I have had a complete nightmare getting media queries with IE9 and its been something of a battle to get it working...

It all started when I was buying train tickets the other day on www.firstgreatwestern.co.uk and noticed a really great implementation of responsive web design (I'm paraphrasing but one website, different layouts for desktop, mobile, tablet changed dynamically using CSS3 media queries) and I thought I gotta find out how that works.

I created a really simple webpage with a banner, navigation, main content, additional content and footer layout, I then created a CSS to apply a style and typical desktop layout (fixed window, dual column, etc). 

Image
I then created a second CSS which would apply a typical mobile layout (100% width, single column, left justified, key content only).

Image

So responsive design is all about making these transitions in real-time as the environment changed, and this was what I was impressive with on the first great western website, when I re-sized the browser it suddenly started showing a different view; this was my task, make the browser change between these view automatically using CSS3 media queries.

In order to do this I started by splitting my 2 CSS's into 3:
  • base - the styles that where consist amongst the 2 layouts (fonts, colors, etc)
  • desktop layout - the styles which made the page look like a desktop page (floats, text alignment, etc)
  • mobile layout - as above but for mobile
I then changed my html page to use media queries to select the right layout CSS based on screen width.


<link rel="stylesheet" 
    href="base.css" 
    type="text/css" />
<link rel="stylesheet" 
    href="mobile-layout.css" 
    type="text/css" 
    media="all and (max-width:499px)" />
<link rel="stylesheet" 
    href="desktop-layout.css" 
    type="text/css" 
    media="all and (min-width:500px)" />

The media queries are really simple and basically say for all media types (screen, print, etc) where the screen width is up to 499px apply the mobile-layout.css and where the screen width is over 500px apply the desktop-layout.css.

Success - I now had a webpage which dynamically changed its layout based on the screen size... As long as I used Chrome or Firefox....  Try as I might I could not get it working in IE; now I already knew media queries only worked in IE9 and that they wouldn't work if the browser was compatibility mode, but I was using IE9 and it wasn't in compatibility mode.  Arghhhh.

It took me a VERY long time to work out what I had done wrong.  To explain, I wrote this prototype on the train to London, using my netbook, which doesn't have a web editor or development environment installed so I hand crafted the code in notepad and opened the files direct in the browser, and I hadn't included a very important line at the top of my html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

I hadn't told Internet Explorer what type of document it was, and as it was getting the file from the file system, not a webserver its seems it wasn't prepared to decided what it was either; unlike Chrome of Firefox.

So the moral is, always include your doctype as it seem IE is becoming a stickler for standards!

The prototype can be viewed here just open it and try re-sizing the browser.