03 Mobile Apps Every Web Designer should Know About

September 28, 2019 web-admin
0

There is much software that are designed to create web designs in desktop computers but you will amaze to hear that some mobile apps are also available to help with web design. These are very helpful when you are on the go or outside your home to continue your web design and developing.

01920 Text Editor (Android App)

.

There are many of textual content editors to be had for android, however 920 Text Editor is our best. In case you’re writing code on a small display, you want your editor to be easy, light-weight and responsive, and this one ticks all of these goals. 920 text editor supports css, javascript, asp, PHP, python, actionscript, C/C++ , C#, erlang, frink, HTML/XML/WML, java, jsp, perl, powershell and many more.

There are also a few pretty nifty capabilities. A beautiful design of multi tab lets you open specific documents in exclusive tabs for easy switching; you can lock the display screen orientation into horizontal or vertical; and there are masses of cool shortcuts, including the use of the extent keys to speedy transfer the show or hide the toolbar.

02. Adobe XD mobile (iOS or Android Platforms)

.

It is released in preview in 2016, Adobe’s Experience Design CC – or adobe XD – is a wire framing and prototyping device that has fast established itself as a key part of the creative cloud. and its accompanying cell app helps you to preview your designs on each ios and android devices. if you’re using adobe XD on mac-OS, you could make layout and prototyping changes on the desktop, and see them meditated in real time on all cell gadgets linked through USB. rather, both macos and windows 10 users can load adobe xd documents from innovative cloud files. just vicinity your xd files in your cc files folder on computing device, then load them into your gadgets on mobile with the use of adobe XD.

The Adobe XD app is free, available to download from the App Store for iOS  or via Google Play for Android.

.

03Py (iOS or Android Systems)

.

Gaining knowledge of code of a brand new language, including quick or python, doesn’t sound like a fun pastime, but py makes it so by using turning it into a game play, released in 2016 on ios. py was released on android, even though it’s no longer available in all territories yet. it currently gives you the opportunity to analyze python, rapid, ios improvement, statistics technology, html, css, square, javascript and java. The app is free to down load and use for a one month trial for free, after which you’ll be charged (around £7.70) per month to preserve the usage of it. It has more than 1000 tutorials and trainings on different web and computer languages

You can Download it from the App Store for iOS or from Google Play for Android.

.

.

.

.

High Profile Online Tools for WebPage Speed Test

June 28, 2019 web-admin
0

As we know that no website owner desires to experience terrible speed performance . Does web page speed count? We observe that most of the people don’t like the web pages that are load with more time and delay loading contents. This fact is described by Kissmetrics that almost 40% of traffic kick off of a domain if the loading period takes more than 3 seconds. Due to above fact, web page speed is important for reasons stated. I bring here more than 10 online web page speed testing tools which will help you to analyze your web page loading speed.

speedtest-tools

1. GTmetrix

Gtmetrix-for-speedtest

GTmetrix is the one of the best availale page speed testing tool over internet for  performance optimization, GTmetrix’s key functions are appropriate for most net overall performance tracking. It’ll give you a summary of key performance signals, website tracking, and the ability to test your site from a couple of areas over the world. All free of charge. you furthermore may get to conduct a connection speed test as how website is performing on various connection speeds.

gtmetrix-speed-test-1

2. Google PageSpeed Insights

google-pagespeed-insight-1

Google has a best and smart tool to check your page load speed test named Google Page Speed Insight. The user experience metrics are based on the website’s overall performance on the Chrome UX document, each on mobile and computer gadgets. The test will provide you with analytical and Detailed information.  It also provide overall performance facts that your site visitors revel in. These tests covered through small to middle-scale commercial enterprise and independente site owners who look for an easy and honest way to maintain their web overall performance. These speedtests based on 3 factors: web page-load time, execution speed, and duration of the complete page load time.

3. WebPagetest

webpagetest

webpagetest provide you with a comprehensive collection of information for your web page speed. It provides a variety of speed tests from a couple of places throughout the international tertiary with the use of internet Explorer and Chrome for free. Its key capabilities consist of multi-step transactions testing, video capture, and content material blockading. You’ll get useful resources about loading waterfall charts, web page SEO optimization checks, and hints for upgrades new techniques.

4. YSlow

yslow-speedtest

YSlow is the web testing tool for speed test your website developed with the aid of  Yahoo! to use this tool, you have to install the browser extension for chrome as this is to be had for all essential web browsers. The tool tests your website on 23 factors which are the important for overall performance metrics.

5. Google test My site

testmysite-page-speedtest

Testmysite is a Google speed test for mobiles devices. It shows the different aspects affecting you page loading speed on 4G networks as cellular phones are becoming increasingly more commonplace in recent times, cell web sites need to preserve identical overall performance compared to laptop ones. take a look at My web page measures the internet site’s cellular speed, benchmark in opposition to competitors, and affords a custom file along side suggestions on how to improve your pages’ performance.

6. dotcom-monitor

dotcom-speedtest

dotcom-monitor offers 23 unique locations and seven one of a kind browsers wherein you could run your website speed test. their particular function is that you may run all geographical exams concurrently. this will save you a variety of time, as each different tool you have to run them for my part in step with location. their reviews are divided into 5 exceptional sections which encompass a summary, overall performance, waterfall chart (breakdown), host, and errors. You may then click on into every character report and or waterfall breakdown.

7. Pingdom

