Adding a Four Color Gradient in Bootstrap.less

I modified the gradient code in bootstrap adding a four color gradient into my version. You can already see the example on my navigation bar and I’d like to share this if you’d like to use it. Here is version of my script. You can use it as a template to customize and build upon for your own needs.

How to add this in bootstrap.less

Locate the #gradient code, it should be in the mixins.less if you’re using the exact file in gitHub. Once you located the #gradient add this inside the bracket:

/* Add this inside */
  .vertical-four-colors(@startColor: #ffffff, @midColor: #ebebeb, @midSecColor: #dbdbdb, @colorStop: 0.5, @endColor: #b5b5b5) {
    background-color: @endColor;
    background-repeat: repeat-x;
    background-image: -moz-linear-gradient(top, @startColor 0%, @midColor 50%, @midSecColor 50%, @endColor);
    background-image: -webkit-gradient( linear, left top, left bottom, from(@startColor), color-stop(@colorStop, @midColor), color-stop(@colorStop,@midSecColor), to(@endColor));
  }

Here is a code on how to use this four color gradient.
a {
  #gradient > .vertical-four-colors(#ffffff, #ebebeb, #dbdbdb, 0.5, #b5b5b5);
  color: @linkColor;
  &:hover {
    #gradient > .vertical-four-colors(#e0f3fa, #d8f0fc, #b9e2f6, 0.5, #b6dffd);
    color: @linkColorHover;
    text-decoration: none;
  }
}

Note that the @colorStop is to set where the @midColor and @midSecColor will meet. I set the default right in the middle.

I hope this helps someone out there. If you have any suggestions on improvements, please share them in the comments.

Thanks. :)

Posted On:
Comments:
No Comments »

Starting your own WP theme?

Are you new to wordpress theme? Here are some basic file names of a WordPress theme you will need to create your own. In the directory of your theme:

404.php
this is the template if your visitor went in a broken link and who knows your 404 ERROR PAGE NOT might become famous.
archive.php
the archives index.
comments.php
comments template when using comments_template();
footer.php
over all footer when get_footer(); is used
functions.php
This is where variables are defined like setting widgets, featured image, menus, etc.
header.php
over all header when get_header(); is used
index.ph
basic and important part in a theme.
page.php
basic layout for a page entry.
screenshot.png
this is for the admin side when looking at the Theme’s section.
search.php
“Note: The filename search.php is reserved as a special template name, so avoid its usage; the suggested searchpage.php just makes it easy to recognize in the list of files.”
sidebar.php
over all sidebar when get_sidebar(); is used
single.php
basic layout for a post entry.
style.css
basic and important part in a theme where you will add information of your theme and styling your theme.

Continue reading →

Posted On:
Comments:
2 Comments »

Plugin: Wa Plurk Updater (beta)

Note: This is my very first plugin to be published. This plugin is inspired by the Twitter Updater plugin. Any comment and/or suggestion will be appreciated.

This a simple plugin that sends any updates from your site to your Plurk account.

You can check out a sample post on my plurk account.
Continue reading →

Posted On:
Comments:
6 Comments »

Tutorial: Create a Brown Envelope

This tutorial is about creating a brown envelope in Adobe Photoshop from scratch. I am using Adobe Photoshop CS3 but in this tutorial you can use lower versions as well. You can download the sample PSD file from the link at the end of this tutorial.

Final product

Brown Envelope

Brown Envelope

Step 1

Create a new file with a width of 400 pixels and height of 600 pixels. You can set the resolution from 72 or higher then set the Background contents to Transparent. Make sure your foreground color is set to # F0B95C and background color is set to #FFFFFF (White).

Step 1

figure 1.0

Select the rounded rectangular tool or press U twice if shape tool is on the rectangular tool. Set the Radius to 3 pixels and start drawing a rectangular shape filling almost the entire layer. Let’s name this layer – envelope.

figure 1.1

Step 2

Draw another rectangle shape but this time just about 180 pixels in height from the top edge of the envelope layer. This will serve as the flap of the envelope. Remember that we are still using the rounded rectangular tool.

Use the Direct Selection Tool (A) then select the lower left corner of the flap. Move the selected nodes to the right for 10 pixels by doing Ctrl – Right Arrow. Now, select the lower right corner of the flap and move the selected nodes to the other direction (Ctrl – Left Arrow).

figure 2.0

We need to apply a drop shadow on the flap layer to create an effect that it’s indeed the flap of an envelope. Use these settings:

figure 2.1

After doing so, we need to create a clipping mask. You can do this by selecting the Flap layer then hold Alt and Ctrl then press G (Alt+Ctrl+G).

Step 2: clipping mask

figure 2.2

Pages: 1 2
Posted On: