SHADOW ON SEARCH AND BUTTONS

[kjcarleo]

Hey GUYS!!! I love the new look of the site. I noticed three are a SHADOW EFFECT around the search bar and the buttons. How can I get it this way on my site?

 

Keivn

[Radu]

There is no official in Kleo but this is the property that you can apply to any element you want that effect

COPY CODE

button {box-shadow: 0px 12px 42px 12px rgba(0,0,0,0.08);}

Do it yourself for elements that you need

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[kjcarleo]

What about for search bars? Same code?

[Radu]

For the searchbar this ::

.kleo-search-form #searchform .input-lg {box-shadow: 0px 12px 42px 12px rgba(0,0,0,0.08);}

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[kjcarleo]

Would I put it in Quick CSS or for each individual page? I would like it for all pages

[kjcarleo]

How can I decrease the spread of the shadow? I want it like half of what it is

[Radu]

Quick CSS it applies sitewide, you can decrease those box-shadow: 0px 12px 42px 12px values for a lower shadow, try with 42px value first

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[kjcarleo]

Yeah looks great – thanks.

[Radu]

No problem

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[championweb]

I am trying to replicate this also but it doesn’t work. Could you explain where to put the code for the buttons.

And also how can I do it like this example from Kleo’s home page? see attachment

Attachments:

You must be logged in to view attached files.

[Radu]

Hi @championweb

Those codes are CSS snippets and those will be paste on wp-admin -> theme options -> general settings -> quick css

COPY CODE

.kleo-search-form #searchform .input-lg {box-shadow: 0px 12px 42px 12px rgba(0,0,0,0.08);}
button {box-shadow: 0px 12px 42px 12px rgba(0,0,0,0.08);}

Those are created with featured items here it’s complete shortcode for that page : http://pastebin.com/raw/JTPic0cJ

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[championweb]

it doesn’t seem to change something. Do I have to put a code CSS in each buttons?

[Radu]

Those selectors works, make sure to empty all caches

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts