Monarch Plugin Custom Shortcode for WordPress

I am a web designer so naturally I do not follow standard website layouts… I love the Monarch social sharing plugin for WordPress, but I needed a way to add the inline sharing buttons to a custom sidebar that I’ve made. I searched high and low to find a way to do this using their settings but there is just no way to do it.

They have a shortcode for adding the Follow buttons anywhere you want but not the sharing buttons. I went ahead and added this capability by adding a few lines of code to their plugin. Here is how you do it.

1. Find the function named “display_inline” in monarch.php file and right after this function closes, add this function:


/**
* Adds monarch wherever you put the shortcode.
*/
function display_custom() {
$monarch_options = $this->monarch_options;

return $this->generate_inline_icons( 'et_social_inline_top' );;
}

Now go up to around line 119 and find this line:

add_shortcode( 'et_social_follow', array( $this, 'display_shortcode' ) );

Right below it add this:

add_shortcode( 'et_social_share', array( $this, 'display_custom' ) );

That’s it.

Now you can add your sharing buttons anywhere you want using the [et_social_share] shortcode.

To add it in your PHP, you can do this:

echo do_shortcode('[et_social_share]');

Enjoy!

Best Email Confirmation Page Message

This must be the best email confirmation page message that I have ever seen. It’s not the regular one I am used to seeing, this one actually got me to read the info on it. Very clever. This and the Error 404 pages, when designed in a clever way and actually treated as a useful tool can produce a lot more results and may even capture more sales as a result.

Take a look at this screen capture, this is what I got today after filling out a form on a landing page. I am not used to seeing this and because it was so unusual, I actually read it. Had this message have had an up-sell or some other important information other than to tell me to confirm my email, it would definitely get through. Continue reading “Best Email Confirmation Page Message”

Create A Quick Dashed Line In Photoshop

Every time I need a dashed line I have to create one from scratch and it really makes me mad, every time, that there is not a quick way to do this in Photoshop. Today, I found a way! Here is how to get a quick perfect dashed line every time you need it. Continue reading “Create A Quick Dashed Line In Photoshop”

Huge 492 Quality Graphics Kit You Need

As I work on things I create various graphics. Why let all that goodness go to waste? I took some of those designs and expanded on them making them better, adding variations and different colors. This kit of 492 graphics contains a ton of price tag graphics, a couple of price tables, step lines, buttons and all kinds of other eye candy! Continue reading “Huge 492 Quality Graphics Kit You Need”

Adding depth with small adjustments in Photoshop

It’s easy to take a few elements together into an image and arrange it to look nice. Then to make it have depth and give it the eye candy effect so the image doesn’t just look good but also feels good, takes a bit more. It’s not something you need to really have a talent to do but more of  a knowledge of what it is that adds the “flavor” to the image and the technique for applying it. The techniques I talk about in this article can be applied to almost any design and it will add the awesomeness to the design that you will love, so grab a pencil and make notes.

In this business card design I created for my bookkeeping software business I did exactly that. I found a nice background image at iStockPhoto.com and used it as the main background. Then I added some elements like the logo, some text and a color background block in the bottom section. It looks ok as it is at first but the design is dry, the text doesn’t pop, I just don’t feel it.

As a rule of thumb, the first thing I do to my designs is add depth, and this is done very simply with a gradient effect. Instead of using just one color to fill an area, I use a gradient of two colors, one just a shade lighter than the original and the second a shade darker. Just doing this will give the element almost a 3-D look or I like to call it depth.

I did this to the logo text first by double clicking the logo text layer and selecting the Gradient Overlay on the left and then clicked on the Gradient selector. There I chose the two colors for the gradient and clicked OK. As my logo consists of two colors, I did the same to the second section.

This small adjustment gave the logo the look I was looking for. A little darker green at the bottom of “cake” and a little gray at the in “io” makes the logo pop and stand out nicely.

