Author Archives: admin

Remove Proudly Powered by Wordpress Thumbnail

Remove Proudly powered by WordPress Twenty Sixteen Theme and Replace with Your Own © Copyright Information

For WordPress Twenty Sixteen Theme users, let’s remove “Proudly powered by WordPress” from the footer by adding simple line of CSS (without of editing any programming part of it), and replace with you own © Copyright information.

Remove “Proudly powered by WordPress” Text

Open Up the CSS Editor:
(Go to the Backend page -> Appearance -> Editor)

footer .site-info { 
 display: none !important; 
}
footer.site-footer:after {
 content: "© YOUR WEBSITE NAME";
}

Replace YOUR WEBSITE NAME as you like.

If you want to center align the Copyright line, add margin:auto like below:

footer.site-footer:after {
 content: "© YOUR WEBSITE NAME";
 margin: auto;
}

Now it’s all good. Feel free to add the font-size and color of your own.

Storefront

Remove Product Description and Reviews Tabs in Woocommerce Storefront Theme

Wocommerce offers the tabs: “Product Description”, “Reviews and/or “Additional Information” in the product detail page. Let’s find a way to remove or disable the tabs while you are using in the “Storefront” theme.

Remove “Product Description”, “Reviews” and “Additional Information” Tabs

Go to the backend -> Appearance -> Editor -> Find “storefront-functions.php” on the right. Input below code in the very bottom. “Update File” after adding the codes.

add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );

function woo_remove_product_tabs( $tabs ) {

unset( $tabs['description'] ); // Remove the description tab
unset( $tabs['reviews'] ); // Remove the reviews tab
unset( $tabs['additional_information'] ); // Remove the additional information tab

return $tabs;

}

If you wish to keep one or two of the three tabs, just remove the corresponding line from the codes. Enjoy woocommerce!

Storefront

Remove “Storefront designed by WooThemes” on Woocommerce Storefront Theme

Get Custom Phone Case Now!

Woocommerce offers a well designed free template for everyone called, the Storefront. By adding the CSS codes below, you can remove the credits, “Storefront designed by WooThemes” without editing or deleting a line of the core programmings. So instead of deleting anything, you are just hiding the text actually. So it’s a risk free, easy and fast!

Remove “Storefront designed by WooThemes” Credits

Place the CSS line on the WordPress backend where CSS is located:
(Go to the Backend page -> Appearance -> Editor)

footer .site-info { 
 display: none !important; 
}
footer .col-full:after { 
 content: "© YOUR COMPANY NAME";
 font-size: 15px;
 color: #777;
 line-height: 140%;
 text-align: center;
 display: block;
 margin: 20px auto;
}

Now you’ll see the line, “Storefront designed by WooThemes” is gone. Feel free to edit the font-size and color of your own.

Thumbnail of JavaScript

Make Clickable Link with JavaScript instead of HTML Anchor

Sometimes you just can’t edit the HTML but still need to make the div clickable. Here’s how with using JavaScript. *Jquery needs to be installed.

<script> 
$('.YOUR-CLASS-NAME').each(function() {
var link = $(this).html();
$(this).contents().wrap('<a href="YOUR-URL-LINK"></a>');
});
</script>

You need to replace .YOUR-CLASS-NAME with your div’s class and replace "YOUR-URL-LINK" with your destination link. Pretty simple, heh?

Bootstrap TIme Interval

How to Change Bootstrap Carousel Slider Transition Speed Time Interval

Get Custom Phone Case Now!

Bootstrap is one of the most popular, powerful and light HTML/CSS/JavaScript Responsive framework for developers, and it’s also available for WordPress as well. To use the Bootstrap carousel slider below is setting to change slider time interval (transition speed of slider images). Don’t get confused with changing the core JavaScript or CSS files.

Bootstrap Carousel Slider Time Interval Setting

Default Bootstrap Carousel Slider Snippet

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 <!-- Indicators -->
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 <li data-target="#myCarousel" data-slide-to="1"></li>
 <li data-target="#myCarousel" data-slide-to="2"></li>
 <li data-target="#myCarousel" data-slide-to="3"></li>
 </ol>
 
 <!-- Wrapper for slides -->
 <div class="carousel-inner" role="listbox">
 <div class="item active"> <img src="img_chania.jpg" alt="Chania"> </div>
 <div class="item"> <img src="img_chania2.jpg" alt="Chania"> </div>
 <div class="item"> <img src="img_flower.jpg" alt="Flower"> </div>
 <div class="item"> <img src="img_flower2.jpg" alt="Flower"> </div>
 </div>
 
 <!-- Left and right controls --> 
 <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
 <span class="sr-only">Previous</span>
 </a>
 <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
 <span class="sr-only">Next</span>
 </a> 
