Color features in wixcode!

Ask the community
,
1

I have spent almost one year developing my sit to its current state in order to build my business in the best possible way. On my site I have a list of brazilian jiu jitsu gyms. I have both a category page to list them all and an item page to show more details on the gyms themselves.

I want to give the gyms total control over how their page looks on the site in order to best represent them! Overwhelmingly there request boil down to changing the colors to somewhat match their gym / team colors. I agree with them that this is something that I NEED to implement into my business. However there are road blocks. (WEBSITE IS LINKED BELOW)

PROBLEM A :
I have set up my website using strips as I feel this achieves a very professional look!
$w(‘#columnStrips’) have no functions or variables that can be manipulated to change its colors.

  • No $w(ID).style

  • No $w(ID).html

PROBLEM B :
There are a few different elements on the page which need its colors to be changed.

  • Gallery backgrounds

  • Texts

  • Strips ( as already mentioned )
    None of these elements contain to my knowledge and I have dug as deep as I can as a novice programmer, a way to change their colors.

  • No $w(ID).style

  • No $w(ID).html

SOLUTION A :
Simply allow these elements as mentioned above to have access in some way to these functions and variables.

  • $w(ID).style

  • $w(ID).html
    SOLUTION B :
    Consider adding a color variable for these elements and more in order to give users more design options when using WixCode.

  • $w(ID).color = #FF001234;

SOLUTION C : BIGGEST SUGGESTION
Allow wixCode to manipulate an additional pallet or color theme.
This would allow the code to change the additional color pallets without having to make huge chunks of code for each individual elements code to be accessed and manipulated. THIS AVOIDS HAVING TO IMPLEMENT ANY OF THE ABOVE SUGGESTIONS.
Users could simply set the section of the color pallet (on the page I am talking about on my site I use the blue section in the below picture )

IF there were an additional pallet or even one section of the pallet that were editable ONLY in code this would provide.

In my database collection for the gyms I could simply have additional columns for the 5 colors in the “additional pallet section”, I could set this page up to use that particular section of the pallet and then simply use code to manipulate the colors by connecting them to the colors in the database.

https://coachkyle.wixsite.com/grapplehub/AffiliatedGyms/Attic-Jiu-Jitsu

2

You already have all these features available

3

As far as i can tell these features are not available. html works for text and in the context in speaking about none of the other elements appear to have this functionality… Can I in fact Use wixCode to change color pallets ???

4

Hi Kyle!

My name is Or - I’m a product manager at WixCode. First of all, great to meet you :slight_smile: your site is amazing!

I find your suggestion to allow managing colour themes via code very interesting though I’m not sure we’re going to provide such feature in the near future.

Though, we are now working on expanding our styling engine to allow a whole new set of expression capabilities. Part of them are also going to be exposed via code.

As for now, I can offer you couple of workarounds that will help you to achieve your goal.

Modifying the colour of a text element

The way to change styling of text element is to do it via the .html property. For more info you can read this article:

https://www.wix.com/code/reference/$w.Text.html#formatting-text

On on nutshell, you can write the following code to change the colour of your text component:
$w(“#textElement”).html = “<span style=“color: #555555”>YOUR TEXT”;

Modifying the background colour of your gallery

If I understand you correctly, you want to be able to present a coloured background behind your gallery that will be shown between the photos.

I would suggest you to add a container behind your gallery and change its colour dynamically by using the backgroundColor property of the styling API:

$(“#box1”).style.backgroundColor = “#555555”

1398×792 176 KB

Modifying the background colour of Column Strips

Right now, style API does not support column strip containers. Though, you can change the a container’s background image via .background.src.

My suggestion here is to generate a single pixel images in various colours via sites like dummyimage.com and change your column strip containers background by running the following code:

$w(“#myElement”).background.src = “wix:image://v1/xyz.jpg”;

Hope I could help. Please don’t hesitate to approach with any further question.

Thanks,
Or

5

Or, thank you for the reply!
I’m working hard to provide the best service to my clients and users, so thank you.

Thank you for your suggestions they are really appreciated. I will get to work implementing them, they seem to be great work arounds!