pingdom-speedtest

This speedtest tool is designed to assist make your web page quicker by way of identifying what approximately a web site is speedy, slow, too massive, and so on. It tried to make it beneficial each for professionals and beginners alike. In brief, it help us to make decisions for optimization adn be an smooth-to-use device built to assist site owners and net developers everywhere optimize their internet site overall performance. pingdom gives value-effective and reliable uptime and overall performance tracking to your Website. It uses more than than 70 international polling places to check and verify our customers’ websites 24/7.

8. Dareboost

dareboost-speedtest-tool

dareboost website speed check tool which performs speed test in many aspects. Dareboost’s speed test take a look as device is capable of engaging in overall performance tracking from thirteen check places and 7 gadgets. The latter consists of various kinds of cellular devices. This tool’s key capabilities encompass the potential to simulate a speed take a look at with and with out adblocking and block unique domains to find out the culprit of bad internet / web overall performance. It has a very detailed report about resources speed on your website. It is a great featured speed testing tool. 

9. LoadImpact

loadimpact-pagespeed-test

loadimpact has a deep pagespeed test for your website. It take a look at cloud-primarily based load testing device specializes in website, app, and API overall performance problems. using k6 as the open-supply, command-line-pushed load checking out tool, the troubles can be detected without problems. whilst the web page speed test is available for free, you need to buy their plan to make use of the ones gear. It tests speed by sending 25 instant virtual users to your site.

10. GiftOfSpeed

giftofspeed-speedtest

gift of velocity webpage test tool evaluate your website’s load time from 8 extraordinary places the use of GiftOfSpeed’s pace check. You also can immediately improve your web overall performance the use of their other unfastened tools consisting of CSS optimization take a look at, damaged requests and check JavaScript compressor.

11. Uptrends

uptrends-speed-test

Uptrends speed Test offer to evaluates your web site’s load time on computing device or cell phone (mobiles) gadgets from ten specific places. You can additionally set the bandwidth throttling and the net browser . The website tracking system is likewise available at no cost. Its functions include a huge scope of check vicinity, email alerting, and tracking dashboards.

uptrends-speedtest-2

Create a Font Awesome icons list Popup for Quick Icon Selection in WordPress .

June 9, 2019 web-admin
0

Font awesome icons are one of the widely used vector icons on the web. Many website use these beautiful icons on their landing pages, home pages and service pages. These icons provide a comprehensive idea about your services. Font awesome icons also add a pretty web design and look website professional. There is many ways to use these icons. If you are WordPress theme developer you need these font awesome icons list in your wordpress dashboard for their use in header, footer, side bars and in widgets of your WordPress website.

Where to Use This Font Awesome Icon Pop up

This Icon populated pop up will be target to use in WordPress dashboard widget for quick selection of icon . and save its value in the WordPress database and used saved value later on at front end of the theme. For example it is useful for custom option page of theme where you desire to select an icon and save it in wordpress options database or you can use this select box in wordpress widget input and save the value which further use to display font awesome icons in widget area or anywhere in your wordpress theme or template.

How to Implement

We are using a free available plugin named Simple Font awesome Icon Picker and integrating it in our theme. You can see live demo of plugin. Download this plugin and add its two files in below given function in your functions.php file. Remember to add JQuery and font awesome 4.7.0 library in this function. Code is given below. Change the local path according to your folders containing files. See code below:-

function ulook_load_scripts_fontawesome_icon_picker() {
 
 $fontawsome_url='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css';
 wp_enqueue_style( 'ulook-fontawsome-4.7.0', $fontawsome_url, false, '1.0' );
 wp_enqueue_script('ulook_fa_picker-js', get_stylesheet_directory_uri() . '/assets/js/simple-iconpicker.js', array(), '1.0.0', true );
 wp_enqueue_style( 'ulook-fa-picker-css', get_template_directory_uri() . '/assets/css/simple-iconpicker.css' , false, '1.0');
	
	
}
add_action( 'admin_enqueue_scripts', 'ulook_load_scripts_fontawesome_icon_picker' );

Above function will enqueue script in admin dashboard. Now add following code in your themes JS file containing JQuery Code.

jQuery(document).ready(function($){

 $('.input1').iconpicker(".input1");
});


Now you can use following code to create text box. When you click on the box it will create popup with Font awesome icons. When you select an icon its class name will be inserted in the text box.

<input name="a" class="input1 input" id="" type="text" value="" />

On clicking the text box you will see a pop up containing all font awesome icons of ver.4.7.0. the screen shot is given below:

screenshot-fontawesome-icons
screenshot

Build Beautiful responsive hero images Web Designs for Website

April 28, 2019 web-admin
0

Use of responsive hero images is now very popular in web design’s world. It makes web page very engaging, attractive and give beautiful look. Creating hero images yourself is not so difficult. You can create your own hero image very easily. Here in this article i shall show you the steps and code to prepare responsive hero image for your website easily. Below given image is our example of hero image which we are going to build here.

hero-image-demo

step-1 Basic HTML Structure

create a file hero.html. and write common html struture in the file. The hero image has five 5 basic common parts.

  1. background image
  2. overlay css gradient to blur background
  3. headline
  4. description line
  5. Button with link

In view of above hero design parts. We will create the following html structure below here.

<html>
    <head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
