Simple CSS question

[purp1eone]

Custom Pages

If I created a custom page and I have multiple themes what is the easiest way to use a variable from the style sheet?

I created a custom gradient I use for the title bars in one theme but I want to use the proboards gradients for the title bar in another theme.

In the style sheet there is this variable for the gradient: all_gradients: url('@{images_path}/gradients/wave.png');

How do I use that variable in my custom page?

[Kami]

Themes are self contained -- meaning that changes to the theme itself are on a per theme basis; additionally, custom pages are affected by themes so there should be no need to manually change the gradients like this just for a custom page, provided that youve changed the gradients im each theme.

does that make sense? in other words, as long as one theme has one gradient and another theme has a different one, those gradients will be used on your custom page based on which theme the user has selected in their profile / is default (for guests).

[purp1eone]

Jun 23, 2018 9:27:57 GMT -8 Kami said:

Themes are self contained -- meaning that changes to the theme itself are on a per theme basis; additionally, custom pages are affected by themes so there should be no need to manually change the gradients like this just for a custom page, provided that youve changed the gradients im each theme.

does that make sense? in other words, as long as one theme has one gradient and another theme has a different one, those gradients will be used on your custom page based on which theme the user has selected in their profile / is default (for guests).

Thanks for the info.

I was aware of that.  But when I created most of my custom pages I removed the existing HTML code and created my own.

There were pages I created that wouldn't work with the templates.

So I don't use zone1, zone2, etc

Tried a few different things and haven't gotten it yet.

Sure its simple I just haven't got it yet.

[Kami]

Oh, I see! That would be pertinent information to include in your first post, for future reference.

May I ask if you used classes when creating your current CSS for your custom pages? If not, then you can use the same class that ProBoards uses (title-bar) wherever applicable to use whatever gradients you've assigned to your theme's title bars. If you have, you could use background-image: url('@{images_path}/gradients/wave.png'); in the CSS for that class.

Hope that helps!

[purp1eone]

Jun 23, 2018 10:55:05 GMT -8 Kami said:

Oh, I see! That would be pertinent information to include in your first post, for future reference.

May I ask if you used classes when creating your current CSS for your custom pages? If not, then you can use the same class that ProBoards uses (title-bar) wherever applicable to use whatever gradients you've assigned to your theme's title bars. If you have, you could use background-image: url('@{images_path}/gradients/wave.png'); in the CSS for that class.

Hope that helps!

Sorry left that part out.

So I  use  classes and I tried this before I posted the question and it didn't work:

background: url('@{images_path}/gradients/wave.png');

but when I just set the gradient local it works fine:

background: linear-gradient(#542c82, #2e1847, #542c82, #2e1847, #2e1847);

Its like it can't find the path

[Kami]

If I recall it should really be background-image, rather than just background.

[purp1eone]

Jun 23, 2018 11:26:03 GMT -8 Kami said:

If I recall it should really be background-image, rather than just background.

I tried this and it still didn't work:

background-image: url('@{images_path}/gradients/wave.png');

But I can get an image from a different url:

background: url('https://i.pinimg.com/originals/5f/3c/38/5f3c388186fb8c4ad3a970ccc321be07.jpg');

That path must only work when using the style sheet.

Outside of the style sheet you need the full path, whatever "@{images_path}" is won't work on a custom page.

So if I can find out what "@{images_path}" is I think it would work

[Kami]

Out of curiosity, are you putting the CSS into the stylesheet in admin > themes > advanced styles & css > styleshet, or are you using <style> tags in the custom page HTML?

[purp1eone]

Jun 23, 2018 12:04:34 GMT -8 Kami said:

Out of curiosity, are you putting the CSS into the stylesheet in admin > themes > advanced styles & css > styleshet, or are you using <style> tags in the custom page HTML?

All the code is on the custom page.

I would like to be able to create a variable in each themes style sheet and then use that variable in the custom page eventually.

But for now if I just knew that full path it would work.

[Kami]

May I ask why? The stylesheet will affect the custom page as well, so you wouldn't have to recreate the variable. I suspect what's happening is that the stylesheet that's built in is referencing predefined variables as they're needed for the theme creator to function, and since you're not using said stylesheet it's not working.

I guess what I'm getting at is that @ references in the stylesheet proper should work, so I don't understand the need to recreate them.

[purp1eone]

Jun 23, 2018 12:58:56 GMT -8 Kami said:

May I ask why? The stylesheet will affect the custom page as well, so you wouldn't have to recreate the variable. I suspect what's happening is that the stylesheet that's built in is referencing predefined variables as they're needed for the theme creator to function, and since you're not using said stylesheet it's not working.

I guess what I'm getting at is that @ references in the stylesheet proper should work, so I don't understand the need to recreate them.

Like I stated previously because the templates available did not work.  The padding, the background color, the title text centering, etc.....

So once you remove the template html code in the html tab and get rid of $[zone_1] and so on it doesn't reference the style sheet.

If I would have changed the style sheet it would have changed it for the whole theme and I want the custom pages to be different.

Is there a way in the style sheet to control only the custom pages?  Because ultimately thats how it will have to be control

the custom pages for each theme.

So what I was going to do once I figured out how to reference anything from the style sheet was to:

Style sheet A

gradient:  x

Style sheet B

gradient:  y

Custom page could then reference the variable gradient and it would be different for each theme.

So because I gutted the existing code it needs to be done differently.

Is there a way to do that?

[Kami]

Sorry, I have no actual idea what it is you're trying to do. I'll let someone else help you.

Good luck!

[purp1eone]

Thanks for the help

[Kami]

I had another look at this because it was bugging me and passed it on to a friend who might have a better idea of what it was youre wanting to accomplish.

Basically, I was on the right track. The variable you are referring to is a component of LESS, which is a CSS preprocessor. As such, you cannot use variables outside of the stylesheet.

You can, however, use mixins within the stylesheet to create a variable in both themes with the desired gradient, and then call it on the container for the custom page within the same stylesheet. Here is a link on LESS mixins for gradients that should help:

webdesign.tutsplus.com/tutorials/making-gradients-easier-with-less-mixins--cms-24072