- This topic has 3 replies, 2 voices, and was last updated 6 years, 11 months ago by Ernest Marcinko.
-
AuthorPosts
-
October 4, 2017 at 11:39 am #14992earlsmithParticipant
Hoya- all I need to do is find out how to change the font of the “Find” on my welcome page. I cannot seem to find a way of doing it-If it is just a CSS change, then I need to know what the Class of the item is-Please advise.
Many thanks-Earl
October 4, 2017 at 11:51 am #14993Ernest MarcinkoKeymasterHi Earl,
The CSS class of that button is ‘asp_text_button’, so you can create a rule as example:
[html]div.asp_text_button {
/* Your rules here.. */
}[/html]However I see that there are inline style properties on every search element added, perhaps the slider is making that change, which will make it a bit harder to override those rules – as inline styles have higher specificity as class styles.
To resolve that, you might have to use the css rules with the !important modifier, like for example if you want to force a different font-size, then:
[html]div.asp_text_button {
font-size: 22px !important;
}[/html]The !important keyword can be used in every rule. I hope this helps!
October 4, 2017 at 12:11 pm #14994earlsmithParticipantHi Ernest-Thank you so much for your speedy reply-AMAZING!
However, the css has worked perfectly for the size, so I know the class is working (and it needs the “!important” bit), but its not working for the font.
I have added-
div.asp_text_button {
font-size:20px !important;
font:magallanes-regular !important;
}(I also tried “font-family” without success), plus I should also ask for the class for the text inside the search field itself ( “I want…”)
Kind regards, Earl
October 5, 2017 at 9:29 am #15003Ernest MarcinkoKeymasterHi Earl,
It’s because the ‘font’ rule actually overrides both the font-family and the font-size, so they have to be separated. This is what seems to be working for me the best:
[html]div.asp_text_button {
font-family: magallanes-regular !important;
color: #ffffff !important;
vertical-align: middle;
line-height: 30px !important;
font-size: 20px !important;
}[/html]..also, the input and the autocomplete font-size fix:
[html]input.orig, input.autocomplete {
font-size: 12px !important;
}[/html]I noticed that as the page size decreases the slider decreases the font-size of each containing element, I guess that is some sort of zoom effect. However these rules should prevent that.
-
AuthorPosts
- You must be logged in to reply to this topic.