<body>
     <div class="ulook-hero-image">
         <div class="ulook-hero-text">
           <h1 class="ulook-hero">Hire Service for Recovery</h1>
           <p>We are ready to serve 24/7</p>
            <button>View Detail</button>
         </div>
     </div>

</body>
</html>

step-2 Start Styling for Hero Image Design

hero images are shown according to body height. so first step is to create body and html tags 100 % height relative to all view ports. for that following line will be added in the css file.

body, html {
    height: 100%;
    margin: 0;
  
    }

step-3- Style Code for Hero Image

Now it is time create the style for our hero image web design. For simplicity the css style is created on the same html page with in the style tag. but you can copy style separately in any css file and link that file to this html.

We aim to make responsive hero image. So we also add media queries in the last portion of our styles as our image could be shown on mobile devices and phones responsively.The complete code will be look like this.

<html>
    <head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	body, html {
    height: 100%;
    margin: 0;
  
    }

.ulook-hero-image {
      background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("img/image1.jpg");
      height: 50%;
	  display:block;
      /*set image for all screens */
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
      }

.ulook-hero-text {
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
	  font-family: Arial, Helvetica, sans-serif;
      }
.ulook-hero-text button {
      border: none;
      outline: 0;
      display: inline-block;
      padding: 10px 25px;
      color: black;
      background-color: #ddd;
      text-align: center;
      cursor: pointer;
      font-size:1.5em;
}

.ulook-hero-text button:hover {
      background-color: #555;
      color: white;
      }
h1.ulook-hero {
      font-size:2.5em;
	  font-family: Arial, Helvetica, sans-serif;
      }
.ulook-hero-image p {
      font-size:1.5em;
      }  
	 
/*make hero-image responsive for all screens */	 

   @media screen and (max-width: 768px) { 
.ulook-hero-image {
      height:100%;
      }
   }
   
   @media screen and (max-width: 450px) { 
h1.ulook-hero {
      font-size:1.4em;
      }

.ulook-hero-text button {
      padding:5px 10px;
      font-size:0.5em;
      }
.ulook-hero-image p {
      font-size:0.8em;
      }  
    }
	
	</style>
     
    </head>
<body>
     <div class="ulook-hero-image">
         <div class="ulook-hero-text">
           <h1 class="ulook-hero">Hire Service for Recovery</h1>
           <p>We are ready to serve 24/7</p>
            <button>View Detail</button>
         </div>
     </div>

</body>
</html>

 

step-4- Hero Image Example

Watch hero image Demo example here.

How to Create Widget in WordPress with Easy Steps

December 30, 2018 web-admin
0

create-widget-in-wordpressIn  this wordpress tutorial we are going to create widget in WordPress. In this basic widget tutorial we are going to create a simple widget in wordpress which will display the title of the widget and a welcome message “Welcome to WordPress Widgets”. So lets Start.

Step-1- Extend WP_Widget class to Create Widget in WordPress

This is the first step to create a basic widget in WordPress. This code for extending class can be written in a plugin or function.php file of your active WordPress theme. The purpose is that we are making a new instance of the class by extending it. so code is here.

[php]

class my_custom_widget extends WP_Widget {
/**
* There are four method inside this class needed to create
* a single instance of the WP_Widget class.
**/
}

[/php]

Method-1- Construct function of WordPress Widget Class

This function is one of the four  methods inside of the extended class. This function will assign name to class of widget, name to widget and a short description which will be shown in admin widget area.

[php]

public function __construct() {
$widget_options = array (
‘classname’ => ‘custom_widget’,
‘description’ => ‘This is an Example custom Widget’,
);
parent::__construct( ‘custom_widget_id’, ‘My Custom Widget’, $widget_options );
}

[/php]

Method-2- Widget Method to Create Display Output

This second method is for displaying output of the custom wordpress widget.

[php]

public function widget( $args, $instance ) {

$title = apply_filters( ‘widget_title’, $instance[‘title’] );
echo $args[‘before_widget’];

if ( !empty( $title ) )
echo $args[‘before_title’] . $title . $args[‘after_title’];

// This is area where you can run custom code to display the output
echo __( ‘Welcome to WordPress Widgets’, ‘theme_domain_name’ );

echo $args[‘after_widget’];
}

[/php]

Note: that every widget should include the 'before_widget''after_widget''before_title', and 'after_title' as shown above code.

Method-3- Form Method to Create WordPress Admin Widget Form

This is the third function method inside of the extended class. Where we create a form input in WordPress Admin widget screen. It is displayed in admin widget screen and accepts the input from users. Here is the widget code of this section.

[php]

public function form( $instance ) {
$title = !empty( $instance[‘title’] ) ? $instance[‘title’] : ”;
// Widget admin form
?>
<p>
<label for=”<?php echo $this->get_field_id( ‘title’ ); ?>”><?php _e( ‘Title:’ ); ?></label>
<input type=”text” id=”<?php echo $this->get_field_id( ‘title’ ); ?>” name=”<?php echo $this->get_field_name( ‘title’ ); ?>” value=”<?php echo esc_attr( $title ); ?>” />
</p>
<?php
}

[/php]

Method-4- Update Method to Save New Values in WordPress Database

This fourth and final method in extended class is to save new values in database given by user in Wordpess Widget Admin area. The code for this method is given below:

[php]

// Updating widget with new values
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance[‘title’] = ( !empty( $new_instance[‘title’] ) ) ? strip_tags( $new_instance[‘title’] ) : ”;
return $instance;
}

