Home>Support>Changing background colour of a text box

Changing background colour of a text box

By PlaagGeest, 10 years ago. Last reply by Andrew Misplon, 9 years ago.

Hello,

I would like to change the background colour of 1 textbox in a row with 3 text boxes using the page builder.

What is the best option to do so?

With the build in option, it changes the complete row, what is not what I want.

Thank you,

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 21 days ago Andrew Misplon
    Hi, I Work Here

    Hi Patrick

    Thanks for running Vantage.

    There unfortunately isn’t an easy option to do this with right now. The Visual Editor widget: http://wordpress.org/plugins/black-studio-tinymce-widget/ has some styling options to change text color but not background color.

    I haven’t tried any but a third-party plugin solution might be best here:

    https://wordpress.org/plugins/colorful-text-widget/

  2. 10 years, 21 days ago PlaagGeest

    Thank you Andrew,

    I’ve also tried to do some with HTML within the text field with no luck.

    Think you’ve got more experience, are there any options left to do so in HTML?

    If not, I will find a work-around. :)

  3. 10 years, 21 days ago Andrew Misplon
    Hi, I Work Here

    In the text widget you could wrap your content in a div:

    <div class="text-block">
Content goes here.
</div>

    Then under Appearance > Custom CSS:

    .text-block { 
background: #000000;
}

    Give that a try and adjust as required.

  4. 10 years, 21 days ago PlaagGeest

    Ha!

    Great work! Works like a charm! :D!

  5. 10 years, 21 days ago Andrew Misplon
    Hi, I Work Here

    Super, glad to hear that helped!

  6. 9 years, 10 months ago drchris10

    Hi Andrew

    Would above change the background color of all text boxes? How do I define a background color for only 1 [of the 3] text boxes I have on my main home page.

    Thanks
    Chris

    • 9 years, 10 months ago Andrew Misplon
      Hi, I Work Here

      Hi Chris

      The first bit of code goes into the Text widget, the second bit goes into Appearance > Custom CSS or a Custom CSS widget like Simple Custom CSS. You’re declaring a class and then telling that class what to do. So it’s not something that applies to Text widgets, you’re actually inserting a div with a class into a Text widget and then using Custom CSS to manage that class. So to do this with only one widget, you’d only insert the HTML, the first section of code, into the first widget.

      Hope that helps.

      For further help please open a new support thread: Page: New Thread.

  7. 9 years, 10 months ago drchris10

    Got it! Explanation couldn’t be clearer. Thank you!

    • 9 years, 10 months ago Andrew Misplon
      Hi, I Work Here

      Super! Glad that did the trick.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More