Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • March 7, 2017 at 9:59 pm #757281
    afra_ash

    How can fonts and styling of widgets be modified in Enfold?

    For example, at the bottom of the homepage, in the mailchimp newsletter signup widget, I want the name, email fields and the sign me up button, to use the EB Garamond font. How do I change this and the font size as well?

    I would appreciate if someone from Team Enfold could help with this.

    Thanks.
    Ash

    March 7, 2017 at 10:40 pm #757318
    afra_ash

    I have updated login details.

    March 8, 2017 at 8:06 am #757549
    Vinay

    Hi,

    The font style for the widget titles can be changed from Enfold > Advanced Styling > Widget Title (from the drop down menu)

    If you are looking for advanced customisation the easiest way to target any specific element on the site is by

    1. Enable the custom css class field: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    2. Add a custom css class to the element “custom-class-name”

    3. Target the element using custom css in the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    .custom-class-name {
/* CSS properties goes here*/
}

    In your case the text you are trying to change is a placeholder text which can be changed using custom css.

    Please check this link for more info

    Styling the placeholder

    https://css-tricks.com/almanac/selectors/p/placeholder/

    I tried to add custom css but there seem to be some placeholder css already added in the child theme css which is getting more importance over any custom css.

    Please remove the custom css for placeholder text added in child theme and try again.

    If you have any trouble please feel free to get back to us, we are happy to help!

    Best regards,
    Vinay

    • This reply was modified 7 years, 9 months ago by Vinay.
    March 15, 2017 at 3:40 pm #761456
    afra_ash

    Hi Vinay,

    I’m unsure which CSS is taking priority over the custom CSS specific to the widget. Could you please specify so that I can remove it? (If it is not doing anything useful)

    Plus, I’m still trying to wrap my head around all this code, so I’ll try and do what you have suggested here. I do not need to change styling of the title of the widget but of the placeholder text. Will update if I manage to fix this with your instructions, Thanks for the support. I appreciate it.

    Cheers,
    Ashwini

    March 19, 2017 at 6:59 am #763088
    Ismael

    Hi!

    I tried to login to the site but I got locked out. Please add this in the Quick CSS field:

    #top div .av-light-form .input-text, #top div .av-light-form input[type='text'], #top div .av-light-form input[type='input'], #top div .av-light-form input[type='password'], #top div .av-light-form input[type='email'], #top div .av-light-form input[type='number'], #top div .av-light-form input[type='url'], #top div .av-light-form input[type='tel'], #top div .av-light-form input[type='search'], #top div .av-light-form textarea, #top div .av-light-form select, div div .av-light-form .button {
    font-family: 'EB Garamond','Helvetica Neue',Helvetica,Arial,sans-serif;
}

    Best regards,
    Ismael

    March 29, 2017 at 12:35 am #768522
    afra_ash

    Sorry, I’m not sure why its not lettin you log in. Updated login details are as seen here below.

    • This reply was modified 7 years, 9 months ago by afra_ash.
    March 29, 2017 at 7:17 am #768620
    John Torvik

    Hi,

    Please, when you said “full-width sub menu”, I didn`t find it on your site, is it: https://cl.ly/3l0M1h0H3n3w – the black line in the bottom of the link? If not, may you share a screenshot, please?

    Best regards,
    John Torvik

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.