Is it possible to change the individual color of fonts and buttons via the Style Designer?

  • 1
  • Question
  • Updated 4 years ago
  • Answered
Howdy!

I am using the Verde template for a site I am building that has multiple custom panels on the main page (http://anothergsl.yolasite.com/).

Since each panel is a different color, some buttons "disappear" because the color is the same as the panel/background.

Is it possible to change the color of one button? (not every button on the site which I seem to be doing when I open Style Designer)

Same question, but with fonts and font colors, can I change them individually? The "old text" widget seems to give some more flexibility with changing fonts and colors, but the options are much more limited.

I tried to be as clear as possible! Sorry if it was confusing.
Photo of chrisdhassan

chrisdhassan

  • 61 Posts
  • 3 Reply Likes

Posted 4 years ago

  • 1
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Hi chrisdhassan,

Your site is looking really fantastic!

You can change the font size, type, color, alignment and style of different blocks of text by creating separate headings for each grouping you need. As you mention, it seems like the old text widget offers more flexibility but it's actually just that the features have been relocated to the Style Designer in order to allow your changes to be applied site wide and not require you to set them up on a widget by widget basis. We are also working on making more of these features visible within the new text widget as well for those who prefer to create settings at the widget level and not the site level.

To edit your heading and link colors:

1. Go to Style > Settings > Style Designer.
2. In the Color section click on “Main Header”.
3. In the color picker, select a new color or enter a hex color code.
4. Click on the "X" in the top-right corner to save your changes.

To edit your font style:

1. In the Font section click on “Main Header”. You'll see the following options:
* Font Family
* Font Weight
* Font Size
* Text Decoration
* Letter Spacing
* Line Height
* Text Transform
* Text Alignment
2. Click on the text on the right-hand side to bring up the various options and select your desired option.
3. You’ll see the changes reflected on your page.
4. When you're happy with the changes, click "Save" in the Sitebuilder.

Similarly with the buttons, you can customize each size, meaning if you add and customize a "Small", "Medium" and "Large" sized button, you could actually make them all the exact same size by adjusting the font size and padding but make each one a different color. Granted this isn't very intuitive as you will have to keep in mind that your "Small" button is red, your "Medium" button is blue and your "Large" button is green. I'll bring this up with our product team to get their input on how we might handle this better going forward.

I hope this helps, and do let me know if you need any further assistance!
Photo of chrisdhassan

chrisdhassan

  • 61 Posts
  • 3 Reply Likes
Hi Laura, thanks for the response.

I think I am missing something.....you mentioned creating separate headings for each grouping, how do I do that?

Just to clarify, re: buttons, in order to have buttons of different colors they would all have to be different sizes (adjustable afterwards) with a limit of 3 (small, medium, large)?

Thanks,

Chris
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Hi Chris,

Yes, that's correct on the buttons to an extent, but let me just reiterate, you could set up the buttons to be the exact same size within the Style Designer by modifying the font size and padding so that the only difference is the color. I do realize how confusing this sounds so I went ahead and recorded a brief screencast to show you what I mean about the buttons and the heading presets. I will email it to you at the address associated with your website once it finishes exporting.
Photo of chrisdhassan

chrisdhassan

  • 61 Posts
  • 3 Reply Likes
I seem to be having some issues, there may be a bug with the combination of font/styles I am using.

I am already using a medium button, so when I go to add a new large or small button it wont let me change the font color.

The Style Designer says that the font is white, but it is really some default blue that blends in with the background. I have tried other colors, but it always stays with the blue.

Another issue is with the small button, the font gets all wonky. I attached an image.
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Hi Chris,

I was able to replicate the Style Designer not applying changes to the button colors and fonts in your website. I played with it a bit but I have to say I'm not sure why it's happening yet. Is there any chance you were copying any of your text from a rich text editor such as MS Word? I ask because doing so can copy in unwanted code that can interfere with settings in the Sitebuilder. You can read more about it in the initial troubleshooting section here.

If that's not it, I'll have my colleagues take a look for me on Monday.
Photo of chrisdhassan

chrisdhassan

  • 61 Posts
  • 3 Reply Likes
no copying, I typed it in on the site
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Thanks Chris. After working with my colleagues I was able to see that this is a style specific issue we have seen in the past, though never with Skyline. I logged an issue with our engineers and asked for help with a solution or workaround. I'll follow up with you here when I hear back from them. In the meantime, what I can suggest is creating the button style you want and uploading them as an image or even using the Custom Panel Widget to create your buttons.
Photo of chrisdhassan

chrisdhassan

  • 61 Posts
  • 3 Reply Likes
Hey Laura, any updates?
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Unfortunately not Chris. It is still logged for our engineers but it has not been worked on yet. Using image links is definitely your best bet in the interim unless you want to try out an alternate style.