Custom Styling Demos

These demos show how you can completely customize the look and feel of the foobar by changin the various options as desired. Click on a tab to view the different customization demos.

CSS:

.custom-bg .foobar-container {
  background:url(dotted_bg.png) repeat-x;
}

Javascript:

$foobar({
  "height" : {
    "bar" : 100, "button" : 30
  },
  
  "width": {
    "left": "0", "center": "*",
    "right": "0", "button": "80px"
  },
 
  "display" : {
    "backgroundColor" : "transparent",
    "border": "solid 3px #000",
    "button": {
      "backgroundColor": "#800"
    },
    "theme": {
      "bar": "x-white custom-bg"
    }
  },
  
  "messages": [
    "Woo hoo - look how good this bar looks!",
    "There are no limits to the possibilities!"
  ],
  
  "message": {
    "font": {
      "color": "#ff0",
      "size": "24px",
      "shadow": "1px 1px 0 #444",
      "weight": "bold"
    }
  }
});

CSS:

.bottom h1 {
	font:bold 34pt arial;
	color:#9cf;
	margin:0;
	text-shadow:#64665b 0px 2px 1px;
}

.bottom p {
	color:#56584e;
	font-size:20px;
  font-style:italic;
	text-shadow:#f0f3d8 0px 1px 1px;
}

Javascript:

  $foobar({
    "height" : {
      "bar" : 120, "button" : 30
    },
    
    "width": {
      "left": "0", "center": "*",
      "right": "0", "button": "80px"
    },

    "position": {
      "bar": "bottom"
    },    
    
    "display" : {
      "type" : "delayed",
      "delay" : 1000,
      "speed": 100,
      "backgroundColor" : "#ffe9b0"
    },
    
    "messages": [
      "<div class='bottom'><h1>Purchase Now!</h1><p>WOW - this is at the bottom!</p></div>",
      "<div class='bottom'><p>The foobar now works at the bottom. The foobar is awesome!</p></div>"
    ],
    
    "message": {
      "delay": 2000,
      "fadeDelay": 500,
      "navigation": true
    }
  });

PLEASE NOTE : when you close this foobar, it closes completely and does not show the expand button. This is done by setting the display.button.type option to "close". To show the foobar again, click the current tab.

HINT : You can also set the foobar to 'remember' state by setting the cookie options, so if a visitor closes the foobar, it stay's closed.

Javascript:

$foobar({
  "height" : {
    "bar" : 50, "button" : 30
  },
  
  "width": {
    "left": "0", "center": "*",
    "right": "0", "button": "80px"
  },

  "display" : {
    "button": { "type": "close" },
    "backgroundColor" : "#888",
    "theme": {
      "bar": "x-white"
    }
  },
  
  "messages": [
    "<img width='917' height='50' src='demo-banner.png' title='some ridiculous offer' />"
  ]
});

This demo loads your social buttons into the foobar. The script to load the buttons is listed below the foobar initialization code.

CSS:


Javascript:

This demo is similar to demo 4, but these social icons are big. Again the code to include the social buttons is below the foobar code.

CSS:


Javascript:

This demo shows a newsletter opt-in form in the foobar.

CSS:


Javascript:

CSS:


      

      

      
Javascript: