Designer Sandbox http://www.designersandbox.com Online Tips for Web Developer/Designer Thu, 26 Jan 2012 09:33:26 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Centering a div block without the width using pure CSS (All Browser) http://www.designersandbox.com/code/centering-a-div-block-without-the-width-using-pure-css-all-browser/ http://www.designersandbox.com/code/centering-a-div-block-without-the-width-using-pure-css-all-browser/#comments Thu, 26 Jan 2012 09:32:13 +0000 Vincent http://www.designersandbox.com/?p=1790

Easiest way to centering a div using pure CSS

The trick to center the div is to shift the outer and inner div, with the use of position:relative and display:block. Shift the outer block 50% left relative, and then next is to move the inner block back to -50% left. Hope this make sense. This code will work on all browser.

DEMO

html

<body class="ds">
    <div class="wrapper">
        <div class="outer">
            <div class="inner">Centering the DIV</div>
        </div>
    </div>
</body>

css

.ds {
    margin:0;
    padding:0;
}
div.wrapper{
    float: left;
    overflow: hidden;
    position: relative;
    width: 100%;
    background:#00F;
    padding:10px;
    margin:0 -20px;
}
div.outer{
    clear: left;
    float: left;
    left: 50%;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
    text-align: center;
}
div.inner{
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    right: 50%;
    color:#FFF;
    padding:5px 20px;
    background:#900;
    border:1px dotted #cccccc;
}

Related Posts

]]> http://www.designersandbox.com/code/centering-a-div-block-without-the-width-using-pure-css-all-browser/feed/ 0 20 Incredibly Free Web and Sans Serif Fonts http://www.designersandbox.com/freebies/20-incredibly-free-web-and-sans-serif-fonts/ http://www.designersandbox.com/freebies/20-incredibly-free-web-and-sans-serif-fonts/#comments Thu, 01 Dec 2011 10:41:04 +0000 Vincent http://www.designersandbox.com/?p=1761

Aller


Download Here

Sansation


Download Here

Droid Sans


Download Here

District Thin


Download Here

Bebas Neue


Download Here

Museo Sans


Download Here

Calluna


Download Here

ChunkFive


Download Here

Ballpark


Download Here

Museo Slab


Download Here

CodeBold


Download Here

CodeLight


Download Here

Edelsans


Download Here

Evolution


Download Here

Giro



Download Here

Kilogram


Download Here

League Gothic


Download Here

Miso


Download Here

Nevis


Download Here

QuickSand


Download Here

Vegur


Download Here

Related Posts

]]> http://www.designersandbox.com/freebies/20-incredibly-free-web-and-sans-serif-fonts/feed/ 0 Tools and Tips for everyday web designing – Web Resolution and Size http://www.designersandbox.com/tools/tools-and-tips-for-everyday-web-designing-web-resolution-and-size/ http://www.designersandbox.com/tools/tools-and-tips-for-everyday-web-designing-web-resolution-and-size/#comments Thu, 01 Dec 2011 08:17:23 +0000 Vincent http://www.designersandbox.com/?p=1747

Designing for the Web: Resolution and Size

To design a proper website, first you will need to know the resolution and size you are heading toward. Here are some article to stronger your knowing.

Designing for the Web: Resolution and Size by Felix Mak


Best Screen Resolution to Design Websites by hobo-web.co.uk

Optimal Screen Resolution for Web Design (2010 Update) by Mark Thompson in Design/Development

Designing for the Web by Joshua David McClurg-Genevese

Screen Resolution And Page Design by Larisa Thomason

Related Posts

]]> http://www.designersandbox.com/tools/tools-and-tips-for-everyday-web-designing-web-resolution-and-size/feed/ 2 POLYGONAL PORTRAITS by FEEL DESAIN http://www.designersandbox.com/sharing/polygonal-portraits-by-feel-desain/ http://www.designersandbox.com/sharing/polygonal-portraits-by-feel-desain/#comments Sun, 27 Nov 2011 07:08:35 +0000 Vincent http://www.designersandbox.com/?p=1740



This is some amazing design, love this poly project by feeldesain.
To see more of this amazing art, you can view the original post by clicking here.
Original Post by feeldesain

Related Posts

  • No Related Posts
]]> http://www.designersandbox.com/sharing/polygonal-portraits-by-feel-desain/feed/ 2 3 Professional Free Online Project Manger Tools http://www.designersandbox.com/freebies/3-professional-free-online-project-manger-tools/ http://www.designersandbox.com/freebies/3-professional-free-online-project-manger-tools/#comments Sat, 26 Nov 2011 03:39:34 +0000 Vincent http://www.designersandbox.com/?p=1718