[/php]

Step-2-Register the Newly Created Widget in WordPress

We have create our extended class above and now we have to register our new class with wordpress press:

[php]

function register_my_custom_widget() {
register_widget( ‘my_custom_widget’ );
}
add_action( ‘widgets_init’, ‘register_my_custom_widget’);

[/php]

Final Words

In this WordPress Tutorial We have learnt that how can we create our own custom widget in WordPress. By adding all above parts of code, the complete code is given below:

[php]

class my_custom_widget extends WP_Widget {

public function __construct() {
$widget_options = array (
‘classname’ => ‘custom_widget’,
‘description’ => ‘This is an Example custom Widget’
);
parent::__construct( ‘custom_widget_id’, ‘My Custom Widget’, $widget_options );

}

public function widget( $args, $instance ) {

$title = apply_filters( ‘widget_title’, $instance[‘title’] );
echo $args[‘before_widget’];

if ( !empty( $title ) )
echo $args[‘before_title’] . $title . $args[‘after_title’];

// This is area where you can run custom code to display the output
echo __( ‘Welcome to WordPress Widgets’, ‘theme_domain_name’ );

echo $args[‘after_widget’];
}
public function form( $instance ) {
$title = !empty( $instance[‘title’] ) ? $instance[‘title’] : ”;
// Widget admin form
?>
<p>
<label for=”<?php echo $this->get_field_id( ‘title’ ); ?>”><?php _e( ‘Title:’ ); ?></label>
<input type=”text” id=”<?php echo $this->get_field_id( ‘title’ ); ?>” name=”<?php echo $this->get_field_name( ‘title’ ); ?>” value=”<?php echo esc_attr( $title ); ?>” />
</p>
<?php
}

// Updating widget with new values
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance[‘title’] = ( !empty( $new_instance[‘title’] ) ) ? strip_tags( $new_instance[‘title’] ) : ”;
return $instance;
}

}

function register_my_custom_widget() {
register_widget( ‘my_custom_widget’ );
}
add_action( ‘widgets_init’, ‘register_my_custom_widget’);

[/php]

Now this widget will be available in your WordPress Admin widget area and ready to use it in your sidebars.

How to Make a Radio Button with Image Label in WordPress

December 9, 2018 web-admin
0

In HTML template things goes differently when we create some elements like radio button as compared to WordPress. The difference is that we have required to create HTML elements dynamically in WordPress. So we are going to create dynamic radio buttons along with images for WordPress.

Wordpress radio button

Let’s Strart How to Make Dynamic WordPress Radio Button

Our WordPress tutorial will have multiple steps. We are using a little bit modified files of HTML and css already created here

BOOTSTRAP RADIO BUTTON SHOWCASE WITH IMAGES 

We need a function to implement our radio button functionality to use within WordPress. Following steps are required to implement our function.

  1. Add radio button styles to WordPress theme’s css file
  2. Your theme should include bootstrap necessary files in its enqueue scripts. If theme has already bootstrap and jQuery support then no need do anything about it.
  3. Create a wordpress function in theme’s function.php file to create radio button.
  4. Finally Use Function to create radio button sets

STEP-1 – Add Radio Button Styles

Add styles given below in your themes style.css file. This file, in most of the cases, is located in main directory of wordpress theme.

/* styles for -add radio buttons with image labels function */
.layout-box{
width:450px;
margin-left:2px;
margin-top:20px;
}
.layout-box img{
max-width:100%;
height:60px;

}

img.layout-image{
margin-left:2%;
}

div.radio.radio-adjust{
margin-top:-30px;
margin-left:2px;
width:100%;
font-size:0.8em;
}

.ur-col-width {
padding:0;
width:23%;

}

 

Include/Enqueue Bootstrap Script Files into Theme

Some themes already have bootstrap files included in their source files. But some times it is not. So you have to include bootstrap base files into WordPress theme by yourself. for the purpose you can consult this tutorial.

Bootstrap Setup for WordPress

Bootstrap Function for Making Radio Buttons

We will create following function in function.php file of our theme.

function ul_Add_Radio_Button ($col_width_percentage, $no_of_radio_buttons, $col_left_padding, $radio_name, $image_path, $title_array){

//************* Variables

$ur_col_width = $col_width_percentage.'%'; // chnage default columns width in %age
$no_of_radio =$no_of_radio_buttons; // set number of radio button blocks
$ur_col_padding=$col_left_padding.'%'; //left padding for columns in %age

//Implement dynamic styles with varibles of radio button

//start buffering
ob_start(); ?>
<div class="layout-box">
<div class="row">
<?php for ($x =1; $x <=$no_of_radio; $x++) { ?>
<div class="col-md-2 col-sm-2 ur-col-width" style="width:<?php echo $ur_col_width; ?>; padding-left:<?php echo $ur_col_padding; ?>;">
<img src="<?php echo $image_path.'rd'.$x.'.png'; ?>" class="layout-image">
<div class="radio radio-adjust">
<label><input type="radio" name="<?php echo $radio_name; ?>"><?php echo $title_array[$x-1];?> </label>
</div>
</div>
<?php } ?>
</div>
</div>
<?php
$u_radio= ob_get_clean();
return $u_radio; } //close function

you will see that it is the complete function to add radio buttons in wordpress. You will notice that it is receiving input parameters. I will explain each and everyone as below:

$col_width_percentage: Integer value for width of each column containing radio button and its label. this is considered as percentage.

$no_of_radio_buttons: Accepts integer value that how many radio button you want to create

$col_left_padding: Horizontal distance between radio button column.

$radio_name: Name of the radio button

$image_path: This is the folder path in your theme where images resides to use in this function. images name should be rd1.png, rd2.png, rd3.png and so on. these images will be used automatically with radio buttons from left to right sequence.

$title_array: This is the array of titles. which will be added from left to right sequence of radio buttons. In below example you will learn how to use it.

EXAMPLE: How to Use this WordPress Radio Button Function

You can use this function to create beautiful radio button in any template file like page templates of your WordPress theme. The usage code is given below:

$rd_titles_array = array("title-1","title-2", "title-3");//titles will be shown from left to right sequence
$rd_images_folder_path= get_template_directory_uri() . '/assets/images/'; //copy images in folder should be named as rd1.png, rd2.png respectively
$rd_radio_name='layout-radio'; //name of the raido button

//call the function
$show_radio=ul_Add_Radio_Button(25, 3, 3, $rd_radio_name, $rd_images_folder_path, $rd_titles_array);
//show results
echo $show_radio;

In above example. We are creating three radio buttons with its three titles and three images named. rd1.png, rd2.png and rd3.png. see above example in following demo.

DEMO EXAMPLE WORDPRESS RADIO BUTTON

Bootstrap Setup for WordPress-Loading Styles & Scripts Function

December 5, 2018 web-admin
0

Bootstrap is well known responsive tool for making beautiful web sites. It is a well defined set of css & JavaScript styling code. Which summarize and validate the css writing process. The main feature of bootstrap is its responsive design for mobile devices. It is widely used all over the world and especially in WordPress themes and applications. So in this WordPress Tutorial we are going implement basic bootstrap setup for wordPress.

Bootstrap Setup Files for WordPress

bootstrap setup-1

Most of the themes include basic bootstrap files in their style load process (Enqueue Style and Script Portion). But if your WordPress theme is not using bootstrap base then you can it by following adding following function in your theme’s function.php file.

/*********************
SCRIPTS & ENQUEUEING STYLE FOR BOOTSTRAP
*********************/
function Load_bootstrap_scripts() {

/* REGISTER BOOTSTRAP JS FOR SITE */
wp_register_script('slug_bootstrap',get_stylesheet_directory_uri().'/js/bootstrap.min.js');

/* ENQUEUEING JS FOR SITE */
wp_enqueue_script('slug_bootstrap');

//ENQUEUEING NECESSARY CSS STYLING FILES
$styles = array(
'bootstrap.min' => 'bootstrap.min.css', //bootstrap file
'style' => 'style.css' //custom style or theme style file
);
foreach ($styles as $fid => $style ){
wp_enqueue_style( 'slug-'.$fid, get_template_directory_uri() . '/css/' . $style, false, '1.0');
}
}
/* Load all scripts and styles */
add_action( 'wp_enqueue_scripts', 'Load_bootstrap_scripts' );

You should change path of the files according to your WordPress theme directory structure. the above function will add basic bootstrap setup in your theme.

Bootstrap & JQuery

To perform smooth operation of bootstrap, JQuery is an important and essential script. All versions of WordPress has included JQuery version as built-in feature and there is no need to include jquery separately but if you required anyhow then you can include the script just like bootstrap js file, register and enqueue as given in above example.

Bootstrap Radio Button Showcase with Images & Source Code Download

December 3, 2018 web-admin
0

Bootstrap has made a huge revolution in web designing. It is a well defined sets of css code with JQuery and javascrip. Bootstrap has predefined web designs like its responsive grid system, elements, web components and bootstrap forms. In this article we are going to learn that how can we make a bootstrap radio button which can be used in later web designs.

Lets Start our Bootstrap Radio Button Design

bootstrap radio button

Step-1 Create your Bootstrap Basic Template

This is simple template which is required as base line for our web design. It consists basic files for functioning of bootstrap.  You should be aware of this before proceedings. This complete template with bootstrap radio button design will be provided for download at the end of this tutorial. If you want to read more about basic template read below link.

Bootstrap Basic Template

Step-2 Designing Bootstrap Radio Button

Radio button is part of bootstrap form. We can use it within the form element when we plan to submit a form but if we want just radio button for handling with Ajax where we have no need to submit a form you can use it without form element. Here is a styling example so we are not adding form element. You can use it within your form element.  This is the basic code:-

<div class="layout-box">
<div class="row">
<div class="col-md-4 col-sm-4"><img src="assets/img/Left.png" class="layout-image">
<div class="radio radio-adjust">
<label>
<input type="radio" name="layout-radio">Left Side bar</label>
</div>
</div>
<div class="col-md-4 col-sm-4"><img src="assets/img/center.png" class="layout-image">
<div class="radio radio-adjust">
<label>
<input type="radio" name="layout-radio">Full Width</label>
</div>
</div>
<div class="col-md-4 col-sm-4"><img src="assets/img/right.png" class="layout-image">
<div class="radio radio-adjust">
<label>
<input type="radio" name="layout-radio">Right Sidebar</label>
</div>
</div>
</div>
</div>

We need to add this bootstrap radio button code into our bootstrap basic template file index.html. After adding it to concern file the complete code of index.html will look like this:-

[html]

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>form-setting</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="assets/css/untitled.css">
</head>