</div>

Add the ‘data-interval’ on the first line of code

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000"></div>

1000 is 1 second, and 3000 is 3 seconds. You can replace ‘3000’ with your desired slider speed.

banner-pbr

Remove automatic <BR> & <P> tags in WordPress

In general rules in HTML, ‘Return/Enter’ won’t line break your paragraph as you expected like in Microsoft Words. To get the line break, you have to put the code <BR>. But, default setting in WordPress does the line break for you by hitting ‘Return/Enter’ button on the keyboard without the <BR> code. It’s annoying sometimes because we are not used to it.

It’s really easy to turn automated <BR> & <P> off on your WordPress. Go to Admin -> Appearance -> Editor -> function.php and copy & paste the following code below at very end.

Remove the Automatic <BR> & <P> Tags

remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );
thumb-linebreak

Remove Automatic and Tags in WordPress

The default setting on WordPress, your text will be wrapped around the code

and your ‘Return/Enter’ will line break your sentences. 

This might be annoying to you because you don’t need that automated function. 

It’s really easy to turn the automated

,
off on your WordPress. Go to Admin -> Appearance -> Editor -> functions.php (or Theme Functions) and copy & paste the code very end of the file.

Stop Paragraph Tags and Line Break Filters

Copy this code and paste it very end of your theme functions.php file.

remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );
Vertical Align Center Thumbnail

CSS Vertical Align Center

[:en]Let’s  vertical align your design elements with CSS and HTML! Despite how popular people search for this method, vertical centering your contents seems not easy than you think for beginners. Below method could be the one of the simplest ways you can make it happen.

DEMO: How to Vertically Align Middle with CSS

Vertical Align Demo

Box One

Vertical Align Center

Box Two

Vertical Align Middle

Box Three

Vertical Align Center

CSS

Copy the code below and paste into your CSS document. You need to make the same min-height and line-height on the outer part of the div. In my case, I have 200px.

