Developer forum

Hi Adrian

A theme is color, background and border, so if you apply a theme to a row and that theme has borders, it will add a border color:

Then you might want to remove left and right color for rows with themes

.row.theme {
border-left:none;
border-right:none;
}

But be aware that Swift 1.0 will leave the Bootstrap grid (.row, .col-*) and change to their new CSS grid instead (https://getbootstrap.com/docs/5.1/layout/css-grid/), giving other class names for the rows and columns

Hi Nicolai,

I understand how it is set up now, and I see how you are supposed to use the properties.

I guess I need to change the mindset from Rapido to Swift :)

Rapido had more options for the elements while in here we need to create custom css or extend with properties. Which is fine as long as we understand what we can/should do.

One specific issue I have is how am I supposed to use the properties (or classes) of a theme.

For example, I have a situation where I need to set a different color for the subheading.

On the theme, I can only set one color (foreground color). How do I extend the theme with a second color? I can definitely add a new property but will that result automatically in a swift class or variable?

In Rapido, I could have used a more generic class defining (like brand-color-2) to create a custom rule for my elements.

Thank you,

Adrian

Hi Adrian

Great. We did discuss the border thing yesterday and is considering adding an option to control what borders should be affected by that theme settting (top, bottom, right, left) - that would make sense in various places. And maybe also the width of that border. I know there have been many options - many options can be great to fine tune, but also makes it very very dfficult to get all details ok without creating bad looking designs.

.theme.dark h2 {
 color: #f5f3b9;
}

Hi Nicolai

In relation to Adrians question about another foreground color for titles (and maybe subtitles), it would be a really nice feature to get. 

I have tried to use Adrians example form another post as an example for the use of colored titles. In this example, i would want the titles to be orange, but keep the subtitle and body text white:


Another example could be this, but here the subtitles are yellow, the titles blue and the body text is black:


I know that the above can be solved with our own custom styling, but to create the two examples with default swift, we would need to be able to add a color for title and subtitle in the swift themes :) 

Hi Tina

Thank you for your feedback and thoughts. 

We still have this one on decision board - it is a balance between not overloading with too many options and having enough to support most cases. So if enough implementations has this need, we will definitely implement it. It is fairly simple, but want to be careful to not clutter with too many options.

Could it be something like this?

Hi Nicolai

Yeah i understand that it has to be kept as "clean" as possible, but what you show on your screenshot would be really nice, but so it was possible to set the color for all titles/headings/dispaly*, and for all subtitles/subheadings, not dependent on if it is h1, h2 and so on. 

on the second screenshot of mine, the blue headline is an h3, so on that website, alle headings have the same color from h1-h6.

The subtitle, inmy example, isn't a h-tag, but just a <small></smal> with af class of sub-title for styling it, and i can see that you don't have the subtitle/subheading as h-tags either :)

I understand and will take the input into consideration when we explore this topic further. But we will have a strong focus on editors with little or no css and markup understanding.

You might want to add your own item types and then you can create a frontend developer friendly item type where all css settings can be edited in detail. It is relatively simple to extend the theme feature in Swift to do more. I will look into creating an example of how that can be achieved.

BR Nicolai

That sound great Nicolai, I'll look forward to the example :)