Mobile Redirect to Full Site and Full Site Link – .htaccess

Redirecting users from your full site to a mobile site by recognizing a device is not something that is just a simple task. It requires understanding some complicated codes and rules. There are so many different ways of attempting a mobile redirect by using anything from jquery to PHP and many others. Things can get complicated and frustrating when they do not work. However, there is a simple solution for this that really doesn’t require any knowledge of the process. The solution is by adding a simple piece of code to the .htaccess file of your server (with a little modification by you) and users will be directed to your mobile site if on a mobile browser or the full site if not.

The code is very simple. I have pasted below the full code you will need. Just copy and paste into your .htaccess file and then modify just a few lines.

1st

change this section from m.xpgraphics.org to whatever your url is of your mobile site.

RewriteRule ^ http://m.xpgraphics.org [R,L]

2nd

change the next section from http://www.xpgraphics.org to your full site url.

RewriteRule ^ – [CO=mredir:0:http://www.xpgraphics.org]

3rd

you need to add a little bit of code to your mobile website to create a link back to the full site. Place the following code at the bottom of your mobile index.html page (or whatever your mobile home page happens to be).

<a href=”www.xpgraphics.org/?m=0>Full Site</a>

4th

change the above code from http://www.xpgraphics.org to whatever your url is of your full site. Now, when user access your mobile site and click this link it will redirect to the full site without returning again to the mobile site.

Redirect Code: (add your site to bold sections)

RewriteEngine on

RewriteBase /
RewriteCond %{QUERY_STRING} (^|&)m=0(&|$)
RewriteRule ^ – [CO=mredir:0:http://www.xpgraphics.org]

RewriteCond %{REQUEST_URI} !\.(jpg|css|png|gif)$ [NC]
RewriteCond %{HTTP_USER_AGENT} “android|blackberry|iphone|ipad|ipod|iemobile|opera mobile|palmos|webos|googlebot-mobile” [NC]
RewriteCond %{QUERY_STRING} !(^|&)m=0(&|$)
RewriteCond %{HTTP_COOKIE}        !^.*mredir=0.*$ [NC]
RewriteRule ^ http://m.xpgraphics.org [R,L]

 

Advertisements
Posted in Uncategorized

Create Custom WordPress Login Screen

Creating a custom wordpress login screen can seem like a daunting task. You probably imagine spending hours or messing with different code and then hoping it all works well together or even you don’t know how to work with code so you assume there is no hope. Well there is a super simple way of achieving this outcome. I will cover how to set this up and also, how to have a specific image stay behind the login box at all times (even when scaling the browser window). Creating a login screen, whether you want basic features or a completely self made layout, is a very simple process. The only necessary item is the plug-in for wordpress called Erident Custom Login and Dashboard. This little plug-in will offer all the features necessary to create your own unique layout and design of your login screen or this works really well for sites for clients. I’ll start off showing you the basics of the plug-in and then a trick to keep an image behind the login box.

Once installed, Erident’s plug-in has a very user-friendly interface. It provides options for the background of the page, a specific logo (instead of the standard WordPress logo), and features for the login box itself. Oh, and one more neat little feature is the ability to change the footer of the dashboard to include your site and copyright information. Let’s dive now into the features of setting up your custom login screen.

1. Login Screen Background

This area gives you the ability to upload an background that either you created or maybe just an image you found. It also allows you to position this background whether you center it vertically and horizontally or top and center. There are many possibilities to choose from. Now, if you have an image to upload that is small and won’t take up the whole page, you can add a background color that will show behind your image and fill the screen. (This section is where you can set up the background image behind the login box, which I will show you soon).

Screen shot 2013-03-20 at 8.27.17 AM

2. Login Screen Logo

This portion allows you to change from the typical wordpress logo above the login box to any custom logo you create. You simply just upload your logo to the media section of WordPress and grab the url of the file location and place it in the Logo Url box. It’s that simple to add your logo.

Screen shot 2013-03-20 at 8.27.29 AM

3. Login Form Settings

This section is all about the login box itself. It allows you to change the width of the box, the copy color, input text color, input box background, link background, shadows, and button. It allows you to change almost everything. This section is nice for when you have a dark background and want only the input fields to show and not the white background.

Screen shot 2013-03-20 at 8.27.59 AM

So, how do I get something to always stay behind the login box? Let me show you one example.

Screen shot 2013-03-20 at 8.28.15 AM

This did not take hours of coding to accomplish and really only took enough time to create the design and upload. The trick is that this image is simply uploaded as the login screen background. What you have to do is copy the url of the location of the image and then in the position boxes it needs to be centered horizontally and top vertically. Also, you might have to play around with your image and add some space on the top so that it gets pushed down behind the login section. Once you do that just remove all the form settings not needed and you get the above effect. Pretty simple and really looks impressive for any client. It also provides a unique and custom feel for them.

Below is another example as well as the link to this amazing plug-in. Any questions you can leave a comment and feel free to drop a link to your unique login screens.

Screen shot 2013-03-20 at 8.25.21 AM

Custom Login Plugin

Posted in Blog

WP Touch Pro Working/Not Working With Theme Shortcodes Fix

WP Touch Pro is an amazing tool for a web designer when they are building a wordpress site. It takes all the hassle out of dealing with mobile incompatibility. However, when you use this program you may find that some things just do not work right and look right. What I have noticed is that shortcodes used throughout do not work on mobile devices but rather the code shows up. Why is this? Well, it does this because WP Touch does not recognize them because these shortcodes are specific to the theme that you are using. The pain would be having to wrap page information in a [non-mobile] shortcode and then take the same information without the shortcodes and wrap that in a [mobile] tag. This creates all sorts of problems where you have to update two sections if you decide to change anything. The solution is very simple. Instead of settling for no theme shortcodes so it work on both computer and mobile, you can simple make your theme’s function.php file apart of the WP Touch program so that when shortcodes are used they are recognized by wp touch and work properly. Below I will take you through the simple steps of doing this.

Step: 1

In your wp touch pro admin panel select the compatibility tab. Once this is selected check the box that says, “Include functions.php from  the active . . .”

Step 2:

In the option bar below what you just checked, select the option that says, “Include file directly”

Screen shot 2013-03-20 at 8.35.04 AM

Once you have done this, your theme’s shortcodes should have no problem working on your mobile device. It may not look as pretty on mobile as the desktop with certain items but it will allow you to place all page information and styles without having to wrap any of it in special code for different platforms related to WP Touch.

Posted in Blog

How To Package An Illustrator File

Packaging a file in Illustrator CS5 and previous is something that is not an option in the menu, like what you have in indesign. So, how is it done and how difficult is it? It is a very simple and easy process but one most people would not know. So let’s go through the steps one by one and see just how simple and easy it can be to package an illustrator file for output.

Step 1 – Under file scroll down to scripts and select other scripts.

other-scripts

Step 2 – Locate the packaging script file by going to Applications > Adobe Illustrator (CS4 or CS5.1) > Scripting > Sample Scripts > AppleScript > Collect for Output and then double-click the file that is labeled “CollectForOutput.scpt”

Screen Shot 2016-02-24 at 7.14.27 PM

Step 3 – Navigate to your illustrator file and select the location you want to save your collect and it will save the file and all content to that specified folder.

And there it is. It is as easy as 1-2-3 . . . literally. Now you can collect any project to give to a client or someone who is working with the information as well and needs all that you have.

Posted in Blog

High Quality Free Icons

Creating an icon that is effective and modern is not an easy task. Sure you can find several tutorials out there about how to create certain icon designs, but these take time and your skill may not be at the level needed to create these icons. So, where do you get quality icons for free? The best site I have found so far is called softicons.com. This website has hundreds of thousands of free icons that you can download. The only thing about these free icons is that they are not all approved for commercial use. Some are deemed usable for only personal use. However, this information can be found on each icon or icon sets page.

The site is simple to use and navigate and they have icons of all kinds and sorts. So, whatever project your working on, you should be able to find all the icons you need here. Although this is a great resource, I would encourage you to really look for some good icon tutorials online and work through a few to better your photoshop and illustrator skills. Most of them are not too difficult and are interesting and fun to work on. Plus it is always more enjoyable to use something you created rather than what someone else has done. So, Below are some good tutorials as well as the link to the softicons page.

30+ Fresh Icon Illustrator Tutorials

100 Icon tutorials every designer should have

50 Excellent Icon Design Tutorials

40 Tutorials for Creating Highly Detailed Icon Designs

Free Icons Website

Posted in Blog

3 Quick Web Design Tips

Trial and error is a great tool for learning. Unfortunately, it creates error as I have said. So, here are 3 tips that are basic but very important and useful when designing a website.

1. TEST IN ALL BROWSERS

One of the most important final procedures of creating a website should be to test the site and make sure everything looks as it should. Do not assume that if it looks good in Chrome then it will look okay in the rest of the browsers. This is not true. In fact, I was recently working on a site and created a tabbed copy section on one half and some widgets in the other half of the page. When I tested this layout in safari it looked really great. However, when I opened the website in firefox half of one section was off of the page. This also happened in internet explorer. I cleaned up the code and worked a few things and I finally got the sections to look right on all of the browsers. Why is this important you ask? Well depending on what field your client is in and what age group they tailor too, it could mean alot. This site I was working on was for people mainly mid 30’s and older. This age group tends to be more old school and uses internet explorer. So, the majority of the people seeing the site would of seen a front page that was all over the place and could then in turn take clients away from this business.

– The best avenue to research all browsers no matter if you have a pc or a mac is to use Adobe BrowserLab. This program allows you to see your website in all browsers. So test your site and if things are not working on certain sites and you can not figure out why, you might need to remove that or search around for others who had this problem and found a solution.

2. Navigation, Make It Simple

The average person spends about 6-10 seconds on a website. That is not a long time to really impress someone or create interest in your business. However, if someone does stay at your site but can not figure out how to find certain things or is having trouble getting around, then they are going to leave real quick and probably not return. This is why it is so important to have very simple but very effective navigation on your site. Make it clear where each navigation section goes to and once there offer the ability to return or reach another section of the site. Also, never add to much to your navigation. If you have a large amount of menu options, it might become very overwhelming and can make it hard for someone to find what they are looking for. So, when creating your navigation here are a few things to think about.

– Can certain things be grouped into one or two categories

– Are all of these options necessary for the site’s purpose?

– Are the options clear in their destinations?

– Are the main navigation options relevant or should these be sub headings.

– Plan your navigation around your pages and how they link

3. Make Your Site More Than Its Original Purpose

What do I mean by this? Well, this might not be applicable in all situations, but it is a great option to keep clients coming to the website. For example, I recently created a website for a school. Now, this website normally is not meant to be a place where people are coming all during the day because the information does not really change. So, how do you add to this site to make it more usable but at the same time not cluttering the website with junk and making it look to busy? Well one option I added was a tabbed group which could handle a lot of things in one condensed area. A few of the things I added was a Facebook and Twitter feed for the school, the school video, game and scores information tab, and a weather tab. This turned out to be a clean design and also a place people can come to every day and get new information about new and different things. This creates higher traffic for your site and that can help grow the business.

Posted in Blog

Easily Create Object Shadows In Illustrator

Making an image, icon, logo, etc. standout to someone is not an easy task. If you want an object to really pop out of the page and grab someone’s attention, then adding a shadow can really help. It is an easy trick and can be be done by a pro in illustrator all the way down to someone who has just opened the program for the first time. It only takes 3 steps to make making this a quick addition to any design to add a little pop. So lets begin with a beach ball by itself to see how much a simple shadow can add.

Starting product:

beach-ball-coloring-pictures-1

step 1:

Select the ellipse tool and create a circle like the image below

Screen shot 2013-03-20 at 8.40.26 AM          Screen shot 2013-03-20 at 8.40.48 AM

step 2:

Make sure there is no outline and the shape is filled with black.

step 3:

While the shape is selected, add a feather effect to the object. At this point you can play around with the look of the shadow by changing the pixel radius up for less fill and down to create more fill.

Screen shot 2013-03-20 at 8.41.15 AM     Screen shot 2013-03-20 at 8.41.36 AM

Now we can place our object over top of the shadow to create a 3d effect and allow our object to really stand out.

Final product:

Screen shot 2013-03-20 at 8.41.56 AM

Once the shadow is created it can also be copied and pasted into Photoshop by simply selecting the circle and copying and pasting into Photoshop. You can also get creative with this type of shadow through different shapes and for more advanced options, you can use the pen tool to create custom shapes.

Posted in Blog