About design and nearby

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 »

How to Remove Specific Categories from the Loop

Posted: May 19th, 2014 | Author: | Filed under: Development, Tips and Tricks | Tags: , , | No Comments »

Once working with WordPress I wish to exclude all posts in category 22 or (‘Careers’) from showing on the home page. A simple solution like

  1. < ?php query_posts('cat=-22'); ?>

or

  1. < ?php
  2. $exclude = get_cat_ID('careers');
  3. $q = 'cat=-'.$exclude;
  4. query_posts($q); ?>

excludes all posts of category 22 (‘Careers’) from my homepage, but breaks my pagination; when the ‘Newer Entries’ or ‘Older Entries’ buttons are pressed, it simply returns the same posts.
Read the rest of this entry »

How to Show or Exclude Posts from a Single Category only for WordPress

Posted: April 17th, 2014 | Author: | Filed under: Development, Tips and Tricks | Tags: , , | No Comments »

If you have ever wanted to display or hide posts from a specific category only, then it’s pretty easy to do – if you know how.

So you have a WordPress blog with a list of categories. You have specific template (say, the footer section) which is applied to all categories exept “Press Release”. And you need to exclude the posts with certain category (“Press Release”) from this template.

A Small Intro

WordPress has the ‘query_posts’ codex – to alter the main query that WordPress uses to display posts.
If you want to show posts from one specific category (“Press Release”), the code is:

  1. < ?php query_posts('category_name=Press Release'); ?>

Read the rest of this entry »

How to Display a Tag Cloud

Posted: February 11th, 2014 | Author: | Filed under: Development, Tips and Tricks | Tags: , , | No Comments »

To display a tag cloud at the footer section of a WordPress powered website I use the wp_tag_cloud() function:

  1. < ?php wp_tag_cloud( $args ); ?>

How to display WordPress tag cloud

As usual, I started with the HTML version of my tag cloud:
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