Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1407190

    Hi,
    I’d like to have a button with a subline below. Like to change font, size, weight, more lines …
    is this a new feature request or possible with a little quick-CSS magic?

    • This topic was modified 11 months, 1 week ago by Nomad.
    #1407379

    Hey Nomad,
    Thanks for the link to your example, but you can achieve this with a text element below a button element without any extra css:
    Enfold_Support_2075.jpeg
    You can change the font size and color of the text block in the style tab:
    Enfold_Support_2077.jpeg
    or change it with inline css in the text block.

    Best regards,
    Mike

    #1407424

    Hi Mike,

    thx, got it.
    reduced bottom padding on the btn side and it worked.
    How can I change (left) padding & line height of the text element?
    ((quick css and custom css pls, if this is the way to go.))
    and pls further CSS-galore for changing format/style of btn & text
    (pls see the attached demosite and you might “feel” what I mean)

    • This reply was modified 11 months, 1 week ago by Nomad.
    • This reply was modified 11 months, 1 week ago by Nomad.
    #1407504

    Hi Nomad,

    Edit the Text Block Button, go to Styling (tab) > Spacing, and you should be able to see padding options there.
    Line height is not set individually but it can be set in Enfold Theme Options > Advanced Styling.
    As for the button style, edit the button and go to Advanced (tab) > Developer Settings > Custom CSS Class and add special-button then in Enfold Theme Options > General Styling > Quick CSS, add this CSS code:

    #top #wrap_all .special-button .avia-button {
        background: #164066;
        background-image: linear-gradient(270deg,#0d263c 0,#1f5a90 51%,#164066);
        background-size: 200% auto;
        border: none;
        background-position: 100%;
        transition: background-position .3s cubic-bezier(.4,0,.2,1);
        color: #fff;
        text-shadow: 0 0 20px #081927;
    }
    
    #top #wrap_all .special-button .avia-button:hover {
        background-position: 0;
    }

    Just adjust the colors as you see fit.

    Best regards,
    Nikko

    • This reply was modified 11 months ago by Nikko.
    #1407640

    Hi Nikko,
    thank you for your Input concerning the button.
    Talking about the text element I’m a but surprised you wrote “go to Styling (tab) > Spacing”…
    Within the styling-tab I can see “blog-style”, “font-size” and “Colors” only.

    If possible to manipulate text elements by CSS – would you pls send an example with all accepted arguments from where I can go further?

    Thx

    #1407689

    Hi Nomad,

    I apologize, you’re right, there’s no padding in Text Block, I was actually referring to the button with regards to padding, as for Text Block, it is possible via CSS.
    Edit the Text Block, go to Advanced (tab) > Developer Settings > Custom CSS Class and put myblock (you can change myblock to any name)
    Then in Enfold > General Styling > Quick CSS:

    #top .myblock {
      padding: 8px 20px; /* 8px padding top and bottom, 10px padding left and right */
    }

    There’s a lot of things that can be put into it, here’s a list: https://dofactory.com/css/properties
    Hope it helps.

    Best regards,
    Nikko

    #1407714

    Hi Nikko,

    thx a lot for your input and for linking the CSS resources.
    Very helpful.

    #1407716

    Hi Nomad,

    You’re welcome :)

    Best regards,
    Nikko

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