Archive | WebMasters RSS feed for this section

How to Stretch Background Image in CSS

21 July 2013

0 Comments

Sometimes, we set the background image but the background image doesn’t fit in the box. We need to stretch the background image. In CSS, the size of the background image is controlled by property “background-size”.

To stretch a background image in CSS, add the following code in the style of the box or body:

background-size: cover;

I hope this will work for you.

If It Doesn’t Work:

If there is no any change by adding this code, try using below code instead of above:

background-size: cover !important;

If It Doesn’t Look Better:

If the above codes make a background image ugly, try using one of the following codes:

background-size: 100%;
background-size: contain;

(You can add “!important” property if needed).

Continue reading...

How to Change Order of Comments in WordPress

24 June 2013

0 Comments

The comments made on a post or page of a WordPress blog are stored in database and shown in a order with respect to their dates. By default, the comments are shown in an order such that the most recent comments are at the top.

If you want to change the order or want to show the older comments at top, then follow the below procedure.

Step 1:

Login to your WordPress dashboard. Go to

Setting >> Discussion.

Comments Order Change

Step 2:

Now select the “newer” / “older” comments at the top as shown in the picture.

How to change comments order

Then save the changes and your comments will be shown according to the order you selected.

Continue reading...

How to Make Image Large on Mouseover

19 June 2013

0 Comments

Enlarge Image with CSS3

You might have seen somewhere that when you bring your mouse pointer on the image, it becomes large. It is a good technique to focus on it. This is made with the help of CSS3. Mouseover event is applied by using “:hover” which makes an image to be large on mouseover. Below is the code and example.

HTML:

<img scr=”image_url” width=”128″ height=”128″>

 

CSS:

img {
transition: transform 1s;
-webkit-transition: transform 1s;
}
img:hover {
transform:scale(1.5,1.5);
-webkit-transform:scale(1.5,1.5);
}

 

Example:

Mouseover Me
Continue reading...

How to Make Circle in CSS

16 June 2013

0 Comments

If you want to make a round box (a div element) like a circle in your website or page, you can do this with CSS “border-radius” property.

How to Create Round Box Using CSS:

You can draw a circle by using the following CSS code.

#element {

/*Setting Width and Height*/
width: 100px;
height: 100px;

/*Making Box Round*/
border-radius: 100px;

/*Border-Radius should must be equal to width and height*/

}

Example CSS Circle:

This Is A Round Box
Continue reading...

How to Make Font Bold in CSS

12 June 2013

2 Comments

Making some words bold in a large article is very nice to make article attractive and easily readable or to make the word prominent in the article. If you want to make font bold using CSS, see the below code.

How to Make Font Bold in CSS:

Insert the following code in the style of the element you want to make bold.

 

font-weight: bold;

 

The element will become bold.

Enjoy…!

Continue reading...

How to Change Text Color Smoothly on Mouseover

27 May 2013

1 Comment

Text Color Change Animation

If you want to make text color changing animation (change color smoothly) in your website. You can do this with CSS3 (latest version of CSS). There is a transition property that let us create animations for changing style on mouseover etc.

How to Create Text Color Changing Animation:

For changing color of any element on mouseover (:hover), below is the CSS code.

#element {
color:red; /*Initial Color*/
transition: color 1s;
-webkit-transition: color 1s;
}

#element:hover {
color:blue; /*Final Color*/
}

 

Result:

The above code will result as the following text

This is an Example Text

If you take mouse over this text, color of this text will smoothly change from red to blue.

Continue reading...

How to Show Static Page on Home in WordPress

26 May 2013

0 Comments

WordPress is the best and most used blogging platform. It provides all types of important features. If you want to show a static page on home page in your WordPress blog, follow the below procedure.

Showing Static Page on Home Page:

Step 1: Login to your WordPress administration panel.

Step 2: From Dashboard, Go to

Setting >> Reading.

Show Static Page WordPress

Step 3: Select front page display as “A Static Page

and then select a page from the pages of your WordPress. See the picture below.

Showing Static Page on Home

Step 4: Then click the “Save Setting” button located at the bottom.

 

Enjoy…!

Continue reading...

How to Change Date and Time Format in WordPress

23 May 2013

0 Comments

Different people use different format for writing date and time. WordPress gives option for blog administrators to set their date and time format. If you want to change your date and time format of your WordPress blog, follow the procedure given below.

Change Date & Time Format in WordPress:

Step 1: Login to your WordPress administration panel.

Step 2: From the left sidebar, go to
Setting >> General.

Change Date Time Format

 

Step 3: Set the desired date and time format as shown in figure.

How to Set WordPress Date and Time Format

Continue reading...

How to Remove Underline from Link

21 May 2013

0 Comments

A link is underlined by default to identify that it’s a hyperlink. But, if you want to remove underline and make it look like a simple word, you should see the following code.

HTML:

<a href=”{your link url here}” id=”link”>Sample Text</a>

 

CSS:

#link {
text-decoration: none;
}

 

If the above CSS code doesn’t work the add the following CSS code:

#link {
text-decoration: none !important;
}

 

Then the underline will be removed from the link.

Continue reading...

How to Change Time Zone in WordPress

14 May 2013

0 Comments

We know that each region has its own time zone. When you install WordPress, the default timezone is selected. If you want to change your time zone in WordPress and to set time according to your region, you can do this with the help of 3 simple steps described below.

How to Change Timezone (WordPress):

Step 1: Login to your WordPress administration panel.
On the dashboard, Select Setting >> General from left sidebar.

Change Time Zone of WordPress


 

Step 2: In the general setting, you will find “Timezone”. Select your city from the list in front of “Timezone”. See the picture below.

 

Select Time Zone City in WordPress


 

Step 3: Now, after selecting your city, click on “Save Changes” button present at the bottom.

How to Change Timezone in WordPress


 

Hope that this article will help you.
Please give a positive feedback in comment box below.

Continue reading...