This article was last updated on the October 12, 2017.
The Search Inline element is available across all three builders. The Content Builder, the Header Builder and the Footer Builder. The purpose of the element is to display a search box anywhere you desire. Allowing your users to search for content without needing to scroll back to the top of the page.
Presets
First of all you'll see the Apply Preset option, but just what is a preset? A preset is a pre-configured option pack of sorts. When you apply the preset all the controls are automatically changed to the specified value in the presets. Right now the presets represent each different stack. Providing quick starting points for getting your elements styled perfectly to match your stack. Apply a preset and then tinker to your hearts content.
Integrity Preset
The Integrity Preset when applied to the Search elment will change the values for the element within the controls for it to closely the match the baseline style of the integrity stack. which once applied looks like this:
Renew Preset
The Renew Preset when applied to the search element will change the values for the element within the controls for it to closely the match the baseline style of the Renew stack. which once applied looks like this:
Icon Preset
The Icon Preset when applied to the search element will change the values for the element within the controls for it to closely the match the baseline style of the Icon stack. which once applied looks like this:
Ethos Preset
The Ethos Preset when applied to the search element will change the values for the element within the controls for it to closely the match the baseline style of the Ethos stack. which once applied looks like this:
Controls
All elements come with a range of different controls and the searchelement is no different. While many of the controls are self explanatory in what they effect, we'll cover the basics and any major points you need to be aware about in each article. Every article will also cover the basics such as Flexbox, Interactions and more!
Flexbox
Just what is Flexbox and what makes it so flexible? Flexbox is a layout mode intended to accomodate multiple elements on a page in different configuration layouts for a variety of screen sizes. It's generally easy to work with once you get to grips with it and provides an array of configuration elements for start positions, end position and everything in between.
While Flexbox may seem daunting at first. Don't worry! There are a range of multiple tutorials online and in all our builders we have multiple configuration options that means you never have to touch a line of code! So you properly understand Flex options, we'd recommend having a ready up over here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ on how exactly Flexbox works. While you don't need to worry about the code side. It's important to have a basic grasp of how Flexbox works to make the most of the builders. Or of course there's always the trial and error approach.
Interactions
Throughout the elements you'll see options for interactions, but just what are interactions? Interactions generally means when an element is being interacted with. Such as on hover. For example on a Background Color option you'll have the Base option which is the main background color of the element. Then you'll have the Interaction option, setting this to a different color from base will display a different color on hover.
You'll also see interactions for icons where you can swap out icons on hover. Allowing you to configure different options for on hover. Making for some great effects with swapping out icons on hover.
Margins and paddings. EMs, REMs, Pixels and more!
With all the margins, paddings and other height and width based options, along with some sizing options. You'll see the option to change the actual unit value. This means you might set one control to be 2.5 EMs such as the width. But then on your margin you might set it to be 50px. The available unit options are:
Keep in mind wherever you see an option for unit values just click the current unit value like this:
Linking Sides
One thing you'll see in common across multiple controls is the ability to link sides. This means that if you link sides on the padding controls, all the padding controls will be the same value. However if you unlink the padding controls, you can then control each side independently allowing for greater control.
If you have link sides on for the respective set of controls you will not see the individual options.
Particles
Many of the elements use what's known as the "Particles Partials". But just what are Particles and how can use them? Check out our great mini video series over on this KB article.
Available Controls
Like other Elements, controls are split up into multiple sections for the Search Inline those sections are:
Clicking on a specific link will take you to those controls. First of all you'll be on the Search section. The controls available within the Search section are:
Setup
The setup controls consist of:
- Base Font Size - The font size of text
- Width - The width of the search bar. Can be changed to any required value.
- Height - The height of the search bar.
- Max Width - The maximum width of the search bar at any one time.
- Background - Offers two options one called Base base is the background color of search at all times apart from on hover. And the second option called Interaction interaction is the background color of the search on hover and when the search is interacted with.
Content
The Content controls consist of:
- Placeholder - The plaeholder text to be used in the search bar to prompt a user to search.
- Input Placement - 1st, 2nd or 3rd. Where the input placement is for the end user to enter their text
- Submit Placement - 1st, 2nd or 3rd. Where the submit placement is for the end user to submit their search query.
- Clear Placement - 1st, 2nd or 3rd. Where the clear for the search is placed within the search bar itself.
Margin
The Margin layout controls consist of:
- Link Sides - Link sides allows you to link up every option within the margin controls so when you change one value all values change. Or you can unlink sides and set each margin option individually.
- Top - Sets the top margin.
- Right - Sets the right hand side margin.
- Bttm - Sets the bottom margin
- Left - Sets the left hand side margin.
Border
The Border controls consist of:
- Link Sides - Allows you to link up the border control for all sides or unlink sides to control each border side individually.
- Style - Sets the style of the border such as dashed, dotted etc.
- Width - Sets the width of the border in pixels by default. Or click on PX to change the value to the units you'd like to use (EM, REM)
- Color - Sets the color of the border.
Border Radius
The Border Radius controls consist of:
- Link Sides - Link all sides of the border to control all border radius options at the same time, rather than configuring each value individually. If you unlink sides. You can set the border radius controls individually.
- Top Left - Set the top left radius of the border.
- Top Right - Set the top right radius of the border.
- Bttm Right - Set the bottom right radius of the border.
- Bttm Left - Set the bottom left radius of the border.
Do note that you won't see any effect by changing the Border Radius values unless you have already set your Border controls.
Box Shadow
The Box Shadow controls consist of:
- X-Offset - Set the offset of the border shadow for the X axis.
- Y-Offset - Set the offset of the border shadow for the Y axis.
- Blur - Set the blur of the box shadow.
- Spread & Position - Set the spread and position of the box shadow.
- Color - Sets the color of the box shadow.
Input Margin
The Input Margin layout controls consist of:
- Link Sides - Link sides allows you to link up every option within the margin controls so when you change one value all values change. Or you can unlink sides and set each margin option individually.
- Top - Sets the top margin.
- Right - Sets the right hand side margin.
- Bttm - Sets the bottom margin
- Left - Sets the left hand side margin.
Input Text Format
The Input Text controls consist of:
- Font Family - A font selector for the Input Text font. Default is inherit or you can select a font that's setup within the Font Manager.
- Font Weight - The font weight for the Input Text font selected. Available weights depend on the font family selected.
- Font Size
- Letter Spacing
- Line Height
Input Text Style
The Input Text Style controls consist of:
- Font Style - Normal or Italic
- Text Align - Left, Center, Right, Justify.
- Text Decoration - Underlined or Strikethrough.
- Text Transform - Uppercase (force all text to be uppercase), Capitalize (forces the first letter in each word to be a capital), Lowecase (forces all text to be lowercase).
- Text Color - offers two options. 1: Base, sets the base color of the text. 2: Interaction. Sets the text color when interacted with (on hover) etc.
Submit Setup
The Submit Setup controls consist of:
- Font Size - The font size of the button text
- Stroke Width - The stroke of the search submit. 1 through 4, 1 makes the icon the lightest it can be, 4 makes it the boldest it can be.
- Width & Height - The width and height of the submit button.
- Color - Offers two options one called Base base is the color of the search button at all times apart from on hover. And the second option called Interaction interaction is the color of the search button on hover and when the search button is interacted with.
- Background - Offers two options one called Base base is the background color of the button at all times apart from on hover. And the second option called Interaction interaction is the background color of the button on hover and when the button is interacted with.
Submit Margin
The Submit Margin layout controls consist of:
- Link Sides - Link sides allows you to link up every option within the margin controls so when you change one value all values change. Or you can unlink sides and set each margin option individually.
- Top - Sets the top margin.
- Right - Sets the right hand side margin.
- Bttm - Sets the bottom margin
- Left - Sets the left hand side margin.
Submit Border
The Submit Border controls consist of:
- Link Sides - Allows you to link up the border control for all sides or unlink sides to control each border side individually.
- Style - Sets the style of the border such as dashed, dotted etc.
- Width - Sets the width of the border in pixels by default. Or click on PX to change the value to the units you'd like to use (EM, REM)
- Color - Sets the color of the border.
Submit Border Radius
The Submit Border Radius controls consist of:
- Link Sides - Link all sides of the border to control all border radius options at the same time, rather than configuring each value individually. If you unlink sides. You can set the border radius controls individually.
- Top Left - Set the top left radius of the border.
- Top Right - Set the top right radius of the border.
- Bttm Right - Set the bottom right radius of the border.
- Bttm Left - Set the bottom left radius of the border.
Do note that you won't see any effect by changing the Border Radius values unless you have already set your Border controls.
Submit Box Shadow
The Submit Box Shadow controls consist of:
- X-Offset - Set the offset of the border shadow for the X axis.
- Y-Offset - Set the offset of the border shadow for the Y axis.
- Blur - Set the blur of the box shadow.
- Spread & Position - Set the spread and position of the box shadow.
- Color - Sets the color of the box shadow.
Clear Setup
The Clear Setup controls consist of:
- Font Size - The font size of the clear
- Stroke Width - The stroke of the clear. 1 through 4, 1 makes the icon the lightest it can be, 4 makes it the boldest it can be.
- Width & Height - The width and height of the clear.
- Color - Offers two options one called Base base is the color of the clear at all times apart from on hover. And the second option called Interaction interaction is the color of the clear on hover and when the clear is interacted with.
- Background - Offers two options one called Base base is the background color of the clear at all times apart from on hover. And the second option called Interaction interaction is the background color of the clear on hover and when the clear is interacted with.
Clear Margin
The Clear Margin layout controls consist of:
- Link Sides - Link sides allows you to link up every option within the margin controls so when you change one value all values change. Or you can unlink sides and set each margin option individually.
- Top - Sets the top margin.
- Right - Sets the right hand side margin.
- Bttm - Sets the bottom margin
- Left - Sets the left hand side margin.
Clear Border
The Submit Border controls consist of:
- Link Sides - Allows you to link up the border control for all sides or unlink sides to control each border side individually.
- Style - Sets the style of the border such as dashed, dotted etc.
- Width - Sets the width of the border in pixels by default. Or click on PX to change the value to the units you'd like to use (EM, REM)
- Color - Sets the color of the border.
Clear Border Radius
The Submit Border Radius controls consist of:
- Link Sides - Link all sides of the border to control all border radius options at the same time, rather than configuring each value individually. If you unlink sides. You can set the border radius controls individually.
- Top Left - Set the top left radius of the border.
- Top Right - Set the top right radius of the border.
- Bttm Right - Set the bottom right radius of the border.
- Bttm Left - Set the bottom left radius of the border.
Do note that you won't see any effect by changing the Border Radius values unless you have already set your Border controls.
Clear Box Shadow
The Submit Box Shadow controls consist of:
- X-Offset - Set the offset of the border shadow for the X axis.
- Y-Offset - Set the offset of the border shadow for the Y axis.
- Blur - Set the blur of the box shadow.
- Spread & Position - Set the spread and position of the box shadow.
- Color - Sets the color of the box shadow.
Lastly are the available controls within the Customize section. If you click on Customize You should see the available controls like this:
The available controls within the Customize section are:
Setup
The Setup controls consist of:
- ID - A custom ID you want to assign for use with custom CSS.
- Class - A custom class you want to assign for use with custom CSS.
- Hide During Breakpoints - Select different screen sizes you want to disable the output of the specific element on. Perfect for creating custom responsive headers.
