CSS Class?

This topic contains 3 replies, has 2 voices, and was last updated by Ernest Marcinko Ernest Marcinko 4 years, 9 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #14992
    earlsmith
    earlsmith
    Participant

    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

    #14993
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

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


    #14994
    earlsmith
    earlsmith
    Participant

    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

    #15003
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

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


Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.