Utilizing Custom Code

Custom Coding
1

I was wondering how I am supposed to use the custom coding tab inside of Softr. I am just trying to change the color of the text utilizing custom coding, but it doesn’t seem to work.
Inside of the header or footer tag, I add the following:

* { color: black; }

However, nothing turns black and I am so confused as to why this isn’t actually producing anything.

Does anyone know why this is the case?

2

Make sure any CSS is enclosed in style tags:

<style>
CSS goes here
</style>
3

I forgot to add it in the question, but I did have it inside of the code in Softr. Is there potentially any other reason why it isn’t functioning as intended?

4

I don’t know why it isn’t functioning. I’ve never used * before, sorry.

5

Is it possible you could give any example of code that you inputed into the custom coding tab? I can’t seem to get any style to work for some reason.

6

Add a call to action block to your page. Check that the block title is cta3.
Add a Code Block and add this to it:

<style>
#cta3 > section > div > div > div:nth-child(1) > h2 {
    color: red;
}
</style>

Publish the page and preview it. The “30 Days Free Trial” text has been changed to red.

7

Hi @ilikecoding123, the thing is that we have custom styling settings in Softr for almost every single element and it was built the way that the stylings from settings are going on the top of other stylings. In order to override our styling you should use deeper cascading selectors. As for “*” it will work with ‘!important’ but still will not work for everything. You will need to specify the selectors coming form the parent and it’s highly recommended to start with the id of the block and make the customization per block and don’t forget to use ‘!important’ for the styles which are customizable from our settings. Also for app level styling you can use “Theme” section on your dashboard.