Best WordPress PluginsBlog

How to Add a Full Screen Search Overlay in WordPress

Just lately, certainly one of our readers requested if we might write a tutorial on the best way to add a full display screen search overlay in WordPress. You’ve most likely seen this on standard websites like Wired. When a consumer clicks on the search icon, the search field opens up and covers the entire display screen which may enhance consumer expertise on cell gadgets. On this article, we’ll present you the best way to add a full display screen search overlay in WordPress.

Adding a full screen search in WordPress

The complete display screen search is slowly changing into a development as a result of it drastically improves the search expertise for cell customers. Since cell screens are very small, by providing a full display screen overlay, you make it straightforward for customers to kind and search in your web site.

Once we first received this tutorial request, we knew it might require some code. Our aim at WPBeginner is to make issues so simple as attainable.

As soon as we had completed writing the tutorial, we realized that it was too difficult of a course of, and it ought to somewhat be wrapped right into a easy plugin.

To make it straightforward, we’ve got created a video tutorial on the best way to add a full display screen search overlay that you may watch beneath.

Subscribe to WPBeginner

Nonetheless in the event you simply need to observe text-instructions, then you possibly can observe our step-by-step tutorial on the best way to the best way to add a fullscreen search overlay in WordPress.

Including Full Display Search Overlay in WordPress

Very first thing it’s good to do is set up and activate the WordPress Full Display Search Overlay plugin. For extra particulars, see our step-by-step information on the best way to set up a WordPress plugin.

WordPress Full Display Overlay Search plugin works out of the field, and there are not any settings so that you can configure.

You’ll be able to merely go to your web site and click on on the search field to see the plugin in motion.

Full screen search

Please observe, that the plugin works with the default WordPress search function. It additionally works nice with SearchWP, which is a premium plugin that drastically improves the default WordPress search.

Sadly, this plugin doesn’t work with Google Customized Search.

Customizing Full Display Search Overlay

The WordPress Full Display Search Overlay plugin comes with its personal stylesheet. So as to change the looks of the search overlay, you’ll have to edit the plugin’s CSS file or use !essential in CSS.

First you’ll need to connect with your web site utilizing an FTP shopper. If you’re new to utilizing FTP, then check out our information on the best way to add recordsdata to WordPress utilizing FTP.

As soon as you might be linked, it’s good to find the plugin’s CSS folder. You’ll find it beneath the next path:

yourwebsite.com/wp-content/plugins/full-screen-search-overlay/belongings/css/

You’ll find a file full-screen-search.css inside css folder. You might want to obtain this file to your laptop.

Open the file, you simply downloaded in a plain textual content editor like Notepad. You may make any modifications to this file. For instance, we wished to vary the background and font coloration to match our demo web site.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
/**
* Reset
* - Prevents Themes and different Plugins from making use of their very own types to our full display screen search
*/
#full-screen-search,
#full-screen-search button,
#full-screen-search button.shut,
#full-screen-search kind,
#full-screen-search kind div,
#full-screen-search kind div enter,
#full-screen-search kind div enter.search {
    font-family: Arial, sans-serif;
    background:none;
    border:0 none;
    border-radius:0;
    -webkit-border-radius:0;
    -moz-border-radius:0;
    float:none;
    font-size:100%;
    peak:auto;
    letter-spacing:regular;
    list-style:none;
    define:none;
    place:static;
    text-decoration:none;
    text-indent:0;
    text-shadow:none;
    text-transform:none;
    width:auto;
    visibility:seen;
    overflow:seen;
    margin:0;
    padding:0;
    line-height:1;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    -ms-box-shadow:none;
    -o-box-shadow:none;
    box-shadow:none;
    -webkit-appearance:none;
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none;
}
/**
* Background
*/
#full-screen-search {
    visibility: hidden;
    opacity: 0;
    z-index: 999998;
    prime: 0;
    left: 0;
    width: 100%;
    peak: 100%;
    background: #1bc69e;
    /**
    * Add some CSS3 transitions for displaying the Full Display Search
    */
    transition: opacity 0.5s linear;
}
/**
* Show Full Display Search when Open
*/
#full-screen-search.open {
    /**
    * As a result of we're utilizing visibility and opacity for CSS transition assist,
    * we outline place: mounted; right here in order that the Full Display Search would not block
    * the underlying HTML parts when not open
    */
    place: mounted;
    visibility: seen;
    opacity: 1;
}
/**
* Search Kind
*/
#full-screen-search kind {
    place: relative;
    width: 100%;
    peak: 100%;
}
/**
* Shut Button
*/
#full-screen-search button.shut {
    place: absolute;
    z-index: 999999;
    prime: 20px;
    proper: 20px;
    font-size: 30px;
    font-weight: 300;
    coloration: #999;
    cursor: pointer;
}
/**
* Search Kind Div
*/
#full-screen-search kind div {
    place: absolute;
    width: 50%;
    peak: 100px;
    prime: 50%;
    left: 50%;
    margin: -50px 0 0 -25%;
}
/**
* Search Kind Enter Placeholder Shade
*/
#full-screen-search kind div enter::-webkit-input-placeholder {
    font-family: Arial, sans-serif;
    coloration: #ccc;
}
#full-screen-search kind div enter:-moz-placeholder {
    font-family: Arial, sans-serif;
    coloration: #ccc;
}
#full-screen-search kind div enter::-moz-placeholder {
    font-family: Arial, sans-serif;
    coloration: #ccc;
}
#full-screen-search kind div enter:-ms-input-placeholder {
    font-family: Arial, sans-serif;
    coloration: #ccc;
}
/**
* Search Kind Enter
*/
#full-screen-search kind div enter {
    width: 100%;
    peak: 100px;
    background: #eee;
    padding: 20px;
    font-size: 40px;
    line-height: 60px;
    /* Now we have added our personal font coloration right here */
    coloration:#50B0A6;
}

On this code, we’ve got solely modified background coloration at line 62, and added font coloration at line 150. If you’re good with CSS, then be at liberty to vary different type guidelines as nicely.

As soon as you might be accomplished, you possibly can add this file again to plugin’s CSS folder utilizing FTP. Now you can see your modifications by visiting your web site.

A WordPress site with Full screen search overlay

Essential Word:

If you’re utilizing this in your individual theme, then it’s higher to make use of !essential tags so the plugin updates wouldn’t override any modifications.

For builders and consultants, you can too simply rename the plugin and bundle it as a part of your theme or providers.

We solely created this plugin as a result of all different methods of scripting this tutorial would’ve been too difficult for newbie customers.

We hope this text helped you add full display screen search overlay to your WordPress web site. You might also need to see our information on the best way to add a search toggle impact in WordPress

Download The WPSaviour App Now

Related posts
Best WordPress PluginsBlog

How to Add a Full Screen Background Image in WordPress

Leave a Reply

Your email address will not be published.

Pay in your preferred currency
Indian rupee
Euro