Foundry Stack Global Settings

Curious to know if there are any plans to add additional global settings to the Foundry stack?

In particular, I would really like to setup a default color for the PAGE HEADER so that I can set it once and have all instances get the desired color. As it is now because I want a color for the page title I have to set it on every page, then when or if I decide to change the color I need to go change them all again.

Would be nice to have more global settings where they make sense!

Can’t you use a partial and place the foundry settings stack inside?

1 Like

I already use the Foundry stack in a partial, the problem is that it does not have a setting for this particular color. But what I could probably do is create a partial for the PAGE HEADER because it never has any actual text entered into it so I could set the color and then just use the partial on every page.

Will try that out tomorrow, should work!

1 Like

So here is what I am doing just now, and I need to make clear this is not necessarily the best way (certainly not the official way!) to do it, its just how I do it and it seems to work very well too while saving me a tonne of time and trouble…

I do everything the tutorials say to do with regard to setting the project up with the Foundry stack and the site styles stack. To the letter. I use the site styles stack to ‘prove’ my colors for each of the headers from h1 to h6 and allocate them a friendly name as appropriate. But then I add this to the project wide CSS code container:

h1 {
    color: <put h1 color code here> !important;
}
h2 {
    color: <put h2color code here> !important;
}
h3 {
    color: <put h3color code here> !important;
}
h4 {
    color: <put h4 color code here> !important;
}
h5 {
    color: <put h5 color code here> !important;
}
h6 {
    color: <put h6 color code here> !important;
}

What does this give me?
Well, now when I add a header and choose the header type I don’t have to even think about touching the color control for that header. It gets color styled from that CSS. I save time and its completely consistent.

But it gets better…

What you can then do is modify the colors in the style guide to something other than those used in the CSS. Now, as long as when you add the header you leave the color control set to “control center” - the header will use the ‘base’ color from the CSS as the theme style class is not applied.

But… if you then decide you want that header a different color selected from the style guide friendly color palette then just go ahead and choose it. Now the theme style class IS applied and it overrides the CSS.

This gives a phenomenal degree of control over your header colors in Foundry.

Essentially you can decide on your header colors - set them in the CSS then only choose whether or not they should be overridden by the friendly named colors in the style guide. But on default (the way it should be) they pick up your base color.

I’m saving a tonne of time with this method. Perhaps the basis of this method could be abstracted into the Foundry stack or another styling stack in the future, but that’s 100% up to Elixir :grinning:

Just my $00.02 of course.

2 Likes

Hey there @handshaper!

As @Fuellemann points out – a great way to accomplish the task you’re looking to do is to use a partial with an unpinned content area. To do that your Page Header stack needs to have the Main Label setting set to Custom.

Here’s a quick video I threw together just now to show it in action: http://d.pr/v/1avKT

@kryten: I know people have their own way of accomplishing things and a workflow they like, and I’m sure this works for you, but it seems like more work than it should be. With this setup you are having to maintain code on your own, without the helpfulness of a color picker or other Stacks-based controls.

Using the !important means that it can override anything else on the page, or site as a whole, that uses a header tag. So say you’re using a stack like Timeline or something else that includes header tags, these CSS definitions would override those header tags as well.

Like I said, everyone has their own way of accomplishing things, which is one of the awesome things about RapidWeaver, I just would probably use a partial for this myself to save having to maintain my own code snippets separate of everything else.

@elixirgraphics

Yes, I cannot remember if the !important is needed and I was typing in a hurry.

Fully appreciate that this method is not the “Foundry” way, but its working well for me. The CSS itself just goes in the RW Global CSS container and so far its not caused any problems.

Using a pre-styled partial for headers is definitely another way to go, but it does mean switching from the stacks library view to the partial view to select it. That’s a couple more clicks than I really want sometimes. Also, I like to have my stacks library panel float at the bottom left and I cannot stand looking at the (surely) unnecessarily huge icons over on the left of the panel, so I hide it offscreen. This gives me more room too. So my current method saves me a drag, a couple of clicks and another drag each time.

I’m a bit fussy about workflows… :wink:

1 Like

Turned out that it was actually very easy to do this with a partial. I did not need to unpin the content because I had the page header setup to display the page title, so I never actually edit the text. I just setup the color I want and then created the partial and used it on every page. Works great!

1 Like

Awesome! Even easier then!