Topic: custom Block styling in one theme only

[ncoded]

I made a custom .windowbg4 that I am using with a block in a custom theme that I am working on. All good, except when I switch back to the SMF Default Curve theme, this custom class is applied instead of the native .windowbg3.

This is true whether I place my custom class in portal.css or index.css within mycustom theme, while when switching to the SMF Default there is no styling (as expected, since this class is not defined there).

Is there a way to make the custom class apply only in a particular theme?

One idea I had was to modify the index or portal css in the SMF Default theme so that no matter which one is applied, the native .windowbg3 is applied. Anyone with a better idea?

[emanuele]

As far as I know windowbg4 is not used anywhere in SMF/SP, so it's not declared in any css at least in the default theme.
As such, if your block outputs something like:

Code: [Select]

<div class="windowbg4">something</div>then that "something" will basically have no style applied (except for those inherited from the parent tags).

Are you by any chance expecting that on the default theme instead of:

Code: [Select]

<div class="windowbg4">something</div>a

Code: [Select]

<div class="windowbg3">something</div>is created?

[ncoded]

Thank you for your reply.

I apologize for the misunderstanding; let me try to rephrase my story.

I know that .windowbg3 is defined and used in the default (Curve) theme and from there it is also picked up by SP. But I am designing a custom theme based on Curve and I want to use a different Default Body Class for certain custom HTML blocks. For these blocks I can define my own body class, which I call .windowbg4

All is good so far, my blocks have the customization that I desireas long as I show my custom theme. The problem is, these customizations  will also be applied to the blocks if I switch to Curve (because SP uses the same blocks in both themes).

So my question would be: is there a way to use .windowbg3 for these blocks in Curve, and my own .windowbg4 in my custom theme (and only there)?

[Chen Zhen]

ncoded,

You can have it check which theme and use that condition to edit the custom class accordingly.
Another idea is that you can create a windowbg4 class in the default css file & duplicate the windowbg3 class attributes into it.

[♦ Ninja ZX-10RR ♦]

Another idea is that you can create a windowbg4 class in the default css file & duplicate the windowbg3 class attributes into it.

Ugh, simply add .windowbg4 next to .windowbg3, much shorter and less confusing.

[emanuele]

An example of your html block would help quite a lot, because I'm still guessing here.
So I suppose you have something like the following in your block:

Code: [Select]

<div class="windowbg4">some content</div>if this is the case, then yo ucan just do:

Code: [Select]

<div class="windowbg3 windowbg4">some content</div>then define the css in your theme like for example:

Code: [Select]

.windowbg3.windowbg4 {
     attribute: here;
}do note windowbg3 and windowbg4 are separated just by a dot, without any space.

[♦ Ninja ZX-10RR ♦]

That, too.

[ncoded]

I have tried to attach two images: in the Custom you should notice the square borders around the blocks (as I defined them in my .windowbg4). Any styling is though non-existent in Curve (I guess because my styling is not defined in index.css or portal.css for Curve). This creates a situation where the themes look too markedly different. In the larger scheme of things, I will have at least four slightly different themes to choose from, mostly just for color-coordination.

So now what happens is that in the way I have these stylings and settings, if I use Curve the blocks are missing their styling (.windowbg), whereas if I use Custom then my borders show.

What I really am after is that whichever theme I use, my Custom theme shows properly color-coordinated. Imagine, if you wish, several sports clubs, each with their signature color; whichever club you're in, the club colors appear in the theme - but otherwise all stays the same.

Maybe the best way would be to do conditional css loading, but not sure how that works. Another way is to do lots of css duplicates, basically not allowing the program to fall back on any non-defined styling. Or there may be other ways to deal with this...

[♦ Ninja ZX-10RR ♦]

Just open your Curve index.css and add .windowbg4 next to .windowbg3 like this:

Code: [Select]

.windowbg3, .windowbg4
{
css code here
}It will become same as windowbg3 in Curve theme, and it will work with custom windowbg4 in custom theme.

Otherwise, you just need to add a new .windowbg4 class and define its properties manually.

[emanuele]

Is there a way to make the custom class apply only in a particular theme?

One idea I had was to modify the index or portal css in the SMF Default theme so that no matter which one is applied, the native .windowbg3 is applied. Anyone with a better idea?

From your first post you were after the exact opposite to me.

Of course, the way is to add new css to the theme you want, I don't see any other way.

[ncoded]

I found that doing as Ninja suggested was the best and easiest solution for me, quick testing seems to produce what I want, so I'm sticking with it.

Once again, thanks to all!

[♦ Ninja ZX-10RR ♦]

Glad it worked out, feel free to post again if you have more doubts

Regards