Okay
  Public Ticket #2515991
CSS
Closed

Comments

  • Dave started the conversation
    August 24, 2020 at 5:29pm

    Hello Again,

    I have tried to add some css to my child theme to influence the font weight and size but it won't affect the text on the Amelia booking page. 

    Is there a preferred way to do that for Amelia.

    I would also like to add some media queries for different break points.


    Thanks again!

    Dave Mongillo

  •  2,507
    Aleksandar replied
    August 25, 2020 at 11:02am

    Hello Dave

    Amelia is split into multiple segments, and you need to find correct selectors to change font properties.

    This CSS rule, when used on the page between <style>...</style> tags will allow you to overwrite font from our plugin.

    <style>
.amelia-app-booking input[type="text"], 
.am-modal.am-in-body input[type="text"], 
.amelia-app-booking input[type="email"], 
.am-modal.am-in-body input[type="email"], 
.amelia-app-booking input[type="tel"], 
.am-modal.am-in-body input[type="tel"], 
.amelia-app-booking input[type="url"], 
.am-modal.am-in-body input[type="url"], 
.amelia-app-booking textarea, 
.am-modal.am-in-body textarea, 
.amelia-app-booking select, 
.am-modal.am-in-body select, 
.amelia-app-booking .form-control, 
.am-modal.am-in-body .form-control, 
.amelia-app-booking .am-stripe-card, 
.am-modal.am-in-body .am-stripe-card,
.amelia-app-booking h1, 
.am-modal.am-in-body h1, 
.amelia-app-booking h2, 
.am-modal.am-in-body h2, 
.amelia-app-booking h3, 
.am-modal.am-in-body h3, 
.amelia-app-booking h4, 
.am-modal.am-in-body h4, 
.amelia-app-booking p, 
.am-modal.am-in-body p, 
.amelia-app-booking span, 
.am-modal.am-in-body span, 
.amelia-app-booking div, 
.am-modal.am-in-body div, 
.amelia-app-booking section, 
.am-modal.am-in-body section, 
.amelia-app-booking ul, 
.am-modal.am-in-body ul, 
.amelia-app-booking li, 
.am-modal.am-in-body li, 
.amelia-app-booking a, 
.am-modal.am-in-body a 
{font-family:fantasy !important;}
</style>

    In this example, we change font family to "fantasy", and it applies to all front-end font, but you can change that, and choose which of these classes you will use, if you don't want to use all.

    Kind Regards, 

    Aleksandar Vuković
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  • Dave replied
    August 25, 2020 at 11:04pm

    Hi Aleksandar,

    Thanks for the help and the information.  I've been trying to get the font-size larger and the the opacity up to .85 for the text in the calendar that comes up when booking an appointment. But I'm doing something wrong.

    Either I have it in the wrong place for this theme, Themify Ultra, or I am not using correct code.

    Themify has the feature of being able to add Header code built in as option, so I was trying it there.

    So if you could give me an example of how the code would look to accomplish one or both of those tasks above then I would know if it's the code or I'm not placing it correctly.

    Also, not sure about how to use the Input Type lines other than to just include them. But I know an example would make all that clear.

    Thanks again for your help. Really love the plugin, it is truly awesome!


    Thanks, 

    Dave Mongillo




  • Dave replied
    August 26, 2020 at 1:14pm

    Hi Aleksander,

    It looks like I figured out how to do the modifications I need. 

    So you can ignore this.

    Thanks,

    Dave Mongillo

  •  2,507
    Aleksandar replied
    August 27, 2020 at 7:54am

    Hello Dave

    I'm glad to hear that, sir.

    If you have any further questions or issues, please feel free to open a new ticket, and we'll gladly help.

    Kind Regards, 

    Aleksandar Vuković
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables