About design and nearby

A Sweet Decoupage Project

Posted: November 2nd, 2014 | Author: | Filed under: Creative Process, Design and Decorations | Tags: , , | No Comments »

Sometimes is the best way to get rested is to change your occupation. Oh no, I’m not about stop being a web designer.. I’m about being a designer, but not web-related :)
I like to spend time doing little sweet things – like the one below. So let me tell you about decoupage.

Decoupage can be deceptive. By looking at a finished project, you could think that the process is complicated, but it isn’t. All that you need – paper, white glue, paints and an object where to apply your creativity. If you are able to cut and paste, you already know 50% of the techniques involved.

Here is what I started with:

How to decoupage a bottle

Read the rest of this entry »

How to Set Equal Height of Elements

Posted: October 8th, 2014 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , , | 1 Comment »

Creating elements with equal height is not as easy as it may first seem. Once I was playing with Twitter Bootstrap 3 layouts trying to make two div elements the same height in the row and do not loose responsibility.

The problem is that I had two columns each with different amount of content. And every column background color stretches only as far down as the height of the content it contains.

There are a lot of proposed CSS solutions (based on height:100%; of all nested elements or on display:table; properties, even smart solution with relative & absolute positioning.. but neither of above didn’t work for me and Bootstrap 3).

So I decided to stick to Javascript:

  1. $( document ).ready(function() {
  2.  
  3.  var heights = $(".inner-page").map(function() {
  4.         return $(this).height();
  5.     }).get(),
  6.  
  7.     maxHeight = Math.max.apply(null, heights);
  8.  
  9.     $(".inner-page").height(maxHeight);
  10.  
  11. });

Read the rest of this entry »

How to Add a Dynamic PHP Copyright Notice in WordPress

Posted: August 21st, 2014 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , | No Comments »

It’s pretty simple to display a dynamic date in your WordPress site (I do that into the footer area) usually, you just need to add a line of code to your theme (according to WordPress Codex):

  1. < ?php the_date( $format, $before, $after, $echo ); ?>

How to add a dynamic copyright date

So simple php solution in our case to print the current year the code is

  1. < ?php echo date('Y'); ?>

You can modify a little the copyright notice by adding your website’s start year:

  1. &copy; Copyright 2009 < ?php echo date('Y'); ?> All rights reserved

Or even more – start with the website name:

  1. < ?php bloginfo('name'); ?> &copy; Copyright 2009 < ?php echo date('Y'); ?> All rights reserved

Once I found more elegant way to generate a dynamic copyright date based on the published date of your earliest and latest posts (suggested by Philip M. Hofer (Frumph) for a ComicPress WP theme). If your site is less than a [current] year old, then this function will display the current year only.
Read the rest of this entry »

Centered CSS Triangle (Responsive Solution)

Posted: June 24th, 2014 | Author: | Filed under: Tips and Tricks | Tags: , , , | No Comments »

Create a triangle shape with CSS is pretty easy. You can do that with pseudo-elements :before and :after:

The HTML:

  1. <a id="my-triangle" href="#"></a>

The CSS:

  1. #my-triangle:after {
  2. content: '';
  3. position: absolute;
  4. width: 0;
  5. height: 0;
  6. border-left: 17px solid transparent;
  7. border-right: 17px solid transparent;
  8. border-top: 18px solid #ff7532; /*arrow color*/
  9. }

This way you get a smart ‘down’ triangle: css triangle

And what if you need to center this triangle (in the Age of Responsive Web Design) for any screen size? Two lines of css could help you, here’s how you can do so:

  1. #my-triangle:after {
  2. left: 50%;
  3. margin-left:9px; /*it's a half of the 'border-top' property value*/
  4. }

Read the rest of this entry »

How to Shorten WordPress Post Titles

Posted: June 2nd, 2014 | Author: | Filed under: Development | Tags: , , , | No Comments »

If you would like to know how to limit the amount of letters for the title of the WordPress post, this article is for you. Such feature is helpful, indeed – sometimes you may not allow a user to print as many symbols as he tries to, it could break the design.

The idea is pretty simple: in functions.php you create the function by name (in my case) ‘the_title_limit’:

  1. function the_title_limit($length, $replacer = '…') {
  2.  $string = the_title('','',FALSE);
  3.  if(strlen($string) > $length)
  4.  $string = (preg_match('/^(.*)\W.*$/', substr($string, 0, $length+1), $matches) ? $matches[1] : substr($string, 0, $length)) . $replacer;
  5.  echo $string;
  6. }

Read the rest of this entry »

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now