[EDGE STYLING] Question: How to attach certain elements to the themes?

@Ange Tuteur: I've got a question. How do we add certain elements on our sites to the theme styling, hence applying the theme to them? Is there a certain (default) CSS rule we can apply to certain elements? I simply don't know how to add them. Please, explain.

Samantha.

Hey,

There's two classes that can be used to give certain elements the same color as the theme which is selected. You can see them below, change the theme to see the difference.

.color-primary

.color-secondary

Code:

[table class="color-primary"][tr][td].color-primary[/td][/tr][/table]
[table class="color-secondary"][tr][td].color-secondary[/td][/tr][/table]

You can also add special queries onto the end of image links, which is what we do for the buttons in this theme. For example :
https://i.servimg.com/u/f86/18/21/41/30/quote-12.png?color=primary >>
https://i.servimg.com/u/f86/18/21/41/30/quote-12.png?color=secondary >>

Code:

[img]http://i86.servimg.com/u/f86/18/21/41/30/quote-12.png?color=primary&size=s[/img]
[img]http://i86.servimg.com/u/f86/18/21/41/30/quote-12.png?color=secondary&size=s[/img]

The additional "size=s|m|l" query changes the padding of the image. s=small, m=medium, l=large.

Heh? I still don't get it, @Ange Tuteur. Say I've got this CSS:

Code:

/*AFFILIATE_BOX_STYLING*/#affiliate_box {text-align:center;background:#FFF;border:1px solid #CCC;margin:6px 0;padding:3px;}

creating these borders:



how do I integrate the 1px. border with the themes for instance (so the color changes accordingly)? By splitting the code like this (?):

Code:

/*AFFILIATE_BOX_STYLING*/#affiliate_box {text-align:center;background:#FFF;margin:6px 0;padding:3px;}
/*AFFILIATE_BOX_BORDER_STYLING*/#affiliate_box .color-primary {border:1px solid;}

Ah I see what you're doing. The classes above are mainly for background colors, so for the border you'll just need to add your selector to the theme selector script. Go to Admin Panel > Modules > JS codes management > ALL.JS

Find : ( line 228 )

Code:

{ border-color:' + palette[1] + ' !important; }

and add your selector before the style properties.

Code:

, #affiliate_box { border-color:' + palette[1] + ' !important; }

Make sure to add a comma before your selector to separate it from the last selector.

Thanks. I'm exited to try that after dinner. You see, it was a bit more complicated... I take it that palette 2 is the secondary color?

Yes, for more custom modifications you need to add your selectors into the theme script, which is a tad more complicated. Close ! The colors are placed into 5 color arrays, ordered from the lightest to darkest shade.

For example "Danube" is the default color of Forumactif Edge. ( link ) The Palette looks like this :

Code:

'Danube' : ['#7AD', '#69C', '#58B', '#369', '#345'], // hue 210

The primary color is "69C" and the secondary color is "345" since they're the most used shades. In JS arrays are zero-based, which means the first item is 0 instead of 1, so the number for each color is as follows.

Code:

'Danube' : [
  '#7AD', // palette[0]
  '#69C', // palette[1]
  '#58B', // palette[2]
  '#369', // palette[3]
  '#345'  // palette[4]
], // hue 210

I was kind of thinking #69C (#6969CC) was. But I needed to ask first, which would be my next question actually. Since that one has been answered, perhaps I can sort the colors by HEX using Excel and sort the colums by the second color colums(?), representing [1] for all the colors, to get that rainbow effect in the theme selector. Would that work you think?

I think you can better make this topic some sort of tutorial. Looking at your comments my head 's already spinning with all the info you've given and it's quite complicated. I may have to re-read it a couple of times to understand.

What I don't understand is the comma I've got to place to seperate the selector. I mean, that would only be in case of multiple selectors in 1 line, right? I've never seen a CSS line start with a comma before ...

Oh if you look at line 228, the whole thing looks like this :

Code:

'input[type="text"]:hover, input.post:hover, input.inputbox:hover, textarea:hover, select:hover, input[type="text"]:focus, input.post:focus, input.inputbox:focus, textarea:focus, select:focus, body div.sceditor-dropdown input:focus, body div.sceditor-dropdown textarea:focus, .fa_pseudo_checkbox:hover, .fa_pseudo_radio:hover, .sceditor-container, h2.post-content, h3.post-content, h4.post-content, .lastpost-avatar, #wio_new_avatar, .avatar-mini img, .avatar { border-color:' + palette[1] + ' !important; }'+


I said to place a comma before your selector so it'd separate it from the last selector, which is ".avatar" in this case. The whole thing with your selector added in will look like this :

Code:

'input[type="text"]:hover, input.post:hover, input.inputbox:hover, textarea:hover, select:hover, input[type="text"]:focus, input.post:focus, input.inputbox:focus, textarea:focus, select:focus, body div.sceditor-dropdown input:focus, body div.sceditor-dropdown textarea:focus, .fa_pseudo_checkbox:hover, .fa_pseudo_radio:hover, .sceditor-container, h2.post-content, h3.post-content, h4.post-content, .lastpost-avatar, #wio_new_avatar, .avatar-mini img, .avatar, #affiliate_box { border-color:' + palette[1] + ' !important; }'+


Oh, I got it now. I though that would go for the CSS , but it was meant for that line #228. ty. I'll try it out later.

Yep, it has to go in the script where the humongous CSS rules are.

That's some freakin' awesome stuff, @Ange Tuteur. You're an Ange(l)




Thanks for sharing the info on how to do that, and having that code prepared for me already! It's real easy once you know how!

No problem.

Topic archived