I'm starting to test out Site Designer, and am struggling to find a way to style all '<footer>' elements in my project.

I drag a footer element from the 'Advanced Containers' section of the 'Elements' pane, and place it on the page. On that same page, I have a '<header>' element, as well as a '<section>' element - all dragged from 'Advanced Containers'. I'd like to set some default styles that will apply to all footer elements across the entire project.

So I select my '<footer>' on the canvas, go to the 'Styles' pane, and in the 'Apply Styles' section I select "To all elements of this type". At this point, I expected the bottom at the text of that section to update and say: "The current selector (footer) is used in 1 element". Instead, I get: "The current selector (.container) is used in 3 elements" - even though I most definitely have "To all elements of this type" selected.

It seems that if I drag an 'Advanced Container' from the Elements pane, it automatically applies a 'container' class to it. Then, when trying to style the 'type' of that container, Site Designer ignores the html tag and insists on applying the styles to ".container". As expected, if I do apply some styling (e.g. change the background colour), it applies it to ALL 3 containers - not just the footer.

Am I doing something obviously wrong? How do we apply generic styles to those semantic containers? Any guidance would be greatly appreciated.

That maybe a bug or that's the way they designed it for container elements as targeting h1 tags works by selecting that type and it's proper in the elements tree css.

That's what I'd like to know. It feels odd that there wouldn't be a way to target 'footer', 'main', 'article', and so many other HTML5 semantic elements directly in a generic way. The way it is now, I'd have to manually apply a custom class to all footers, all articles, all headers, etc.

I've also tried dragging an 'Html Element' element, and manually selecting the tag in the 'Element' pane. But it seems that Site Designer automatically adds an '.html-element' class to these custom HTML Elements, so we end up with the same problem: if we select 'To all elements of this type' it shows us that it's styling all elements with the '.html-element' class...

An element be it a footer, header, figure, section whatever is a CONTAINER, but with a different tag name that's all, so if you apply "to all elements of this type, then it applies it to a container, not the tag

in order to have the footer styled the same on different pages it needs to be a symbol, which you then insert an every page , that way however you style the footer, then that style applies to all the pages it is inserted on & any child elements).

or give it a class name E.G "footer" let the style applies to all "selected classes" then all others that you put on different pages give them the "footer" class

give it the same class name,,

Thank you, Wayan! This is the kind of guidance I need, to get me from my 'hand-coding' way of thinking to a more 'Site Designer'-like workflow!

That's ok it's a very steep learning curve which most of us oldies went through, once the penny drops or the light bulb shines it becomes a bit of a doddle. I have a few video tutorials if ever you get stuck maybe one will be suitable for specific problems

Hi Igor,

Yes I agree with Wayan it is a steep learning curve. I have been using SD since its birth many years ago and I am still learning new things with it. Its a very powerful application and vital to my business.

If you ever need help with anything please post back there are lots of good folks over here that can help.