Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • May 12, 2023 at 9:47 am #1407190
    Nomad

    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, 4 weeks ago by Nomad.
    May 14, 2023 at 10:48 pm #1407379
    Mike

    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

    May 15, 2023 at 10:32 am #1407424
    Nomad

    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, 3 weeks ago by Nomad.
    • This reply was modified 11 months, 3 weeks ago by Nomad.
    May 16, 2023 at 5:31 am #1407504
    Nikko

    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, 3 weeks ago by Nikko.
    May 16, 2023 at 5:04 pm #1407640
    Nomad

    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

    May 17, 2023 at 4:46 am #1407689
    Nikko

    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

    May 17, 2023 at 9:15 am #1407714
    Nomad

    Hi Nikko,

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

    May 17, 2023 at 9:32 am #1407716
    Nikko

    Hi Nomad,

    You’re welcome :)

    Best regards,
    Nikko

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