<body>
<div class="layout-box">
<div class="row">
<div class="col-md-4 col-sm-4"><img src="assets/img/Left.png" class="layout-image">
<div class="radio radio-adjust">
<label>
<input type="radio" name="layout-radio">Left Side bar</label>
</div>
</div>
<div class="col-md-4 col-sm-4"><img src="assets/img/center.png" class="layout-image">
<div class="radio radio-adjust">
<label>
<input type="radio" name="layout-radio">Full Width</label>
</div>
</div>
<div class="col-md-4 col-sm-4"><img src="assets/img/right.png" class="layout-image">
<div class="radio radio-adjust">
<label>
<input type="radio" name="layout-radio">Right Sidebar</label>
</div>
</div>
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

[/html]

Styles for Bootstrap Radio Buttons

Following is the style we need in our tutorial. We will add this style in style.css file under CSS folder of our basic bootstrap template.  The complete example with complete files will be provided for download at the end of this tutorial.

[css]

.layout-box{
width:400px;
margin-left:5%;
margin-top:20px;
}

img.layout-image{
margin-left:10%;
}

div.radio.radio-adjust{
margin-left:2%;
}

[/css]

Final Talk

This code will show three radio button in a row with images above them. you can increase number of  radio buttons and images by copy and paste following lines of code in index.html file.

[html]

<div class="col-md-4 col-sm-4"><img src="assets/img/Left.png" class="layout-image">
<div class="radio radio-adjust">
<label>
<input type="radio" name="layout-radio">Left Side bar</label>
</div>
</div>

[/html]

But keep in mind about integers used in class i.e. 4 in “col-md-4 col-sm-4”. The sum of all integers of classes “col-md-x” and “col-sm-x” should be equal to 12 respectively (according to the grid system of bootstrap). In above example if you add another radio button code then name of class for all bootstrap radio buttons will be  name will be “col-md-3 col-sm-3”.

See Live Demo Bootstrap radio buttons

You can download complete source code files here

Download Files

You can make Radio Button in for WordPress. See following WordPress Tutorial

HOW TO MAKE A RADIO BUTTON WITH IMAGE LABEL IN WORDPRESS

Bootstrap Basic Template for Startup

November 30, 2018 web-admin
0

Before going to make some complicated projects we need to have a solid foundation for our bootstrap projects, which can be considered as a base for forth coming projects. bootstrap basic template consists upon some folders and a Startup file which suppose to be required in almost every project of bootstrap. In future we will write all our code in this basic structure. We need some common files to be included in our project so we need not to discuss them again and we only focus on our main project.  so let’s start.

Following is the picture diagram of our basic structure of bootstrap:

bootstrap basic template

Asset Folder

This folder contains all necessary folder and files for working of bootstrap basic template. It further contains following sub-folders:

bootstrap Folder

It contains the two necessary files in sub folders to run bootstrap.bootstrap.min.css and bootstrap.min.js. These are minified bootstrap code files containing style and JavaScript code. We will not change any code in these files and folders.

CSS Folder

this folder contains style.css file which will contain our style code for different projects. It will be different for different projects.

img folder

this folder will contains our images which is going to be used our HTML projects with the help of this bootstrap basic template.

js folder

This folder basically contain minfied jQuery file. which is necessary for smooth functioning of bootstrap structure. it enhances the features provided by bootstrap. We can add more js files according to our needs.

index.htmlfile

This is the main file which will execute in browser. This file is calling and including all other files from this basic bootstrap template. If you are testing file on your home computer then it is good practice to execute your files through Xampp Testing server as it produces result same like in original web server over Internet. The code in this file is look like this:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap basic template</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<div class="row">
<div class="col-md-12">

<h1> Welcome to Bootstrap Basic Template </h1>

</div>

</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

We can add more files and folders in this basic template of bootstrap. but basic is basic. Now we are aware of our basic structure. In future we will no need to explain to keep things simple.

You can download this basic template here

PSD to HTML Converted Home Page with HTML and WordPress Template

September 30, 2018 web-admin
0

What will We Get:

  1. Using a psd file and will convert it to a simple html home page
  2. We are going to convert html template to WordPress page template.
  3. Live Demos of HTML and WordPress Templates
  4. Downloadable Source code of html template including PSD file
  5. Downloadable Source code of WordPress Page Template

What will We Use

WordPress, CSS, HTML, PHP

HTML home page Converted from PSD file

first of all we have a look on image of psd file given below.
home page psd image
Create html file named home1.html with your web editor and save following html structure to implement above psd design.

<!-- title link -->

<div class="Rectangle_1">

<div class="top_title"><a href="#">Home Page Demo</a></div>

<div class="Rectangle_2"></div>

</div>

<!-- main posts area contianer for a category -->

<div class="posts_container">

<div class="Rectangle_6_png">

<h4 class="cat_title">Category-1</h4>

</div>

<!--1st place holder -->

<div class="ul_post_wrapper">

<div class="ul_pic_container"><img src="img/jacket.jpg" alt=""></div>

<div class="Rectangle_3_png"></div>

<div class="Rectangle_3">

<div class="post_title"><a href="#">This is the title of the post being displayed</a></div>

</div>

</div>

<!--2nd place holder -->

<div class="ul_post_wrapper">

<div class="ul_pic_container"><img src="img/jacket.jpg" alt=""></div>

<div class="Rectangle_3_png"></div>

