- This topic has 17 replies, 2 voices, and was last updated 7 years, 7 months ago by
.
-
Posts
-
Hey,
Firstly thanks for a great plugin.
I have two questions.
1)can i add a serach button next to the settings boxes
2)how can i change the live results to be 100% of the content as right now it just stays the size of the search input
as this is the css i changed to make go to 924px but wont this effect the way it looks on mobile?
.horizontal, .wpdreams_asp_sc-1 .asp_an_fadeInDrop{width:924px !important;}this is the url:https://holidayxentral.com/test-home/
Hi,
Thank you for your kind words!
1. This will help you with that
2. I suggest trying the results shortcode. It will make a ‘block’ wherever you place it, each search instance has one results shortcode generated. This container will always follow the width of the parent container, in this case, that should be the page width.Hey
one last thing the arrows in the drop downs how can i change the background color i can find the class and the editor dont have a option to customize the color background of the arround box in the dropdown feildHi!
Can you please be a bit more specific which part? You can send a screenshot if you want, I will try to construct a custom CSS if possible.
You see in the serach settings the drop down arrows that point down that are in grey i need to change that background color
see the attachmentHi,
I get it now, thank you. Unfortunately that is handled by the browser, and in most cases it cannot be changed. Chrome allows some changes, in Firefox you can only hide it:
[html].asp_select_label select {
-moz-appearance: none;
}[/html]Hopefully browsers will support changes to form elements in the future, that would be really nice.
Hi,
No, because the arrow is not an input type, but part of the ‘select’ form element, which cannot be targeted via CSS.
On my pervious serach form it has been targeted by css go to holidayxentral.com and have alook at my serach there you will see the arrow is a select feild and it has a back ground attached to them.
are you 100% sure we cant change itThat could actually work. It will still hide the select arrow, but then add an ‘icon’ after the select box as an arrow replacement. It is a very clever solution. Don’t forget to include the icon set, if there was any used, that contains the [code]’\f078′[/code] character.
i will pull font awesome in on the page as a seprate.
you can use the code in your knowledge base if you want to:)HEy,
I have found a better solution for this when done with the css adjustments i will share it with you[code]select::-ms-expand {
display: none;
}.asp_select_label:after {
content: ‘>’;
font: 28px "Consolas", monospace;
color: #999;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
right: 14px;
/*Adjust for position however you want*/top: 5px;
padding: 0 0 2px;
border-bottom: none;
/*left line */position: absolute;
pointer-events: none;
}.asp_select_label select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Add some styling */display: block;
width: 100%;
max-width: 320px;
height: 50px;
float: right;
margin: 5px 0px;
padding: 0px 24px;
font-size: 16px;
line-height: 1.75;
color: #333;
background-color: #ffffff;
background-image: none;
border: 1px solid #cccccc;
-ms-word-break: normal;
word-break: normal;
}[/code]This will change the arround on the select drop downs you can adjust the colors and the font and site.
it is easier to use a symbol over font awesome
- You must be logged in to reply to this topic.