Colour white box, and Text colum

  • 1
  • Question
  • Updated 6 years ago
  • Answered
how do you change the colour of the whole Text box or the whole site, not just the background, the actual white box that you type in?
Photo of paul

paul

  • 4 Posts
  • 0 Reply Likes

Posted 6 years ago

  • 1
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Hi Paul
Click inside the text widget and then click the HTML link in the toolbar, enter this code without the <!-- -->

<!--
<div style="background-color:#C0C0C0; padding:5px;">Enter your text here</div>
-->

Change the # number to suit your site here

http://www.colorpicker.com/

If you don't want the padding around the text delete it or change it to 0px
Photo of paul

paul

  • 4 Posts
  • 0 Reply Likes
hey thanks for the reply it works. but its not doing the whole Text widget, its only doing a little bit of the bottom
Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
Hi Paul,

Have you tried using Yola's custom panels? You can insert a panel by clicking and dragging the widget onto your page.



You can edit colour, margins, padding and even the style of border (If you want one). Once you've customised your panel, simply insert a text widget by dragging it inside the panel widget. Let me know if you need further assistance!

Regards,
Brandon
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Paul,

Brandon's suggestion is a great one! Please let us know if you still have trouble with this.
Photo of paul

paul

  • 4 Posts
  • 0 Reply Likes
hey yes thanks it did work. im assuming you cant make the whole box coloured? cause i made the whole text widget coloured, but the actual outter box is still white. take a look.
Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
In order to change that, we need to alter some CSS. If you have Yola Silver, can you paste the following code in your CSS overrides:

div.content {
background:#ffffff;
}


If you do not have Yola Silver, simply insert and HTML widget an paste the following code (Without the <!-- -->):

<!--
<style type="text/css">
div.content {
background:#ffffff;
}
</style>
-->


The #ffffff is the colour, in this case white. Change this to suite the colour you'd like. If the code doesn't work, it's because the theme you're using has another name for your content area, so you'll have to give me the name of the style you're using so I can look at the CSS.

Regards,
Brandon
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks Brandon for your help on this!
Photo of paul

paul

  • 4 Posts
  • 0 Reply Likes
yes thank you so much it looks awesome. But i have another question lol. the white around the banner image and the header is there a way to make that coloured as well.
Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
There sure is! Just paste the following code in an HTML widget, like last time:

<!--
<style type="text/css">
div.ys-banner-wrap {
background:#fff;
}
</style>
-->


Once again, simply change the #fff to whatever colour you want. Hope that helps!