CSS Class?

[earlsmithParticipant]

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

[Ernest MarcinkoKeymaster]

Hi Earl,

The CSS class of that button is ‘asp_text_button’, so you can create a rule as example:

div.asp_text_button {
    /* Your rules here.. */
}

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:

div.asp_text_button {
    font-size: 22px !important;
}

The !important keyword can be used in every rule. I hope this helps!

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[earlsmithParticipant]

Hi 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

[Ernest MarcinkoKeymaster]

Hi 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:

div.asp_text_button {
    font-family: magallanes-regular !important;
    color: #ffffff !important;
    vertical-align: middle;
    line-height: 30px !important;
    font-size: 20px !important;
}

..also, the input and the autocomplete font-size fix:

input.orig, input.autocomplete {
    font-size: 12px !important;
}

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.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts