CSS shapes – create an Arrow

As always I get inspiration from the great CSS source CSS tricks,
this time in CSS shapes specifically by playing around on Chevron shape created by Anthony Ticknor.
I thought we could do frequently used arrows in CSS as shapes instead of PNG images.

here is an image of how the result will look

css-shapes-arrows

the html code

<span id="arrow-left"></span>
<span id="arrow-right"></span>

the CSS code

#arrow-left{
  position: relative;
  padding: 30px;
}
 
#arrow-left:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  background: red;
  -webkit-transform: skew(135deg, 0deg);
  -moz-transform: skew(135deg, 0deg);
  -ms-transform: skew(135deg, 0deg);
  -o-transform: skew(135deg, 0deg);
  transform: skew(135deg, 0deg);
}
#arrow-left:after {
  content: '';
  position: absolute;
  top: 100%;
  right: 60%;
  height: 100%;
  width: 40%;
  background: red;
  -webkit-transform: skew(-135deg, 0deg);
  -moz-transform: skew(-135deg, 0deg);
  -ms-transform: skew(-135deg, 0deg);
  -o-transform: skew(-135deg, 0deg);
  transform: skew(-135deg, 0deg);
}​
 
#arrow-right{
  position: relative;
  padding: 30px;
}
 
#arrow-right:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  background: red;
  -webkit-transform: skew(45deg, 0deg);
  -moz-transform: skew(45deg, 0deg);
  -ms-transform: skew(45deg, 0deg);
  -o-transform: skew(45deg, 0deg);
  transform: skew(45deg, 0deg);
}
#arrow-right:after {
  content: '';
  position: absolute;
  top: 100%;
  right: 60%;
  height: 100%;
  width: 40%;
  background: red;
  -webkit-transform: skew(-45deg, 0deg);
  -moz-transform: skew(-45deg, 0deg);
  -ms-transform: skew(-45deg, 0deg);
  -o-transform: skew(-45deg, 0deg);
  transform: skew(-45deg, 0deg);
}

the size can be controlled by changing the padding on the same element selector.

The width of the arrow can be controlled by changing the width value on :before and :after selectors, but you have to change also the right value on :after selector to the complement of previous value to 100 (ex: if you change the width to 30% then you have to change the right value to 70%)

here is a demo
http://cssdesk.com/a2b9G
http://cssdesk.com/67uSH

Responsive and Equidistant menu with CSS only

Lately i face a problem to keep my menu using 100% of the page width and at the same time keep the menu items equidistant, especially if you are using multiple media queries for large screens, then most of us will go to JS solutions.

Until i came throw an article Equidistant Objects with CSS by Chris Coyier with his nice way of explaining how to find the solution inspired me to find another solutions.

The solution:

lets say we have N items with total actual width is Z px
So if we find the prefect margin X for each item to complete the total width to 100% For N number of items
we need 2*N of X (2 x for each item ) And because of the first and last items that should be on the edge of each side, we have to reduce 2 X
so we have ( N * 2 ) – 2 of X margin between the items to fill the space, lets call it Y Y = ( N * 2 ) – 2 N: number of the items 2 We will get Zpx +  X * Y = 100% X = ( 100 / Y )% – ( Z / Y )px here we face the problem of subtracting different units which we can solve it by using margin and padding to solve it like:
Padding = 100 / Y % Margin   = – Z / Y px
and we chose margin for minus value because padding can’t take negative value. Notes:

  • Using different font-family or font-size on different media queries may affect the total element width and break the equation.
  • The easier way to find out the total width is to give all the items 0 margin and padding then keep reducing the page width until the items wrap down (the breaking point), with inspect element we can get the total width.
  • For any reason you want to take off the float:left from <li> items then read this 
  • giving margin & padding 0 for the left side of first item and the right side of last item

Code example:
lets say we have 4 items then
N = 4 ,
Y = 6 ,
Z=292px
Padding = 100 / Y % = 16.66%
Margin  =  – Z / Y px   = 48.66px

li:first-child{margin-left:0;padding-left:0;}
li:last-child{margin-right:0;padding-right:0;}

http://jsfiddle.net/Mohammad_Sabbagh/w74cN/1/

Redirection Plugin: How to give editor users access to redirection plugin page in wordpress panel

WordPress Redirection plugin is one of the most important wordpress plugins specially for big websites.

Sometimes you need to give your editors an access to this plugin so they can redirect the deleted posts or pages.

By slight modification for the following lines this can achieved easily:

In the plugin directory folder open redirection.php and change the code in line 118

From

118
add_management_page( __( "Redirection", 'redirection' ), __( "Redirection", 'redirection' ), "administrator", basename( __FILE__ ), array( &amp;$this, "admin_screen" ) );

TO

118
add_management_page( __( "Redirection", 'redirection' ), __( "Redirection", 'redirection' ),"delete_others_pages", basename( __FILE__ ), array( &amp;$this, "admin_screen" ) );

 

Then open the file ajax.php in line 36 change the following

36
if ( current_user_can('administrator') ) {

TO

36
if ( current_user_can('delete_others_pages') ) {

How to change top bar breakpoint using CSS in Foundation Zurb

Aside from using customize Foundation download, lately i was trying to change the Breakpoint width of top bar without redownloading the foundation css

There was no direct way like overiding the css file unless you are using SASS So you need to edit the orginal css file foundation.css or foundation.min.css depends which one you are using

1- search for “.top-bar-js-breakpoint” and edit the width

2- edit the min-width in  “@media only screen and (min-width: X em)” which follow  “.top-bar-js-breakpoint” directly

FancyBox for wordpress – using custom expression

I am big fan of the WordPress plugin Fancybox for WordPress  which using the Fancybox Jquery plugin.

one day i want to apply the group option for each gallery shortcode on the same page.

I used the the custom expression to achieve the task by going to wordpress admin => setting => Fancybox for WP => galleries => custom expression and changing the code to the following

1
2
3
4
var posts = jQuery(".gallery");
posts.each(function() {
jQuery(this).find(thumbnails).addClass("fancybox").attr("rel","fancybox"+posts.index(this)).getTitle();
});

snapshot for the setting page fancybox-customexpression