Freedcamp

This is absolutely awesome! Compare to other project management tools out there Freedcamp is one of the easiest one ever, and with https enable all the way I am 100% happy with the security they had offered.

Freedcamp offers an extremely easy, yet fully customizable user permission system. Choose what your co-workers and clients can see, or create a custom group to manage permissions. Each application can be separately managed allowing you to track each and every user role.

Receive instant notifications of everything happening within Freedcamp. Reply to email notifications directly from your inbox. Receive SMS alerts about newly created items or modifications to existing ones. With the ability to customize the level of notifications, you will receive just the right amount of information.
Freedcamp

Open Atrium

This is an project management tools that you can run on your own server. If they don’t have the module that you are looking for, you can build upon it.

Open Atrium is an intranet in a box that has group spaces to allow different teams to have their own conversations. It comes with six features – a blog, a wiki, a calendar, a to do list, a shoutbox, and a dashboard to manage it all.

But you’re not limited to just those features. Open Atrium is completely customizable. If you want a feature that’s not on that list, you can add it yourself. Read the documentation on community.openatrium.com, specifically the Build a Feature section, to find out how to do it.
Open Atrium

TeamLab

TeamLab is running on ASPX, its include project management, business collaboration, document management, calendar, CRM, email and more. The project management tool is perfect for medium sized projects.


All the TeamLab features are provided completely for free. There are no functionality, projects, user or time limits.

TeamLab is available in 3 deployment models: SaaS – you get ready-to-use software in the cloud, Open Source – you install TeamLab on your own server, AMI – you use a private Amazon machine with pre-installed TeamLab.
TeamLab

Related Posts

]]> http://www.designersandbox.com/freebies/3-professional-free-online-project-manger-tools/feed/ 4 Adding Multiple Attachment for Joomla K2 Component according to the number of JoomFish’s language hack http://www.designersandbox.com/joomla/adding-multiple-attachment-for-joomla-k2-component-according-to-the-number-of-joomfishs-language/ http://www.designersandbox.com/joomla/adding-multiple-attachment-for-joomla-k2-component-according-to-the-number-of-joomfishs-language/#comments Thu, 24 Nov 2011 15:18:03 +0000 Vincent http://www.designersandbox.com/?p=1683

Auto detecting Joomfish languages with your K2 Component, making your attachment number of field to match with JoomFish Component site languages.
Please follow the below steps to achieve this.


Step 1

/administrator/components/com_k2/tables/k2attachment.php add this in around line 357

var $lang = null;

Step 2

/administrator/components/com_k2/model/item.php add this in around line 357, in “save” function

$attachments_language_code = JRequest::getVar('language_code', '', 'POST', 'array');
add this in around line 400, in “save” function

$attachments_language_code = JRequest::getVar('language_code', '', 'POST', 'array');

Step 3

/components/com_k2/models/item.php add this in around line 911, in “getItemAttachments” function

$lang = JRequest::getCmd( 'lang' );
Original

$query="SELECT * FROM #__k2_attachments WHERE itemID=".(int)$itemID;

Change it to

$query="SELECT * FROM #__k2_attachments WHERE itemID=".(int)$itemID . " and lang = '".$lang."'";

Step 4

/administrator/components/com_k2/views/item/tmpl/default.php change the javascript function “addAttachment”, replace the old one.

function addAttachment(){
   var div = new Element('div',{'style':'border-top: 1px dotted #ccc; margin: 4px; padding: 10px;'}).injectInside($('itemAttachments'));
   var str = "";
   str += "<input type=\"button\" value=\"<?php echo JText::_('Remove',true); ?>\" onclick=\"this.getParent().remove();\">";
   <?
	$lang =& JFactory::getLanguage();
	$alllangs = $lang->getKnownLanguages();
	foreach ($alllangs as $key=>$value) {
		list($langcode, $countryCode) = explode("-", $key);
   ?>
   var divlang = new Element('div').injectInside(div);
   var input = new Element('input',{'name':'attachment_file[]','type':'file'}).injectInside(divlang);
   var br = new Element('br').injectInside(divlang);
   var label = new Element('label').setHTML('<?php echo JText::_('Link title (optional)', true); ?>').injectInside(divlang);
   var input = new Element('input',{'name':'attachment_title[]','type':'text', 'class':'linkTitle'}).injectInside(divlang);
   var br = new Element('br').injectInside(divlang);
   var label = new Element('label').setHTML('<?php echo JText::_('Link title attribute (optional)', true); ?>').injectInside(divlang);
   var textarea = new Element('textarea',{'name':'attachment_title_attribute[]','cols':'30', 'rows':'3'}).injectInside(divlang);
   var br = new Element('br').injectInside(divlang);
   var languagecode = new Element('input',{'name':'language_code[]','type':'hidden', 'value':'<?=$langcode?>'}).injectInside(divlang);
   str += "<div>";
   str += "<div style=\"float:left; width:150px; font-weight:bold;\"><?=$value["name"]?></div>";
   str += "<div style=\"float:left;\">" +  divlang.innerHTML + "</div><div style=\"clear:both;\"></div>";
   str += "</div>";
<?
	}
?>
 div.innerHTML = str;

   }

