Color odd and even div alternatively with different color

I had a situation where I need to have an alternate background color for the rows inside a parent div. Sample code is shown below

<div class="content-body-notification content-body  ">
<div class="user-row">
1
</div>
<div class="user-row">
2
</div>
<div class="user-row">
3
</div>
<div class="user-row">
4
</div>
</div>

So now we are going to give different background color to odd and even user-row rows as shown below

.content-body .user-row:nth-child(odd) {
    background: #eeeff2;
}
.content-body .user-row:nth-child(even) {
    background: #f8f8fa;
}

and we get output same as diagram shown below:

Javascript Alert dialog on href-link while delete

The simplest way to show alert while deleting your record using anchor tag is

  <a href="/userProfile/{{$userinfo->id}}/del" onclick="return confirm('Are you sure?')" class="user-delete"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a>

Background image and providing padding to it

I have a select input and i want to put small image icon at the right of it with some padding on it. For this the easy solution is

My input

 <select placeholder="Filter By" class="searchuser userddl">
                    <option>Filter By</option>
                    <option>Recently Updated</option>
                    <option>Recently Deleted</option>
                </select>

And the css to give background image along with some padding is:

select.searchuser.userddl {
    background: #000 url('/images/down-arrow.png');
    background-position: right 7px top 6px;
    background-repeat: no-repeat;
}

And the output appears as

Implement Font Awesome icon inside submit button

If you want to place font awesome icon inside a submit button, first of all you cannot use

 <input type="submit" value="Submit">

but instead, you need to use as shown below:

  <button type="submit" class="btn btn-danger">
                <i class="fa fa-search" aria-hidden="true"></i>
 </button>

List of mostly used media queries

Last time we had discussed most appropriate and easy media queries for your site.I feel those media query itself is enough to make your site responsive. But If you want more detailed media queries that fit almost all varieties of mobiles, desktops, iPads, tablets, and laptops, you can use following media queries.

/* Smartphones (portrait and landscape) */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) */
@media only screen and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) */
@media only screen and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops */
@media only screen and (min-width : 1224px) {
/* Styles */
}
/* Large screens */
@media only screen and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4. Comma can be used to apply same rules to multiple media queries. */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
/*iPhone 6 Portrait*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {
}
/*iPhone 6 landscape*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) {
}
/*iPhone 6+ Portrait*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {
}
/*iPhone 6+ landscape*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) {
}
/*iPhone 6 and iPhone 6+ portrait and landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){ 
}
/*iPhone 6 and iPhone 6+ portrait*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){
}
/*iPhone 6 and iPhone 6+ landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape){
}

Implement Google and other fonts in your site style sheet

Provided you have downloaded fonts which need to get implemented in the site, do following stuff

Method 1

1. Create a separate folder fonts parallel to your other folder,
2. if you have all the formats of font, then paste all of them inside folder,
3. if you dont have all formats, go to the font generator eg: https://www.web-font-generator.com/
4. upload any of the format you have and generate all other formats like .eot, .woff, .svg, .ttf, .otf
5. Then as told earlier, copy those files inside your fonts folder,
6. then paste below code in the style sheet. please make sure your font path is correct along with correct font name.

@font-face {
	font-family: 'Oswald-Bold';
	src: url('fonts/Oswald-Bold.eot');
	src: url('fonts/Oswald-Bold.otf');
	src: url('fonts/Oswald-Bold.woff') format('woff'), url('fonts/Oswald-Bold.ttf') format('truetype'), url('fonts/Oswald-Bold.svg') format('svg');	
}

then in your css you can use as:

.h4{
font-family:Oswald-Bold;
}

Method 2

Before taking all these tensions to implement your font, you first check if the font is available in google fonts

1. First go to google fonts if the font you require is available or not.ie : https://fonts.google.com/

2. search your required font
3. Click plus icon to add font in your list as shown below

4. then you place your link inside tag of your site header as

<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>

then use font as

.h4{
font-family:Roboto;
}

Complete Media query to make your site responsive

The code below helps your site to fit in different screen sizes. we can find various media queries when we google it, among all those codes i feel these to be the most appropriate and easy to use.

//for larger screen ie large desktops
@media only screen and (min-width: 1200px) and (max-width: 1440px) { 

}

//for medium screen 15inch laptops
@media only screen and ( min-width: 992px) and (max-width: 1024px) { 

}

//for small size laptops ie 13inch laptops
@media only screen and ( max-width: 960px ) { 

}
//for ipad and tablets
@media only screen and ( min-width: 768px ) and ( max-width: 960px ) { 

}

//for mobiles either horizontal orientation or large size mobiles
@media only screen and ( max-width: 767px ) { 

}

 //for mobiles or vertical orientation
@media only screen and ( max-width: 479px ) { 
}

How to change color of placeholder

Here is the code to change the color of placeholder for you inputs

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

How to redirect to thank you page from contact form 7 after form submission

Here is a short way to do that.

1. First create thank you page
2. Go to the contact form
3. In the additional settings add
on_sent_ok: “location = ‘/thank-you/’;”

That’s it, then you are good to go.

syntax highlighting in wordpress

To accomplish the syntax highlighting, just wrap your code in these tags:

Where Your_used_langauge can be

• actionscript3
• bash
• clojure
• coldfusion
• cpp
• csharp
• css
• delphi
• erlang
• fsharp
• diff
• groovy
• html
• javascript
• java
• javafx
• matlab (keywords only)
• objc
• perl
• php
• text
• python
• ruby
• scala
• sql
• vb
• xml