<div class="Rectangle_3">

<div class="post_title"><a href="#">This is the title of the post being displayed</a></div>

</div>

</div>

<!--3rd place holder -->

<div class="ul_post_wrapper">

<div class="ul_pic_container"><img src="img/jacket.jpg" alt=""></div>

<div class="Rectangle_3_png"></div>

<div class="Rectangle_3">

<div class="post_title"><a href="#">This is the title of the post being displayed</a></div>

</div>

</div>

</div>

<!--end category posts container -->

Now create a css file named home1.css and paste the below code in it. I have explained some important things in the comments among css code.

/*psd to html converted home page block */
/*top title link cover boxes */
.Rectangle_1 {
border-width: 4.167px;
border-color: rgb(181, 181, 181);
border-style: solid;
width: 96%;
margin:2% 2% 0 2%;
height: 101.666px;
position:relative;
}
.Rectangle_2 {
border-width: 4.167px;
border-color: rgb(181, 181, 181);
border-style: solid;
background-color: rgb(181, 181, 181);
width: 30%;
height: 101.666px;
margin-top:-4.167px;
}
/*text style for title link */
.top_title {
font-size: 2.3em;
font-family: "Arial";
font-weight: bold;
text-align: center;
-moz-transform: matrix( 0.7,0,0,0.80229411095443,0,0);
-webkit-transform: matrix( 0.7,0,0,0.80229411095443,0,0);
-ms-transform: matrix( 0.7,0,0,0.80229411095443,0,0);
height: 46px;
position:absolute;
right:2%;
left:150px;
}
.top_title a {
color: rgb(25, 31, 153);
text-decoration:none;
}
/*image background of title*/
/*image path should be set according to your theme css and image folder */
.Rectangle_6_png {
background-color: rgba(201, 195, 195, 0.82);
width: 450px;
height: 102px;
margin:90px 0 0 -4.167px;
background-image: url("img/home-page-title_03.png");
}
/*Posts container area */
.posts_container{
width:96%;
margin:0 auto;
max-width:1024px;
}
.ul_post_wrapper{
margin:50px 5% 2% 0;
width:250px;
float:left;
}
/*image container area */
.ul_pic_container {
border-width: 4.167px;
border-color: rgb(199, 196, 191);
border-style: solid;
width: 100%;
height: 155.666px;
margin:0 0 20px 0;
/*box-sizing to draw border inside instead of outside of div */
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
/*width is 100% for below 3 classes as they should change according to 'ul_post_wrapper' class*/
.ul_pic_container img {
width:100%;
height:100%;
}
/*post title box */
.Rectangle_3 {
background-color: rgb(176, 202, 233);
width: 100%;
height: 67.666px;
margin-top:-5px;
}
/*post title box top edge image design */
/*image path should be set according to your theme css and image folder */
.Rectangle_3_png {
background-image: url("img/Rectangle3.png");
width: 100%;
height: 74px;
background-repeat: no-repeat;
background-size: 100% 100%;
}
/*text style for category */
.cat_title {
font-size: 48px;
font-family: "Arial";
color: rgb(158, 109, 65);
font-weight: bold;
line-height: 2.2em;
text-align: center;
-moz-transform: scale(0.7, 1);
-webkit-transform: scale(0.7, 1);
-ms-transform: scale(0.7, 1);
height: 46px;
}
/*text style for post title */
.post_title {
font-size: 20px;
font-family: "Arial";
font-weight: bold;
line-height: 1.2;
text-align: center;
-moz-transform: scale(0.7, 1);
-webkit-transform: scale(0.7, 1);
-ms-transform: scale(0.7, 1);
height: 43px;
}
.post_title a {
text-decoration:none;
color: rgb(51, 102, 153);
}

[u_addbutton title1=’View HTML Demo’ link1=’http://preview.ulookwebdesign.com/home1/’]


[u_addbutton title1=’Download Sample HTML Code’ link1=’https://ulookwebdesign.com/product/sample-html-source-code-category-view-including-psd/’]

WordPress Implementation via short Code

To implement above html template on wordpress home page. We will implement it with the use of short code on home page. Our shortcode will get input for title_link and categories names and show latest three posts against each category keeping the above html format. We have to do following steps.

    1. The above css with little modification is give below for implementing in WordPress. You have to write this style code into your theme css file. Most often, it is located in main theme folder with namestyle.css Also correct the image path in css according to your theme image folder
/*psd to html converted home page block */
/*top title link cover boxes */
.Rectangle_1 {
border-width: 4.167px;
border-color: rgb(181, 181, 181);
border-style: solid;
width: 96%;
margin:2% 2% 0 2%;
height: 101.666px;
clear:both;
position:relative;
}
.Rectangle_2 {
border-width: 4.167px;
border-color: rgb(181, 181, 181);
border-style: solid;
background-color: rgb(181, 181, 181);
width: 30%;
height: 101.666px;
margin-top:-4.167px;
}
/*text style for title link */
.top_title {
font-size: 2.3em;
font-family: "Arial";
font-weight: bold;
text-align: center;
-moz-transform: matrix( 0.7,0,0,0.80229411095443,0,0);
-webkit-transform: matrix( 0.7,0,0,0.80229411095443,0,0);
-ms-transform: matrix( 0.7,0,0,0.80229411095443,0,0);
height: 46px;
position:absolute;
right:2%;
left:150px;
}
.top_title a {
color: rgb(25, 31, 153);
text-decoration:none;
}
/*image background of title*/
/*image path should be set according to your theme css and image folder */
.Rectangle_6_png {
clear:both;
display:block;
background-color: rgba(201, 195, 195, 0.82);
width:450px;
height:102px;
margin:90px 0 0 -4.167px;
background:url("../images/home-page-title_03.png") no-repeat ;
}
/*Posts container area */
.posts_container{
width:96%;
max-width:1024px;
margin:0 2% 450px 2%;
}
.ul_post_wrapper{
margin:50px 5% 2% 0;
width:250px;
float:left;
}
/*image container area */
.ul_pic_container {
border-width: 4.167px;
border-color: rgb(199, 196, 191);
border-style: solid;
width: 100%;
height: 155.666px;
margin:0 0 20px 0;
/*box-sizing to draw border inside instead of outside of div */
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
/*width is 100% for below 3 classes as they should change according to 'ul_post_wrapper' class*/
.ul_pic_container img {
width:100%;
height:100%;
}
/*post title box */
.Rectangle_3 {
background-color: rgb(176, 202, 233);
width: 100%;
height: 67.666px;
margin-top:-5px;
}
/*post title box top edge image design */
/*image path should be set according to your theme css and image folder */
.Rectangle_3_png {
background-image: url("../images/Rectangle3.png");
width: 100%;
height: 74px;
background-repeat: no-repeat;
background-size: 100% 100%;
}
/*text style for category */
.uh_cat_title {
font-size: 48px;
font-family: "Arial";
font-weight: bold;
-moz-transform: scale(0.7, 1);
-webkit-transform: scale(0.7, 1);
-ms-transform: scale(0.7, 1);
height: 46px;
min-width:633px;
}
.uh_cat_title a {
color: rgb(158, 109, 65);
}
/*text style for post title */
.post_title {
font-size: 1.3em;
font-family: "Arial";
font-weight: bold;
line-height: 1.2;
text-align: center;
-moz-transform: scale(0.7, 1);
-webkit-transform: scale(0.7, 1);
-ms-transform: scale(0.7, 1);
height: 43px;
}
.post_title a {
text-decoration:none;
color: rgb(51, 102, 153);
}
  1. Add following code into your themes’s functions file named function.php
//function for Home Categories shortcode
function uhstar_home_categories($hvalues = array()) {
//set default values for input shortcode
$uh_args=(shortcode_atts(array(
'title_link' =&gt; '#',
'cat_slug' =&gt; 'default',
'title_text'=&gt;'default'
), $hvalues));
//assign values from shortcode input
$h_title_link = esc_attr( $uh_args['title_link'] );
$h_cat = esc_attr( $uh_args['cat_slug'] );
$h_title_text = esc_attr( $uh_args['title_text'] );
//start buffering
ob_start();
//check if title link is given value in shortcode
if($h_title_text!='default'){
?&gt;
<!-- title link --></pre>
<div class="Rectangle_1">
<div class="top_title"></div>
<div class="Rectangle_2"></div>
</div>
<pre><!--?php } if($h_cat!='default'){ //Get category name from slug $catObject = get_category_by_slug($h_cat); $categName = $catObject-&gt;name;&lt;br ?--> //Get Category ID from category name
$categ_id = get_cat_ID( $categName);
//Finally Get URL Link from cat ID
$categ_link = get_category_link($categ_id);
?&gt;
<!-- main posts area contianer for a category -->
<!-- Give title and link to category --></pre>
<div class="posts_container">
<div class="Rectangle_6_png">
<div class="uh_cat_title"></div>
</div>
<!-- set query for getting posts by category slug --> <!--?php $the_query = new WP_Query( array( 'category_name' =&gt; $h_cat,&lt;br ?--> 'posts_per_page' =&gt; 3 )); if ( $the_query->have_posts() ) { //check query is not empty ?&gt; <!--?php // The Loop while ( $the_query-&gt;have_posts() ) {&lt;br ?--> $the_query-&gt;the_post(); ?&gt; <!--posts place holder -->
<div class="ul_post_wrapper">
<div class="ul_pic_container"><!--?php &lt;br ?--> $image_feature1 = wp_get_attachment_image_src(get_post_thumbnail_id(), 'archive-500x300'); $image_alt1 = get_post_meta(get_post_thumbnail_id(), '_wp_attachment_image_alt', true); echo '<img src="'.$image_feature1[0].'" alt="'.$image_alt1.'">'; ?&gt;</div>
<div class="Rectangle_3_png"></div>
<div class="Rectangle_3">
<div class="post_title"></div>
</div>
</div>
</div>
&lt;pre&gt;&lt;!--end category posts container --&gt;
&lt;!--?php } //end if&amp;lt;br ?--&gt; //clear buffering and show result
return ob_get_clean();
wp_reset_postdata();
}
// register shortcode to use in posts and pages
add_shortcode('ushowcat', 'uhstar_home_categories');

Now you can use following shortcode on your home / front page to show the title link and 3 most recent posts from the category for which you have given the category slug.

[ushowcat title_text='Title1' title_link='http://www.example.com' cat_slug='Blogging'][/ushowcat]
[ushowcat cat_slug="web-design-n-code"][/ushowcat]

In the above example the shortcode is use twice in two variation. One contain the title text and title link while second use only category slug. the code will produce following result as give below:

homepage-psd-converted