Change CSS in Panino theme

I have a need to change CSS for an item in Panino, but if I do that I suppose the change will be lost if I update the theme or not?

Here's what I need to change:

.upfront-button {
    font-weight: 400;
    font-style: normal;
    font-family: Trebuchet MS;
    padding: 0;
    text-align: center;
    width: 100%;
    height:100%;
}
.upfront-button a.upfront_cta {
    cursor: default;
    display: block;
    height: 280px;
    margin: 0 auto;
    opacity: 1;
    padding: 0;
    position: relative;
    text-align: center;
    text-transform: none;
    width: 280px;
}
.upfront-button a:hover {
    opacity: 1;
}

This button allows the text colour to be changed, but I need to have two words in the text: "Abundant Life" Abundant should be blue and Life red. Currently I can't do that with controls. I'd like to be able to change the text in a similar way to what I can do with a "text" element.

How can I do this?

  • Predrag Dubajic

    Hey Roland,

    Hope you're doing well today

    Changing Upfront theme files is not suggested and such changes will be affected by theme updates.
    Best way to approach this would be creating new Preset for your buttons and add your desired CSS code there.
    This will be saved in your DB and will not be overwritten by theme update.

    This button allows the text colour to be changed, but I need to have two words in the text: "Abundant Life" Abundant should be blue and Life red. Currently I can't do that with controls. I'd like to be able to change the text in a similar way to what I can do with a "text" element.

    Changing text in buttons this way is indeed not currently possible, I'll check with the developers if this could be changed in future.

    For now you could create custom button by using Custom Code element.
    Add custom code element and select "Write Custom Code", in HTML tab add code like this:
    <a class="my-custom-button" href="BUTTON_URL"><span class="blue-part">Abundant</span> <span class="red-part">Life</span></a>
    Now switch to CSS tab and add your CSS code there, for example something like this:

    .my-custom-button {
        background: white;
        padding: 15px 30px;
        border-radius: 5px;
    }
    
    .my-custom-button .blue-part {
        color: blue;
    }
    
    .my-custom-button .red-part {
        color: red;
    }

    Hope this helps

    Best regards,
    Predrag

  • Roland

    Thanks for your response, Predrag. However, the button created is now round like I want.

    I use this HTML:

    <div class="my-circle">
    <a class="my-custom-button" href="BUTTON_URL"><span class="blue-part">Abundant</span><br><span class="red-part">Life</span></a>
    </div>

    and this css:

    .my-custom-button {
        font-weight: 400;
        font-style: normal;
        font-family: Trebuchet MS;
        padding: 0;
        text-align: center;
        width: 100%;
        height:100%;
        vertical-align: middle;
    }
    
    .my-custom-button .blue-part {
        color: blue;
        -moz-text-decoration-line: none; /* Code for Firefox */
        text-decoration-line: none;
    }
    .my-custom-button .red-part {
        color: red;
        font-style: italic;
    }
    
    .my-custom-button a:hover {
        opacity: 1;
    }
    
    .my-circle {
      width: 300px;
      height: 300px;
      border-radius: 50%;
      font-size: 40px;
      color: yellow;
      opacity: 1;
      line-height: 50px;
      text-align: center;
      background: yellow
    }

    How can I make the circle somewhat transparent and align the text to be in the middle of the circle?

    On the site you'll see the two underneath each other on the home page. http://abundantlifecpt.co.za

  • Roland

    I have managed to figure it out:

    <div class="my-circle">
    <a class="my-custom-button" href="#MainMenu"><span class="blue-part">Abundant</span><br><span class="red-part">Life</span></a>
    </div>
    .my-custom-button {
        font-weight: 800;
        font-style: normal;
        font-family: Trebuchet MS;
        padding-top: 35%;
        text-align: center;
        width: 100%;
        height:100%;
        vertical-align: middle;
        -moz-text-decoration: none; /* Code for Firefox */
        text-decoration: none;
    }
    
    .my-custom-button .blue-part {
        color: blue;
    }
    .my-custom-button .red-part {
        color: red;
        font-style: italic;
    }
    
    .my-custom-button a:hover {
        opacity: 1;
    }
    
    .my-circle {
      width: 350px;
      height: 350px;
      border-radius: 50%;
      font-size: 70px;
      color: yellow;
      display: -webkit-flex; /* Safari */
      -webkit-align-items: center; /* Safari 7.0+ */
      display: flex;
      align-items: center;
      opacity: .5;
      line-height: 50px;
      text-align: center;
      background: #f9d631;
    }