Archive
Google Web Designer
What is Google Web Designer?
When you create advertising creatives with Google Web Designer, you can use a library of components that lets you add image galleries, videos, ad network tools, and more.
Google Web Designer’s Code view lets you create CSS, JavaScript, and XML files, using syntax highlighting and code autocompletion to make your code easier to write, with fewer errors.
System requirements
| Minimum | Recommended | |
|---|---|---|
| Operating system | Windows® 7/ Windows 8 Mac® OS X 10.7.x or later |
Windows® 7/ Windows 8 Mac® OS X 10.7.x or later |
| Processor | Intel Pentium® 4 or AMD Athlon 64 processor | Intel Pentium® 4 or AMD Athlon 64 processor |
| Memory | 2 GB RAM | 4 GB RAM |
| Screen resolution | 1280×1024 | 1920×1080 |
| Application window size | 1024×768 minimum | 1024×768 or larger |
| Internet connection | Required for initial use after download, for updates, and for help access. | Required for initial use after download, for updates, and for help access. |
The Web Designer interface
Google Web Designer has a large central area for building your projects and editing code. The central area is surrounded by a tool bar, a tool options bar, a timeline, and a set of panels that let you do several things, including modify elements, add components, and add events.
The workspace
In the center of the Google Web Designer interface is the workspace. In Design mode, the workspace shows your images, text, and other elements visually, just as they will be displayed as they will appear in a browser. In Code view the workspace shows your code with appropriate color coding and formatting.
View bar
The view bar lets you choose between Design and Code mode, lets you preview your HTML and publish your ad, and lets you change the zoom level and which page you’re working on.
Tools
The tool bar contains tools for creating and manipulating elements on the stage and in the workspace. This includes tools for creating text and simple page elements, color selection tools, and 3D tools.
| Tool | Description |
|---|---|
Selection tool |
Select and move objects in the workspace |
3D object rotate tool |
Rotate objects in three dimensions |
3D object translate tool |
Move objects in three space |
Tag tool |
Create HTML tags of any type by clicking and dragging on the stage |
Text tool |
Add text |
Shape tool |
Create elementary shapes |
Paint bucket tool |
Modify the color of elements in your project |
Ink bottle tool |
Modify the line color and stroke of elements in your project |
3D stage rotate tool |
Change your 3D view of the project |
Hand tool |
Change your view of the workarea |
Zoom tool |
Zoom in and out on your creative |
Tool options
The tool options bar shows options for the currently selected tool. For example, when the text tool is selected, the tool options bar shows font and text layout options.
Timeline
The timeline lets you create animations using keyframes. In Quick mode, the animation is created scene by scene; in Advanced mode you can animate each element separately.
Panels
The panels section of the interface contains the Color, Properties, Components, Events and CSS panels. Panels can be minimized or dragged to a different position in the panels section.
Open source components and licenses
Included Software and Licenses
The following open source software is distributed and is provided under other licenses and/or has source available from other locations.
| Package name | License |
|---|---|
| Webfont | Apache license 2.0 |
| LESS – Leaner CSS v1.3.3 | Apache license 2.0 |
| GL-Matrix | The zlib/libpng license |
| jsbeautify | MIT license |
| uglifyjs | BSD license |
| Codemirror 2 | MIT license |
| Chromium Embedded Framework | BSD Simplified license |
| NSIS (Nullsoft Scriptable Install System) | zlib/libpng license, bzip2 license, and Common Public License version 1.0 |
| Zip Utils | info-ZIP license, zlib license |
| JSON CPP | MIT license |
| Google Fonts | Open source font licensing |
A Beautiful CSS3 Animation
<!–DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Untitled Document</title>
<style>
#sweet {
position: fixed;
margin: 0 45%;
top: 10em;
}.intro {
background-color: #fff;
border: 2px dotted #f46;
box-shadow: 0 0 18px hsla(0,0%,0%,.5);
width: auto;
height: auto;
-webkit-animation: round 3s linear infinite;
transition: border-radius 0.3s linear;
}.outro {
background-color: #1f1f24;
margin: 0px;
border: 5px solid #c16;
border-radius: 0px;
width: auto;
height: auto;
box-shadow: 0 0 18px hsla(0,0%,0%,.5);
-webkit-animation: rounddd 9s linear infinite;
transition: border-radius 0.3s linear;
}.intro:hover {
border-radius: 35%;}
.outro:hover {
border-radius: 50%;
}
@-webkit-keyframes round {
0% {-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-ms-transform: rotate(720deg);
-o-transform: rotate(720deg);
transform: rotate(720deg);
}100% {-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}@-webkit-keyframes rounddd {
0% {-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}100% {-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-ms-transform: rotate(720deg);
-o-transform: rotate(720deg);
transform: rotate(720deg);
}
}
</style>
</head><body>
<div id=”sweet” align=”center”>
<div class=”outro”>
<div class=”intro”>
<div class=”outro”>
<div class=”intro”>
<div class=”outro”>
<div class=”intro”>
<div class=”outro”>
<div class=”intro”>
<div class=”outro”>
<div class=”intro”>
<div class=”outro”>
<div class=”intro”>
<div class=”outro”>
<div class=”intro”>
<div class=”outro”>
<div class=”intro”> <div class=”outro”><div class=”intro”>
<div class=”outro”>
<div class=”intro”>
<div class=”outro”>
<div class=”intro”></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></body>
</html>
Related articles
- LESS – The CSS Preprocessor, Tools, Mixins And Libraries (designresourcebox.com)
- What is your plan B when selling your Los Gatos house!? (davidmortaz.com)
- CSS3 Animation Demystified (teamtreehouse.com)
- Simple Internet Marketing Guidelines You Can Feel Good About (extra-cash-online.com)
How to create simple tree structure menu using jquery and css
Hey Everyone! It’s been long since I wrote any tutorial but I hope you must be enjoying.
This week I have a simple solution yet to another complicated problem. It’s the tree structure menu and here are its features.
- Multiple branches or sub menus.
- Dynamic change of arrows on toggle of the menu items.
- Simple css for easy understanding.
- Ultra slim Jquery.
- Sliding animation for the sub menus.
Now that you know its features here is where you can download them from. You are free to use it anywhere.
Now for the learning part, like always I’ll give you a whole break up on how I did it.
HTML Part
First we will get out HTML ready. Create a main un-ordered list with ID ‘treeMenu’. Inside this ul tag we have the first level menu items inside each li tag. If you would like to have the second level sub items then within one li tag create another ul tag and place the sub items inside it. Now for that li tag add a class called ‘contentContainer’. This is for our reference so that we know whichever li tag with class ‘contentContainer’ will have a ul item nested inside which will have second level items. And we set display none to all the second level and third level ul items. Because we don’t want to see them in the first go. They should slide down only on clicking their parent li tag.
Note: Do not forget to include JScript.js file in the header. We add this for the jquery code to work in the later part. It is the normal jquery code that you get from www.jquery.com
To be more clear here is the code.
- Tamilnadu
- Bangalore
- Orissa
- Mangalore
- Calicut
- Cochin
- Andhra
Now for the Jquery part
As we all know jquery is the simplified form of javascript and it has some great functions. One such function is ‘toggle()’. This function gives out a even with every click. For eg: if the first click gives out ‘A’ event, the second click gives ‘B’ event and so on. Now these events can be got with the use of multiple ‘function()’ separated by a comma. Each function() will output a event. Here how it goes in simple terms.
$("#id").toggle( function() { // START FIRST CLICK FUNCTION // WRITE ANY ACTION HERE }, // END FIRST CLICK FUNCTION function() { // START SECOND CLICK FUNCTION // WRITE ANY ACTION HERE }, // END SECOND CLICK FUNCTION … … … function() { // START LAST CLICK FUNCTION // WRITE ANY ACTION HERE } // END LAST CLICK FUNCTION ); // END TOGGLE FUNCTION After the last click function if still the #id is clicked then it start looping to the first click function. This is how a toggle() function works. Now that we understood this lets look into our code and see how it has helped us.
First we get ul tag through its id and target all its li tags.
$("#treeMenu li").toggle(); Now the first function() meant for the first click does the following magic.
- On click on the
liit finds its childuland slide it down. We will be using theslideDown()function for this magic. It animates the sub menu to slide down and appear. - Then we check if that
liwhich was clicked hasClass‘contentContainer’. We will be usinghasClass()function for this magic. By default in css we will add a right arrow icon to the‘contentContainer’class. - So if the
hasClass()turns out to be positive then we replace‘contentContainer’class with‘contentViewing’class. Now the‘contentViewing’class has a down arrow added to it through css. - And this is how we change the arrows in response to the closing and opening of the menus.
- Now for the closing of the menus we will be using Second click
function(). Because the firstfunction()is used for the first click, automatically the second click calls for the secondfunction(). - Again here will check up if the
lihas aulas its child and slide it up. We will be usingslideUp()function for this magic. It animates the menu to move up and disappear. - Also we would replace the
‘contentViewing’class with‘contentContainer’class. So that the arrow changes automatically back to closed mode.
Here is the full jquery code.
// <!--[CDATA[ // $(document).ready(function() { //Class 'contentContainer' refers to 'li' that has child with it. //By default the child ul of 'contentContainer' will be set to 'display:none' $("#treeMenu li").toggle( function() { // START FIRST CLICK FUNCTION $(this).children('ul').slideDown() if ($(this).hasClass('contentContainer')) { $(this).removeClass('contentContainer').addClass('contentViewing'); } }, // END FIRST CLICK FUNCTION function() { // START SECOND CLICK FUNCTION $(this).children('ul').slideUp() if ($(this).hasClass('contentViewing')) { $(this).removeClass('contentViewing').addClass('contentContainer'); } } // END SECOND CLICK FUNCTIOn ); // END TOGGLE FUNCTION }); // END DOCUMENT READY // ]]>Now for the beautiful CSS
Just a few padding and margins to keep them appealing. Do not miss to note the arrow images I have given in the CSS.
/* START TREE MENU */ #treeMenu li { border-left: 1px solid #FF7300; padding:0 0 10px 10px; color:#FFFC00; } #treeMenu li.contentContainer { background:url('right.png ') no-repeat -3px 6px; color: #FFFFFF; cursor: pointer; } #treeMenu li.contentViewing { background:url('down.png ') no-repeat -4px 6px; color: #FFFFFF; } .contentContainer ul, .contentViewing ul { color:#FFFC00; margin:15px 0 0 10px; } /* END TREE MENU */ And that is it my friend. It is done. I hope you understood this magic. Do let me know through comments if you have any doubts and I’ll be glad to clear it out.
CODE HERE
<style>
body{
margin:0;
padding:0;
background:#f1f1f1;
font:70% Arial, Helvetica, sans-serif;
color:#555;
line-height:150%;
text-align:left;
}
a{
text-decoration:none;
color:#057fac;
}
a:hover{
text-decoration:none;
color:#999;
}
h1{
font-size:140%;
margin:0 20px;
line-height:80px;
}
#container{
margin:0 auto;
width:680px;
background:#fff;
padding-bottom:20px;
}
#content{margin:0 20px;}
p{
margin:0 auto;
width:680px;
padding:1em 0;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<ul id="sitemap">
<li><a href="#">First link</a>
<ul>
<li><a href="#">First link</a>
<ul>
<li><a href="#">First link</a></li>
<li><a href="#">Second link</a></li>
<li><a href="#">Third link</a></li>
<li><a href="#">Fourth link</a></li>
<li><a href="#">Fifth link</a></li>
</ul>
</li>
<li><a href="#">Second link</a></li>
<li><a href="#">Third link</a>
<ul>
<li><a href="#">First link</a></li>
<li><a href="#">Second link</a></li>
<li><a href="#">Third link</a></li>
<li><a href="#">Fourth link</a></li>
<li><a href="#">Fifth link</a></li>
</ul>
</li>
<li><a href="#">Fourth link</a>
<ul>
<li><a href="#">First link</a></li>
<li><a href="#">Second link</a></li>
<li><a href="#">Third link</a></li>
<li><a href="#">Fourth link</a></li>
<li><a href="#">Fifth link</a></li>
</ul>
</li>
<li><a href="#">Fifth link</a></li>
</ul>
</li>
<li><a href="#">Second link</a>
<ul>
<li><a href="#">First link</a>
<ul>
<li><a href="#">First link</a></li>
<li><a href="#">Second link</a></li>
<li><a href="#">Third link</a></li>
<li><a href="#">Fourth link</a></li>
<li><a href="#">Fifth link</a></li>
</ul>
</li>
<li><a href="#">Second link</a>
<ul>
<li><a href="#">First link</a></li>
<li><a href="#">Second link</a></li>
<li><a href="#">Third link</a></li>
<li><a href="#">Fourth link</a></li>
<li><a href="#">Fifth link</a></li>
</ul>
</li>
<li><a href="#">Third link</a></li>
<li><a href="#">Fourth link</a></li>
<li><a href="#">Fifth link</a></li>
</ul>
</li>
<li><a href="#">Third link</a>
<ul>
<li><a href="#">First link</a></li>
<li><a href="#">Second link</a></li>
<li><a href="#">Third link</a>
<ul>
<li><a href="#">First link</a></li>
<li><a href="#">Second link</a></li>
<li><a href="#">Third link</a></li>
<li><a href="#">Fourth link</a></li>
<li><a href="#">Fifth link</a></li>
</ul>
</li>
<li><a href="#">Fourth link</a></li>
<li><a href="#">Fifth link</a></li>
</ul>
</li>
<li><a href="#">Fourth link</a>
<ul>
<li><a href="#">First link</a></li>
<li><a href="#">Second link</a></li>
<li><a href="#">Third link</a></li>
<li><a href="#">Fourth link</a></li>
<li><a href="#">Fifth link</a></li>
</ul>
</li>
<li><a href="#">Fifth link</a>
<ul>
<li><a href="#">First link</a></li>
<li><a href="#">Second link</a>
<ul>
<li><a href="#">First link</a></li>
<li><a href="#">Second link</a></li>
<li><a href="#">Third link</a></li>
<li><a href="#">Fourth link</a></li>
<li><a href="#">Fifth link</a></li>
</ul>
</li>
<li><a href="#">Third link</a></li>
<li><a href="#">Fourth link</a>
<ul>
<li><a href="#">First link</a></li>
<li><a href="#">Second link</a></li>
<li><a href="#">Third link</a></li>
<li><a href="#">Fourth link</a></li>
<li><a href="#">Fifth link</a></li>
</ul>
</li>
<li><a href="#">Fifth link</a></li>
</ul>
</li>
</ul>
</div>
</div>
JS : code
this.sitemapstyler = function(){
var sitemap = document.getElementById("sitemap")
if(sitemap){
this.listItem = function(li){
if(li.getElementsByTagName("ul").length > 0){
var ul = li.getElementsByTagName("ul")[0];
ul.style.display = "none";
var span = document.createElement("span");
span.className = "collapsed";
span.onclick = function(){
ul.style.display = (ul.style.display == "none") ? "block" : "none";
this.className = (ul.style.display == "none") ? "collapsed" : "expanded";
};
li.appendChild(span);
};
};
var items = sitemap.getElementsByTagName("li");
for(var i=0;i<items.length;i++){
listItem(items[i]);
};
};
};
window.onload = sitemapstyler;
Related articles
- jQuery and CSS Menus with Animations (itswadesh.wordpress.com)
- creating unordered list with jquery (daniweb.com)
- 20 jquery drop down menus you should try (itswadesh.wordpress.com)
- Superslides – A jQuery Full Screen Slider Plugin (functionn.blogspot.com)
- Interactive Image Vamp up with jQuery, CSS3 and PHP (mt-soft.com.ar)
Changing Backgrounds with body class()
The body_class() WordPress function attaches a list of classes to the <body> element according to what type of page is being displayed.
These classes can be used — in conjunction with your theme’s stylesheet — to display different backgrounds on different pages.
Let’s assume your header.php template file contains:
<body <?php body_class(); ?>>And your current CSS for the background looks like:
body {background:#fff url(images/bg.jpg);}
In a single post, your body tag would look like:
postid-188 single-format-standard logged-in admin-bar">A category page could have:
<body class="archive category category-cat-a category-9 logged-in admin-bar">whilst a tag page might generate:
tag-tag1 tag-92 logged-in admin-bar">The CSS
You can add some new rules to your theme’s CSS to target specific backgrounds at particular pages.
Default Single Post
body.single {background:#ccc url(images/bg-single.jpg);}Single Post with an ID of 188
body.postid-188 {background:#999 url(images/bg-special.jpg);}Default Category Background
body.category {background:#eee url(images/bg-cat.jpg);}Category A Only
body.category-cat-a {background:#ddd url(images/bg-cat-a.jpg);}The possibilities are almost endless.
You can find a full list of the classes generated by the body_class() function in the WordPress Codex.
The Do-it-yourself Market
John Monteleone stated ‘It all comes down to “what is the value of your time”. Do-it-yourselfers and even professionals can spend hours of their time searching forums and discussion groups for solutions to their website issues. Time spent is money lost. Our value is that for a fee, we can solve most issues quickly and save you all those hours of troubleshooting. Those saved hours can be used more productively for being creative and marketing your website.”
911WEBSITEREPAIR.com offers other specialized services, such as, Browser Compatibility, Search Engine Optimization, Website Speed Optimization, Website Security Audits, Graphic Services, Emergency Website Restoration, W3C HTML and CSS Website Markup Validation Service and more….
For information: http://www. 911WEBSITEREPAIR.com
or
Contact: info@911WEBSITEREPAIR.com
Phone: 203-565-6100
Subscribe Via Email
Agaram Foundation
29,Vijay Enclave Krishna Street,
T.Nagar, Chennai - 600 017
Tamil Nadu, India.
Telephone : +91 44 4350 6361
Mobile : +91 98418 91000
Email : info@agaram.in
Site Info
SELVABALAJI NEWS
- An error has occurred; the feed is probably down. Try again later.
Vistor Location
Unknown Feed
- An error has occurred; the feed is probably down. Try again later.
Unknown Feed
- An error has occurred; the feed is probably down. Try again later.
Unknown Feed
- An error has occurred; the feed is probably down. Try again later.
LeadSquared
- 21 Real-life Customer Centricity Examples
- How to Reduce Student Acquisition Cost
- 7 Most Profitable Sales Channel Examples
- Into the Unknown: Embracing a Bold, Student-First Strategy for Enrollment Success
- Top 10 Sales Gamification Tools For 2024
- Top 9 CRMNext Alternatives in 2024
- Closing the Deal: 6 Surefire Strategies to Exceed Your Sales Targets
- Sales Automation 101:Unclog your Sales Pipeline
- KRA of Sales Manager and How to Track Performance
- Top 10 Healthcare CRM in the United States
singershalini
- Untitled
- Pop Shalini Verified #Spotify Artist Playlist
- Pop Shalini's Interesting reads #Murakami
- Pop Shalini performs for Harris Jeyraj's concert with Benny Dayal and Haricharan
- Pop Shalini sings Vandhe Mataram
- Pop Shalini Sings her famous song Mudhal Naal Indru - Unaale Unaale
- Pop Shalini wishes Superstar RajiniKanth on the Dada Saheb Phalke Award
- A song for a Rainy day from my first album #Shalini - Chinna Chinna Mazhai thooral
- ipopshalini Verified Artiste sings Ranjha from Shershaah
- Chennai Floods
Flickr Photos
Advertsiment
S e L v A B a L a J e E 
Recent Comments