.div-outer {
    min-height: 200px;
    line-height: 200px;
}
.div-inner {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

HTML

Copy the code below and paste into your HTML document.

<div class="div-outer">
<div class="div-inner">
<h4>Box One</h4>
<p>Vertical Align Center</p>
</div>
</div>
<div class="div-outer">
<div class="div-inner">
<h4>Box One</h4>
<p>Vertical Align Center</p>
</div> </div>
<div class="div-outer">
<div class="div-inner">
<h4>Box One</h4>
<p>Vertical Align Center</p>
</div>
</div>

You can tweak around with different colors of the boxes or texts. Have fun!

[:de]Let’s  vertical align your design elements with CSS and HTML! Despite how popular people search for this method, vertical centering your contents seems not easy than you think for beginners. Below method could be the one of the simplest ways you can make it happen.

DEMO: How to Vertically Align Middle with CSS

Vertical Align Demo

Box One

Vertical Align Center

Box Two

Vertical Align Middle

Box Three

Vertical Align Center

CSS

Copy the code below and paste into your CSS document. You need to make the same min-height and line-height on the outer part of the div. In my case, I have 200px.

.div-outer {
    min-height: 200px;
    line-height: 200px;
}
.div-inner {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

HTML

Copy the code below and paste into your HTML document.

<div class="div-outer">
	<div class="div-inner">
		<h4>Box One</h4>
		<p>Vertical Align Center</p>
	</div>
</div>
<div class="div-outer">
	<div class="div-inner">
  		<h4>Box One</h4>
  		<p>Vertical Align Center</p>
	</div>
</div>
<div class="div-outer">
	<div class="div-inner">
		<h4>Box One</h4>
		<p>Vertical Align Center</p>
	</div>
</div>

You can tweak around with different colors of the boxes or texts. Have fun!

[:KO]Let’s  vertical align your design elements with CSS and HTML! Despite how popular people search for this method, vertical centering your contents seems not easy than you think for beginners. Below method could be the one of the simplest ways you can make it happen. 테스트 입니다

DEMO: How to Vertically Align Middle with CSS

Vertical Align Demo

Box One

Vertical Align Center

Box Two

Vertical Align Middle

Box Three

Vertical Align Center

CSS

Copy the code below and paste into your CSS document. You need to make the same min-height and line-height on the outer part of the div. In my case, I have 200px.

.div-outer {
    min-height: 200px;
    line-height: 200px;
}
.div-inner {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

HTML

Copy the code below and paste into your HTML document.

<div class="div-outer">
<div class="div-inner">
<h4>Box One</h4>
<p>Vertical Align Center</p>
</div>
</div>
<div class="div-outer">
<div class="div-inner">
<h4>Box One</h4>
<p>Vertical Align Center</p>
</div> </div>
<div class="div-outer">
<div class="div-inner">
<h4>Box One</h4>
<p>Vertical Align Center</p>
</div>
</div>

You can tweak around with different colors of the boxes or texts. Have fun!

[:]

JavaScript Redirect

Simple JavaScript Redirect Code for HTML

Here’s the one of the simplest ways to redirect your site’s traffic.

Redirect to Different URL

Copy the code below and paste it to your blank html.

<script language="javascript">
window.location.href="http://YOUR-REDIRECT-PAGE"
</script>

*Replace YOUR-REDIRECT-PAGE with your new URL.

HTTPS thumbnail

Resolved! Loading Your Google Fonts Over https (SSL) Sites

I couldn’t believe how amazingly simple it was! I was searching for days and nights how to make my google fonts properly load over on my WordPress https (SSL) site.

Here’s the basic story. I’m running an e-Commerce store with a Secure Sockets Layer installed on the domain. I created the logo with “La Belle Aurore” font from Google. When customers pay for their purchase, they have to land on the cart page showing https. My logo won’t be properly showing when my customer uses IE (Internet Explorer 11) browsers or my Safari from iPhones, so I really had resolve this issue.

I’ve seen some people trying to resolve the issue by creating weird code in the .htaccess file or tweaking the .function file in WordPress theme. I’ve tried it, but none of them actually worked for me.

Ta-Dah! It was simpler than I thought. I deleted the http: part on my CSS file, and it worked like magic! So DO “//fonts.googleapis.com/css?family=XXX”, NOT “http://fonts.googleapis.com/css?family=XXX”

@import url(//fonts.googleapis.com/css?family=NAME_OF_YOUR_FONT_FAMILY);

I used “La Belle Aurore” font on my site, so here’s what I have. @import url(//fonts.googleapis.com/css?family=La+Belle+Aurore); I hope this method save your time as well. Good luck!

Table Width CSS Thumb

CSS: A Simple Way to Set the Table Column Width

Here’s a very simple way to size your table width with a few lines of CSS instead of giving inline values to it. This method is much easier for creating responsive tables.

DEMO: How It Looks

35% 15% 5% 35% 10%
A B C D E
A B C D E
A B C D E

CSS

Copy the code below and paste into your CSS document.

table tr td { padding:20px }
table td:nth-child(1) { width:35%; }
table td:nth-child(2) { width:15%; }
table td:nth-child(3) { width:5%; }
table td:nth-child(4) { width:35%; }
table td:nth-child(5) { width:10%; }

HTML

Copy the code below and paste into your HTML document.

<table class="table" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>35%</td>
    <td>15%</td>
    <td>5%</td>
    <td>35%</td>
    <td>10%</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
</table>

You can copy both CSS and HTML codes to your file and tweak around as you like!

Circled Numbers

Circled Number Lists (HTML/CSS)

Get Custom Phone Case Now!

You can make a circle around your Ordered List, <ol> as below without using image formats like JPG or PNG, so this way you can reduce the developing and loading time for your site.

DEMO: How It Looks

Circle Around Numbers in Steps (HTML & CSS)

  1. This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder. This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder.
  2. This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder. This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder.
  3. This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder. This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder.
  4. This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder. This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder.
  5. This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder. This is the sample draft for circled number bullet points for ordered lists. This sentence is just for a place holder.

CSS

Copy the code below and paste into your CSS document.

ol {
    counter-reset:item; 
    margin:0; 
    padding-left:0; 
}
ol>li {
    counter-increment:item; 
    list-style:none inside; 
    margin: 40px 0;
    overflow: hidden;
    font-size: 16px !important;
    line-height: 1.3;
}
ol>li:before {
    content:counter(item) ;
    margin-right: 20px;
    padding: 8px;
    display: block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    width: 65px;
    background: #fe862c;
    color: #fff;
    text-align: center; 
    font: 56px 'Lato', Helvetica, Arial, sans-serif;
    font-weight: 100;
    float: left;
}

HTML

Copy the code below and paste into your HTML document.

<ol>
<li>Lorem ipsum dolor sit amet, felis dui nam, vivamus turpis bibendum et massa.</li>
<li>At augue, erat dui odio. Duis lectus, laoreet et, dolor nascetur tellus tellus sit etiam, massa leo dolor. Magna mi vitae et, lectus pellentesque, nec magna et ante, vehicula torquent venenatis tempor eget, elementum condimentum. </li>
<li>Integer porttitor donec, justo in, in pede, et leo ornare viverra erat ac. Dui diam, a sed purus, porta penatibus. Magna in, congue quam pulvinar cras malesuada condimentum nunc, vestibulum ut dolor tortor fusce nibh sollicitudin.</li>
<li>Vitae in, a pulvinar velit laoreet, tristique nascetur sapien. Placerat nunc a integer tincidunt sem, vivamus turpis, erat pulvinar interdum rhoncus nonummy vitae, etiam eleifend arcu non cras a commodo.</li>
<li>Quis mus donec, volutpat placerat nam et eros quam enim, id tincidunt aliquam libero odio, suspendisse a quam tristique ligula.</li>
</ol>

You can copy both CSS and HTML codes to your file and tweak around as you like. Enjoy coding!

Weight Loss Industry Website Thumb

Freebies: Weight Loss Diet / Health Website Design Mock Up (PSD)

Weight Loss / Health industry website design mock up (HTML/CSS) by Identity Design was designed in Photoshop File. This PSD is available for a free download and fully customizable for your own website or WordPress template.

Weight Loss Industry Website Mock Up

Terms
  • All iiiji.com freebies can be used for both personal and commercial use.
  • You may not redistribute or resell iiiji.com freebies in any shape or form.
Christmas-email-300

Freebies: Christmas Responsive Email Template for Business (HTML/CSS)

Christmas Promotional Email Template (HTML/CSS) by Identity Design was designed in Responsive HTML and CSS. The main banner and the Call-To-Action button are compressed in PSD so it’s fully customizable. This Responsive HTML/CSS Email template with PSD is available for a free download.

Christmas Responsive Email Template

Terms
  • All iiiji.com freebies can be used for both personal and commercial use.
  • You may not redistribute or resell iiiji.com freebies in any shape or form.
infographic-300

Freebies: New Year New You Infographic Template (PSD)

New Year New You Infographic Template by Identity Design was designed in standard resolution 600 x 800 pixel banner for the weight loss company, SENSA®. You can edit with your own new year resolution messaging for your banner, and it’s ready to use in Photoshop. This PSD template is available for a free download.

BNC_Infographic

Terms
  • All iiiji.com freebies can be used for both personal and commercial use.
  • You may not redistribute or resell iiiji.com freebies in any shape or form.
Snowing Thumb

Freebies: Merry Christmas Gif Animation Template (PSD)

Merry Christmas Gif Animation Banner Template by Identity Design is designed in standard resolution 1200 x 435 pixel with 14 slides of timeline. You can add your message to this fantastic bling banner, ready to use in Photoshop. You can view the timeline panel by going to Photoshop -> Window -> Timeline (Panel). This PSD template is available for a free download.

Snowing Animation PSD

Terms
  • All iiiji.com freebies can be used for both personal and commercial use.
  • You may not redistribute or resell iiiji.com freebies in any shape or form.
Foodie Website thumb

Freebies: Foodie Website Mock Up Template (PSD)

FOODIE Website Design Mock Up by Identity Design is designed in standard resolution 1200 x 750 pixel. This clean & sophisticated design is ready to use on your own design before it’s cut up in HTML. It’s layered in PSD and available for a free download.

Foodie Website Mockup

Terms
  • All iiiji.com freebies can be used for both personal and commercial use.
  • You may not redistribute or resell iiiji.com freebies in any shape or form.
grunge

Freebies: The Gloria Revival Grunge Poster Template

The Gloria Revival poster by Identity Design is designed in high resolution 3600 x 4800 pixel (18 x 24 inch). This artistic poster is rendered nicely with grunge texture in the foreground and background. It’s layered in PSD and available for a free download.

grunge_poster

Terms
  • All iiiji.com freebies can be used for both personal and commercial use.
  • You may not redistribute or resell iiiji.com freebies in any shape or form.
mailchimp

Quick Start Guide to MailChimp for WordPress

This post will be a quick start guide to MailChimp for WordPress plugin. You might use it to collect massive email data from the visitors of your website in order to send a blast of email for your personal or commercial needs. For beginners, MailChimp is a great place to start with your email campaign where that is available to “send 12,000 emails to 2,000 subscribers for free”.

  • 1

    Download the MailChimp for WordPress Plugin. https://wordpress.org/plugins/mailchimp-for-wp/ or go to your WordPress Admin -> Plugins -> Add New -> (Search for) MailChimp for WordPress -> Download & Activate.

  • 2

    Sign up MailChimp website for free. http://mailchimp.com/

  • 3

    Create and name your list. Go to the ‘List’ menu on the sidebar. Create a list.

  • 4

    Go to your name at the top of the sidebar and select ‘Account’.

  • 5

    Create API Key. On the top menu click ‘Extras’ -> API keys -> ‘Create A Key’

  • 6

    Copy the API Key you just created and Paste it onto your ‘MailChimp for WP’ (your WordPress Admin -> MailChimp for WordPress -> MailChimp Settings) then ‘Save Changes’

  • 7

    Check and make sure you see ‘CONNECTED’ sign on ‘MailChimp API Settings’. Click on the button -‘Renew MailChimp lists’

  • 8

    Go to the admin -> ‘MailChimp for WP’ -> ‘Checkboxes’ and check on the ‘MailChimp Lists’ box and save.

  • 9

    Go to the admin -> ‘MailChimp for WP’ -> ‘Forms’and check on the ‘Lists this form subscribes to’ box and save.

  • 10

    On the ‘Form’ setting page, copy the form shortcode below ‘Form mark-up’ and paste into any posts or pages you want to show your subscriber form, or you can use a MailChimp form widget to subscribe emails. (For widget users, go to the admin -> drag and drop ‘MailChimp Sign-Up Form’ to your widget sidebar.

  • Screen Shot 2014-10-13 at 12.37.18 AM

  • 11

    Test your email. Once you actually test subscribing with your email, you would get a successful message “Thank you, your sign-up request was successful! Please check your e-mail inbox.”, but if miss any steps from above, you might see a message “oops. Something went wrong. Please try again later.”

Enjoy the MailChimp for WordPress plugin / widget!

emmaus

Freebies: The Way to Emmaus High-Res Poster Template

The Way to Emmaus poster by Identity Design is designed in high resolution 3600 x 4800 pixel (18 x 24 inch). With the sun flare that hits the lens, the art is showing a mysterious way or the way of light. It’s available for a download which layered in PSD so you can easily edit and replace texts with your own words. This would be a great resource for any Christian services relating to the message or any other short movie posters.

The Way to Emmaus

Terms
  • All iiiji.com freebies can be used for both personal and commercial use.
  • You may not redistribute or resell iiiji.com freebies in any shape or form.
splatter

Freebies: Paint Splatter High-Res Art Poster Template

Paint / ink splatter poster by Identity Design is designed in high resolution 3600 x 4800 pixel (18 x 24 inch). The artwork is layered in PSD so you can easily edit and replace texts, and you can hide and show other splatter marks as well as change color with hue adjustment. Start your splatter design with this template!

Splatter_Poster01

Free high resolution poster template for your design

other samples

You can easily change color.

Terms
  • All iiiji.com freebies can be used for both personal and commercial use.
  • You may not redistribute or resell iiiji.com freebies in any shape or form.
Responsive

Responsive Google Adsense is Easy!

We are facing a big transition in web design. In recent days, majority of well developed websites are made in responsive websites. Responsive design is the development responding to the environment based on screen size of a device. That being said the content elements must evolve to meet the technology as millions of bloggers are using Google Adsense technology to monetize their content.

Below is the HOW-TO guide to tweak the current Google Adsense code with the new responsive Google Adsense banners on your site. You don’t need to have a deep understanding of it’s frame work. Here’s an easy way to make it happen.

Our DEMO is here. Just look at the header section of this site. Do you see a wide horizontal banner (728 px x 90 px)? Try resize the browser to make it smaller and reload the page. Try even smaller like you are using a mobile and reload the page. Do you see the size of the ad is changing as it’s responding?

Let’s first take a look at your current Google Adsense Code below. You can get this code from Google Adsense Site → My ads (top menu) → “Get Code” from one of your ad unit.

Make sure you select “asynchronous” code type from the drop down menu.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- NAME OF YOUR AD -->
<ins class="adsbygoogle"
     style="display:inline-block;width:728px;height:90px"
     data-ad-client="ca-pub-8255226778912403"
     data-ad-slot="1054112722"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

1. You simply add a <div> around it.
2. Named the class to responsive-ad on the <div>
3. Added the class responsive-ad to <ins>. So it’s now adsbygoogle responsive-ad.
4. Changed the style to display:block
5. You must replace data-ad-client numbers and data-ad-slot numbers with yours..
6. Added data-format="auto" before closing </ins> tag.
7. Add <style> tags. You can tweak it whatever you want.

<div class="responsive-ad">	
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- NAME OF YOUR AD -->
<ins class="adsbygoogle responsive-ad"
     style="display:block"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"
     data-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

<style type="text/css">
.responsive-ad { width: 320px; height: 50px; margin: 0 auto; }
@media (min-width:480px) { .responsive-ad { width: 468px; height: 60px; } }
@media (min-width:768px) { .responsive-ad { width: 728px; height: 90px; } }
</style>

The <style> above has set a minimum of 768px (and up) for desktops, a minimum of 480px (and up but below 768px) for tablet, and 320px (and up but below 480px) for mobile. You may feel free to change the numbers of min-width: as your site structure.

Enjoy your blogging and monetizing with the new Responsive Google Adsense!

Stock Photo

Best Free Stock Photo Sites for Commercial Use

We need a good stock photo for free! There are many great paid stock photo websites out there like, Istockphoto.com or Shutterstock.com, but it’s always good to look for free stock photos before you actually spend your money. Why don’t you get some free stock images with awesome quality (in artistic perspective) which will make your design beautiful?

If you are an individual proprietor or freelancer like myself, who’s willing to spend some time to dig for a nice photography for your design, you’ll enjoy my “Best Stock Photo Sites for Free for Commercial Use” list below. I know you’d especially enjoy the “for Commercial Use” part, which means you don’t need to get permission for both personal / commercial use.

Little Visuals

Little Visuals

Jay Mantri

Jay Marini

  • http://jaymantri.com/
  • Quality: ★★★★★
  • Mostly Scenery and Material Images
  • Random Order
  • Weekly Subscription Available

Superfamous

Superfamous

New Old Stock

New Old Stock

  • http://nos.twnsnd.co/
  • Image Quality: ★★★★★
  • Random Order
  • Vintage Photos from the Public Archives

Death to the Stock Photo

Death to the Stock Photo

Unsplash

Unsplash

  • https://unsplash.com/
  • Quality: ★★★★★
  • Mostly Lifestyle and Scenery Images
  • Random Order
  • Weekly Subscription Available

Albumarium

Albumarium

IM Creator

IM Creator

Public Domain Archive

Public Domain Archive

Gratisography

Gratisography

Life of Pix

Life of Pix

Snapographic

Snapographic

SplitShire

SplitShire

Foodie’s Feed

Foodie's Feed

Lock & Stock Photos

Lock & Stock Photos

picjumbo

picjumbo

All-free-download.com

All-free-download.com

Free REFE Mobile Photos

FREE REFE MOBILE PHOTOS

stockvault

stockvault

morgueFile

morgueFile

freeimages

freeimages

dreamstime

dreamstime

Stock Free Images

Stock Free Images

Free Digital Photos

freedigitalphotos.net

Free Digital Photos

freedigitalphotos.net

freepik

freepik

pixabay

pixabay

stockphotos.io

stockphotos.io

Pickup Image

pickupimage

Google Advanced Search

Google Advanced Search

parallax smooth scrolling

Download: Simple Parallax Smooth Scrolling Website Template

With new technologies of HTML5, CSS3 and JavaScript, parallax scrolling is one of the hottest trends in web design industry. Floating with different speed of scrolling background elements could make a website stronger in storytelling. It’s easy to find parallax resources online, but it’s hard to find a function with smooth scrolling effect.

parallax-smooth-scrolling

Here’s the parallax website with “SMOOTH” scrolling effect for you to download. The website is made of HTML5/CSS/JavaScript. It’s free to use for your website, but it only works on Google Chrome. For other browsers everything works perfectly except for the smooth scrolling effect.

trash

How to Remove or Uninstall Plugins like Phantasm in Adobe Illustrator?

Get Custom Phone Case Now!

Plugins are great for Adobe Illustrator. There are many open shared plugins and it’s free to use. But sometimes a plugin has a trial period for 15 to 30 days, and it asks you to pay for the software and you just don’t want to purchase it, like Astute Graphics in my case (It’s a great plugin and would recommend to use, but for me, I found a way to change group of hue adjustments with my Adobe Illustrator CC built-in function so I no longer needed the plugin). When the trial period has expired, a pop-up window shows up every time when I open Adobe Illustrator, like this, and it’s a bit annoying:

Astute Graphics Phantasm

After you’ve select the ‘continue’ button, you can check to see the Phantasm plugin has been installed to your system by going to the top menu ‘illustor’ -> ‘About Phantasm’.

About Phantasm

Let’s close the Adobe illustrator by go to the top menu ‘Illustrator’ -> ‘Quit Illustrator’.

Okay, here’s what you should do to remove/uninstall the plugin:

1. Go to Applications folder: Finder -> Go -> Applications (or Shift + Commend + A)

Trash the Plugin

2. Go to Adobe Illustrator -> Plug-ins -> Trash ‘Phantasm.aip’ the plugin.

Done!

Top menu

Go and open Adobe Illustrator and check if the plugin has been removed completely by going to the top menu ‘illustor’ (you won’t see ‘About Phantasm’ anymore).

Weird Code

WordPress Appearing Strange Weird Characters / Codes

Get Custom Phone Case Now!

This was pretty shocking moments when seeing the weird strange codes on my WordPress website. I was looking all over to resolve the issue and it worked for me. This could has happened because you have upload your plugin directly through FTP and didn’t go through the backend and install it proper way.

Which I did to make all this mess. I uploaded my files directly through FTP.

weirdcodes

I had back ups files, but these weird strange characters were showing up on top of every pages I go even I replaced it with my backed up files.

If you see the similar things showing, just de-activate the plugin that causing the issue, or you can delete the plugin folder directly from your FTP. And here’s what you should do next, re-install the plugin through the WordPress backend (admin) panel. It worked like a charm.

You might still see after, but don’t go crazy. There is a good chance your browser’s cache might need to be refreshed. Hit “Reload” the browser or Shift + “Reload” and it should work fine.

fonts

Fonts Collection – Best for Web and Print Design

I always look for GOOD Fonts for my design. I’ve been in the industry almost a decade, and with the experience, there are fonts more likely to use than others when designing web or print outs like posters, banners, and documents. Some are good for a headline of an article, and some are good for copies. Most of them are FREE with personal/commercial use, so hope you enjoy my collection.

Gotham

San-Serif, Condensed
gothamFREE Download Gotham family is all time my favorite. It’s great for headline and body copy.

Bebas Neue

Condensed San-Serif, Uppercase Only
bebas neueA sophisticated bold condensed gothic font for PC, Mac, & Web . Highly recommended for titles.
FREE Download | Credit “Dharma Type”
http://dharmatype.com/

League Gothic

Condensed San-Serif
league gothicFREE Download

Frontage

San-Serif, Uppercase only, for Headline and decorative type
frontage$55 at myfonts.com

Helvetica Neue

San-Serif, Condensed to Extended, for body copy
helvetica neue$39/each at myfonts.com

Futura

San-Serif
futuraFREE Download

Knockout

San-Serif, Condensed to Extended
knockout

Nexa

San-Serif & Slab-Serif, Thin to Ultra thick
nexaNexa – Download FREE Version
Nexa – Buy Full Version
Nexa Slab – Download FREE Version
Nexa Slab – Buy Full Version


SignPainter

Cursive Pen Script
SignPainter fontFREE Download

Belinda

Cursive Handwriting Script
belinda$35 at Linotype.com
A Handwriting & fun cursive script for Mac & PC

WordPress

A Simple Way to Hide Featured Image inside Post with CSS

Here’s a very simple way to hide your featured image inside your post area, and it does NOT affect your actual featured image on your site’s front-page or the thumbnail image from the list. You are not deleting anything but simply hiding!

This post was originally for the theme “TwentyTwelve”, however, as many people have asked about other recent themes, I have organized the codes for the default WordPress themes from “Twenty Twelve” to “Twenty Sixteen”.

For Twenty Twelve

Copy the code below and paste into your CSS document.

.attachment-post-thumbnail { display:none; }

For Twenty Thirteen

Copy the code below and paste into your CSS document.

.entry-thumbnail { display:none; }

For Twenty Fourteen

Copy the code below and paste into your CSS document.

.post-thumbnail { display:none; }
.site-content .hentry.has-post-thumbnail:first-child { margin-top: 48px; }

For “Twenty Fourteen” theme, the margin of the top header gets weird after hiding the featured image. Adding the second line, margin-top: 48px will fix the issue.

For Twenty Thirteen

Copy the code below and paste into your CSS document.

.post-thumbnail { display:none; }
.hentry.has-post-thumbnail { padding-top: 8.3333%; }

For “Twenty Fourteen” theme, the margin of the top header gets weird after hiding the featured image. Adding the second line, padding-top: 8.3333% will fix the issue.

For Twenty Sixteen

Copy the code below and paste into your CSS document.

.post-thumbnail { display:none; }

For any questions, please leave a comment. Enjoy blogging!

Texture

TextureLovers.com

A site that contains hundreds of awesome textures in high resolution JPG with the variety of concrete, fabric, foliage, liquid, metal, paint, paper, rust, stone, rock, wood, clouds, sky, and etc.

TextureLover

PSD Hatched Slash Diagonal Pattern

Download PSD: Photoshop Hatched Slash Diagonal Pattern

Hatched/slash pattern makes slick feel to your art work. Here’s an easy way of doing it in Photoshop.

  1. Create a “New” canvas (go to “File” -> “New”). Set 6 pixels on both “Width” and “Height”.
  2. Open “Layer” palette (go to “Window” -> “Layer”). Delete existing background layer so it’s now “Transparency”.
  3. Blow the view all the way up to 3200% by select Magnifying Glass Icon from the “Tools”. Draw a line diagonally with “Pencil” tool (Like below).

Dotted Line

Feel free to customize yourself with making different colors, directions, and even different sizes like 3 x 3 pixel or 2 x 2 pixel. You can also download PSD here:

Download PSD

Application

  1. Lets continue with what we have, or simply open the PSD above.
  2. Go to “Edit” -> “Define Pattern” to and name your pattern as you like. Now, we are done with defining the pattern. Let’s apply the pattern to the image.
  3. Place a background less image by “File” -> “Place” and select your image. I’ve placed a chocolate donut png image.

Background Less Donut Image

  1. Create a new layer (green arrow on right), fill a color as you like (I chose WHITE), and drag to place the layer below the “donut” layer.

Layer Style

  1. Let’s add a layer style to the background layer (Mine is “white bg”) by click on the “fx” button (the yellow arrow) shown above. Then, on the “Layer Style” window, click “Pattern” button (the red arrow) and choose your Hatched / Slash / Diagonal Pattern you made.

FINAL WORK:

Final Hatched Donut Image

globe

Google, Yahoo and All Major Search Engine Tips

Inputting “KEYWORDS” into the search engine box would be your first attempt while finding what you are looking for in the world wide web. There are a few tips that make your searching even faster adding some indicated codes to your search input box:

[“”] DOUBLE QUOTATION

Finding Exact Word with Order: wrap double quotation marks (“”) to your search words. In example, “cool free photoshop brushes” would only find cool free photoshop brushes NOT best free photoshop brushes or awesome free photoshop brushes.

[-] Negative/Minus CODE

Words You Want to Exclude: Add a negative/minus code immediately before the world you want to exclude without space. In example, abstract background image -jpg would find you all abstract related background images but not in jpg extension. (JPEG will shown in the search results)

[filetype:]

A Specific File Type Search: Input “filetype:(with colon)” in front of the file type name such as “jpg” or “pdf” to search that exact file type with the keywords. In example, “filetype:pdf design” would find you all PDF files that related to the word DESIGN.

[site:]

To Find Within a Site: Input “site:(with colon)” before any website such as “iiiji.com” follow by the keywords would let you find the subject within the website you’ve indicated. In example, “site:iiiji.com tutorial” would find articles about TUTORIAL within the site iiiji.com.

[*]

A Placeholder: The code “*” in between keywords be treated as a placeholder, so “Freelance * Design” will find you Freelance Graphic Design, , Freelance UI/UX Design, and so on.

[OR]

To Find Either One of Several Words: If you want to search for something either one of its kinds such as “design award 2010 OR 2011” will get you a result within these two years of resources. (OR must be ALL-CAP)

Joomla to Wordpress

Migrating Joomla to WordPress

Here’s the a way to migrate Joomla users to WordPress users. I’ve used Joomla for some years and I still thinking it’s a great Content Management System. But however, I’m so much liking using WordPress for my site building I definitely needed to bring users from Joomla to WordPress. If you have hundreds of articles and migrating one from another it’s pain but still possible and manually doable, but when migrating users data, it just can’t.

I’ve tried to follow other tutorials, but for some reason it didn’t work out for me. So I’ve done some other testings and finally it worked out! Now, let me introduce to how to migrate Joomla users to WordPress users. The versions I’ve used is Joomla 1.5 to WordPress 3. Here’s how as simple as:

1. On your Joomla site, export users to a CSV file.

To export Joomla users data, use ‘ARRA User Export Import’ plugin.

  • Install plugin and go to the plugin page (Admin – Components – ARRA User Export Import)
    Joomla Components
  • Click on ‘User Export’, mark the following check boxes, and “Export”!
    ARRA User Export Import
  • You’ll get a “CSV” file.

2. Tweak the CSV file before import to your WordPress site.

  • You can open the file with Dreamweaver, Microsoft Excel, or one of the text editors you already have.
  • Just need to change very top row.
    Modify from Text EditorEdit text as the following table (Top to Bottom) and save.

    first name last name username email password usertype
    first_name last_name user_login user_email joomlapass role

    *Sometimes Microsoft Excel won’t save it right. I recommend Dreamweaver.

3. Import the CSV file to your WordPress site.

  • To install plugin, on your wordpress site, go to Admin – Plugins – Add new.
    Wordpress Plugin
  • Search for ‘Import Users from CSV’,
    Import Users from CSV
    ‘Install Now’, and ‘Activate Plugin’.
    Activate Plugin
  • Go to ‘Users’ – ‘Import from CSV’
    Import From CSV
  • Drag your updated ‘.CSV’ file to the ‘Choose File’ filed, “Import”!
    Import users from a CSV file
  • Check your ‘Users’ – ‘All Users” page to see everything looks right!
    Check Users page