Step 5 – Database

enter this in your sql server (you will need phpmyadmin for this)

ALTER TABLE `jos_k2_attachments` ADD `lang` VARCHAR( 10 ) NULL

Step 6 – Need Help?

We do accept freelance customization to K2 and Joomfish development.
The freelance price for customization is USD50/hr*
*Minimum charge will be USD100
Interested Party please email us at info[a]designersandbox[dot]com

Related Posts

]]> http://www.designersandbox.com/joomla/adding-multiple-attachment-for-joomla-k2-component-according-to-the-number-of-joomfishs-language/feed/ 1 Social Engaging Email Entry Form – Enter to Win with Social Network Enable http://www.designersandbox.com/sharing/social-engaging-email-entry-form-enter-to-win-with-social-network-enable/ http://www.designersandbox.com/sharing/social-engaging-email-entry-form-enter-to-win-with-social-network-enable/#comments Thu, 24 Nov 2011 15:17:30 +0000 Vincent http://www.designersandbox.com/?p=1698

AppSumo recently had just launched an social engaging email entry form. The enter to win form is pretty simple, but what they have done is pretty smart. Each of the user can enter to the contest with 1 entry. The first entry ticket are trigger by your email address but there’s more.

After you have submitted your email address, then you will land on the social engaging form/app. There’s 5 other ways you can earn more entry, more entry from your email meaning more chance you are going to win from the contest. You can share of Facebook, tweet about it on Twitter, Follow the brand on there twitter account, Like them on Facebook, copy & paste a short paragraph along with link to your facebook wall. So each user will have 5 more chance of winning.

You can check out the entry form from here.
http://www.appsumo.com/spotify/ (Contest Ends December 16th, 11:59PM CST)
If the entry had ended, you can still check out from here, we did all the screen capture for you.

Some more of the form.

This is a very fun and in-directive way to engage your user.

Need Help or idea on your next project, do you need a coder for your next social engaging form?

We do accept freelance and consultation work on social engaging development.
The freelance and consultation price for social engaging development are USD50/hr*
*Minimum charge will be USD100, the form usually take 4 hours to build. This will depends on how much engagement you need from your targeted social network.
Interested Party please email us at info[a]designersandbox[dot]com

Related Posts

]]> http://www.designersandbox.com/sharing/social-engaging-email-entry-form-enter-to-win-with-social-network-enable/feed/ 0 500+ CSS/HTML Grid Layouts (Grid System) http://www.designersandbox.com/tools/500-plus-csshtml-grid-layouts-grid-system/ http://www.designersandbox.com/tools/500-plus-csshtml-grid-layouts-grid-system/#comments Thu, 24 Nov 2011 05:53:44 +0000 Vincent http://www.designersandbox.com/?p=1658

“You need options. Anyone that’s spent time collaborating on web design projects knows that every developer has their own processes — even with best practices being observed there is variation in techniques. So your CSS library should give you more than one way to attack a problem.

Website layouts can be a serious pain, but CSS gives you a great deal of flexibility in how you approach the layout issue. Often the home page needs a grid design while post pages have a three column layout, with other formats for custom pages. With CSS layouts already in place, you can quickly implement a layout and change as needed.

The following is a collection of layout libraries you can add to your own with multi-​​column static and liquid layouts. Enjoy and let us know which ones you like best!”


by “Tara Hornor”

Customized Fluid/​Variable CSS Grid Generator by Spry Soft


http://www.spry-soft.com/grids/
Static not good enough for ya?! No problem. Fluid/​variable grids are easy to make with this site.



Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

20+ CSS Layouts by MaxDesign



http://www.maxdesign.com.au/articles/css-layouts/
With excellent markup walk-​​thrus and the sample CSS on-​​page, this set of CSS layouts will be easy to see in action and almost as easy to implement.

40 CSS Layouts by Layout Gala


http://blog.html.it/layoutgala/
Previews are available for each format and you can even download the entire collection in one file.

250+ Layouts by Free CSS


