// Jason's Plugins For Carrd

Search Plugin

A search bar plugin to search anything on your Carrd site. Try searching for "carrd". Tutorial here →

Ut euismod

Metus augue

Sem astrum tortor consequat porta. Ornare arcu odio ut sem nulla pharetra. Quam elementum pulvinar etiam quam lacus civitas integer vitae justo eget magna fermentum iaculis deliciae carrd feugiat.Aliquam maecenas ultricies mi eget mauris lobortis scelerisque fermentum dui faucibus. Luctus venenatis magna fringilla urna porttitor rhoncus. Elementum integer enim neque volutpat.

Carrd

Eget mauris pharetra ultrices neque. Porttitor leo a diam sollicitudin tempor. A consequat semper viverra nam libero. Proin fermentum leo vel orci porta pulvinar neque laoreet.

Cras eget

Ipsum Carrd luctus

Senectus et netus fames ac turpis egestas maecenas. Imperdiet sit nulla morbi tempus iaculis. Potenti nullam tortor vitae purus faucibus ornare. Morbi quis commodo odio aenean sed donec consectetur erat morbi quis commodo meliora carrd.

Set up

Tutorial

Here’s the tutorial on how to customize your search plugin:How to Customize the Search Bar StylingThis tutorial shows which parts of the code to edit if you want to customize the search bar, search results dropdown, and text highlight colors.You only need to edit the CSS inside the <style> section.---1. Change the text highlight color on the web pageLook for this part:mark {
background: #ffd54f;
color: black;
padding: 0 2px;
border-radius: 2px;
}
To change the highlight background color, edit this line:background: #ffd54f;
For example, change it to:background: #00ffcc;
To change the highlighted text color, edit this line:color: black;
For example:color: white;
---2. Change the search bar background colorLook for this part:#searchInput {
width: 100%;
padding: 15px 45px 15px 20px;
border: 2px solid #666;
border-radius: 50px;
font-size: 16px;
outline: none;
}
Add or edit this line inside #searchInput:background: white;
For example:background: #f5f5f5;
---3. Change the search bar font and font colorIn the same #searchInput section, add or edit these lines:font-family: Arial, sans-serif;
color: black;
For example:font-family: Georgia, serif;
color: #333333;
The font-family changes the font used inside the search bar.The color changes the color of the text typed into the search bar.---4. Change the search results dropdown background colorLook for this part:#resultsList {
position: absolute;
width: 100%;
background: white;
border-radius: 10px;
margin-top: 10px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
max-height: 250px;
overflow-y: auto;
display: none;
}
To change the dropdown background color, edit this line:background: white;
For example:background: #111111;
---5. Change the search results dropdown font and text colorLook for this part:.result-item {
padding: 15px 20px;
border-bottom: 1px solid #eee;
cursor: pointer;
}
Add or edit these lines inside .result-item:font-family: Arial, sans-serif;
color: black;
For example:font-family: Georgia, serif;
color: white;
This changes the main text inside each search result.---6. Change the “Found in section” label colorLook for this part:.result-item strong {
display: block;
font-size: 12px;
color: #3498db;
text-transform: uppercase;
}
To change the label color, edit this line:color: #3498db;
For example:color: #ffcc00;
You can also change the font by adding:font-family: Arial, sans-serif;
---7. Change the search result hover background colorLook for this part:.result-item:hover {
background: #f9f9f9;
}
To change the hover background color, edit this line:background: #f9f9f9;
For example:background: #222222;
---Quick reference| To customize this part                     | Look for this CSS selector |
| ------------------------------------ | -------------------------- |
| Text highlight color                            | mark                              |
| Search bar background                    | #searchInput               |
| Search bar font and text color          | #searchInput               |
| Dropdown background                      | #resultsList              |
| Dropdown result font and text color | .result-item              |
| “Found in” label color                        | .result-item strong |
| Dropdown hover color                      | .result-item:hover   |