Now I want to adjust the background mesh image as it is a bit too bright and too static. I want it to look like it’s more than just a mesh wall, want to give it some depth. To do this I will just use a black soft brush and will add some black around the edges.

I am using a black color Brush tool at size 500 and 100% opacity and flow. On a new layer just above the mesh image layer I trace the edges but I have to do this out side the image with only about 20% of the brush inside the image area as the 500px brush is very large and I only want the faded out edges of the brush to be inside. This will create a gradient look that goes from black at the edges to transparent in the middle.

To let off on the black a bit I adjusted the layer transparency to 75%. This gives the background a nice depth effect that I wanted, I can still see the mesh on the edges but it’s nicely darkened giving it almost a 3-D spherical look.

To finish this design off I will add a little bit of a gradient effect to the gray background in the bottom section by double-clicking the background layer and choosing the two gradient colors as I did in the first couple of steps for the logo.

This little enhancement completes the design, it takes the business card from a boring looking collage to a one sweet looking business card. I ordered the cards to be with rounded corners which will add to the design even more.

Once I receive my business cards I will post a scan of them so you can see the final product.

The bookkeeping software that I created called CakeIO is designed for small business owners and freelancers to save time on the dreaded task of bookkeeping. As a small business owner my self, I’ve struggled with this my self and have tried different solutions that are on the market but most of them are way to complicated for what I need it to do and so I’ve settled with the good ol’ Excel spreadsheet for years. At the end of 2010 I finally decided that I need to build something simple that small business owners can just dive right in and get things done quickly. That is how CakeIO was born. Check it out for free for 30 days, you might like it. Click here to find out more.  ;)

Pink Overload, Lots Of Web 2.0 & Amazing

It’s been getting a lot better recently with the site submitting thing I have up at the top of the blog. Quiet a few really nice looking designs have been coming in through it. Here is a great example of the quality of sites being submitted.

This one comes from Marcello Manso, a form tool site. Lots of pink… I could have never imagined what a decent looking, all-pink, site could look like, but this one goes beyond that… I really like the different shades of pink used and a nice contrast of the white text. The Web 2.0 style large text and logo, the subtle  shining rays behind the logo and of course the large cartoon chef.

Looking really good!

Source: http://www.formee.org

Detailed Blue Background & Clean Design

Every day I get a bunch of submissions to feature various sites and blogs and I would say that 90% of the time the site design is not that good and a lot of it is just self promotion… But once in a while there will be a site submitted that is really nice and I want to feature it on the blog, and this one from StereoFocus is one of them.

I love the subtle swirls and different patterns in the light bluish background and the gradients effects applied to it really gives the site depth. The other elements on the site that make it look good is the clean page, lots of white space, lighter gray font color and just the way the site is laid out.

Source: StereoFocus.nl

Some Inspirational Ecommerce UI Design

ecomm

Hello Dear Readers,

As I follow various web design and other related bloggers, sometimes I find inspirational pieces that I just have to share and archive for my self. So this time it is a list of inspirational e-commerce user interface design examples from non other than Vandelay Design, 35 Excellent Ecommerce User Interface Designs

You will find some great examples of product and options display, various creative ways to bring a customer to click the Add To Cart button. A few nice ways to display related products. From clean and simple to creative and exciting.

I will be using this list for inspiration the next time I am working on an ecommerce website. Lots of great ideas.

Check out 35 Excellent Ecommerce User Interface Designs and let me know what you think.

As always, thank you for reading my blog.

Until next time,

Valik.

A Paradise Remodel… Great Graphic Work

jannis

A while ago I featured Jannis’ website here for the beautiful, relaxed, paradise design in it’s header. Recently, he redesigned the header and made it even more beautiful with lots more detail and design elements.

Also wanted to mention the navigation bar, it’s pretty simple and yet very nice looking. With the subtle hover effect and nice little icons.

Amazing work Jannis, great job!

Source: Jannis-Gerlinger.de