http://www.free-css.com/
This is a massive list with just about every layout imaginable. Preview and click again to download. The CSS is stripped down so there’s lots of room for tweaking.

50+ Fixed Width Layouts by Code Sucks


http://www.code-sucks.com/css%20layouts/fixed-width-css-layouts/
Click to preview and click to download. These layouts are simple with nicely developed whitespace. Worth checking out and easy to modify.

10+ Unique CSS Layouts by Intensiv Station


http://www.intensivstation.ch/en/templates/
While on the sparse side in terms of the quantity, this collection includes some impressive tricks like floating menus and dynamic centered boxes worth having on hand.

40+ CSS Layouts by Dynamic Drive


http://www.dynamicdrive.com/style/layouts/
This site has organized their CSS layouts by two-​​column, three column, fixed, liquid, and frames. Each has a nice description and the ability to preview before downloading.

15+ Interesting CSS Layouts by The Noodle Incident


http://www.thenoodleincident.com/
This site has a unique way of guiding you thru the process of picking the layout you want. Follow the arrows, select your design, and download.

Customized Static CSS Grid Generator by Grid Designer


http://grid.mindplay.dk/
It doesn’t get much easier than this. Just set up the grid you want using the on-​​page tools and download your template.

Related Posts

]]> http://www.designersandbox.com/tools/500-plus-csshtml-grid-layouts-grid-system/feed/ 0 Motion Graphics in the User Interface – Meaningful Transitions http://www.designersandbox.com/sharing/motion-graphics-in-the-user-interface-meaningful-transitions/ http://www.designersandbox.com/sharing/motion-graphics-in-the-user-interface-meaningful-transitions/#comments Wed, 23 Nov 2011 17:21:06 +0000 Vincent http://www.designersandbox.com/?p=1653

Meaningful Transitions – Motion Graphics in the User Interface« deals with the use of animations in the user interface. It documents transitions in a clustered way to show at which point transitions can be a helpful extension to a static user interface, because of cognitive benefits to enhance the user experience.

The purpose of Meaningful Transitions is to illustrate the process of the interaction and the structure of the user interface. They focus on specific events, or clarifying the user’s interaction by animation. All transitions are divided into six categories in order to differentiate between their application. The aim is to present a scaleable collection of existing transitions. The transitions are shown in an abstract visualization to clarify their purposes, these visualizations also contain concrete examples. A closer look at a transition offers more information on the field of use, the mental model, the consistency, the cognitive benefit, and the illusion. see more

But too bad the transitions are all done in flash. If anyone can make all the Transition Motion into jQuery, it will be awesome to see this happen in the near future.
http://www.ui-transitions.com/

Related Posts

]]> http://www.designersandbox.com/sharing/motion-graphics-in-the-user-interface-meaningful-transitions/feed/ 1 15 Creative Google+ Business Pages with framed photo banner http://www.designersandbox.com/sharing/15-creative-google-business-pages-with-framed-photo-banner/ http://www.designersandbox.com/sharing/15-creative-google-business-pages-with-framed-photo-banner/#comments Fri, 18 Nov 2011 07:03:31 +0000 Vincent http://www.designersandbox.com/?p=1632


Since the launch of Google+ page, there’s a lot of brands doing smart banner work with the system. Here’s some inspiration for your own business page+. Framed Image Banner, the idea are kinda like window shopping. I would love to see some of the department store use this well, I believe it’s a great design idea to create banner that fit to the window shopping idea. Specially Christmas is around the corner. Let’s have a look at this amazing google+ business pages now.

Google Plus Android Page


View Google+ Page

Google Plus BBS News Page


View Google+ Page

Google Plus Google Chrome Page


View Google+ Page

Google Plus Gmail Page


View Google+ Page

Google Plus House Page


View Google+ Page

Google Plus NASA Page


View Google+ Page

Google Plus Nissan Page


View Google+ Page

Google Plus Pepsi Page


View Google+ Page

Google Plus Save the Children UK Page


View Google+ Page

Google Plus The Muppets Page


View Google+ Page

Google Plus Toyota Page


View Google+ Page

Google Plus Trump Media Page


View Google+ Page

Google Plus Virgin Page


View Google+ Page

Google Plus Toyota USA Page


View Google+ Page

Google Plus Yahoo! Page


View Google+ Page

Don’t forget to tell me which of this you like the most?
Personally I like “The Muppets, Nissan and Android”.
Wishing Apple would land on google+ soon, so we can see what they can come up with.

Related Posts

]]> http://www.designersandbox.com/sharing/15-creative-google-business-pages-with-framed-photo-banner/feed/ 3