Category Archives: Uncategorized

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.

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!

[:]

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!

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