Recent Tutorials
Who is online?
In total there are 8 users online :: 0 Registered, 0 Hidden and 8 Guests :: 2 Bots

None

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17
Keywords

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

View previous topic View next topic Go down

avatar
Guest
Guest
View all awards

PostGuest on Tue 13 Dec 2016, 15:24

@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.

Hello Samantha.


Last edited by Samantha NL on Mon 19 Dec 2016, 13:46; edited 1 time in total
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4652
Points : 9634
Reputation : 2327
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Wed 14 Dec 2016, 11:03

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. Wink

.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 :
http://i86.servimg.com/u/f86/18/21/41/30/quote-12.png?color=primary >>
http://i86.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.
avatar
Guest
Guest
View all awards

PostGuest on Fri 16 Dec 2016, 09:28

Heh? scratch 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;}
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4652
Points : 9634
Reputation : 2327
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Mon 19 Dec 2016, 10:43

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.
avatar
Guest
Guest
View all awards

PostGuest on Mon 19 Dec 2016, 10:59

Thanks. I'm exited to try that after dinner. You see, it was a bit more complicated... Smile I take it that palette 2 is the secondary color?
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4652
Points : 9634
Reputation : 2327
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Mon 19 Dec 2016, 11:21

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
avatar
Guest
Guest
View all awards

PostGuest on Mon 19 Dec 2016, 11:29

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 ...
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4652
Points : 9634
Reputation : 2327
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Mon 19 Dec 2016, 11:48

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; }'+
avatar
Guest
Guest
View all awards

PostGuest on Mon 19 Dec 2016, 11:51

Oh, I got it now. I though that would go for the CSS Razz , but it was meant for that line #228. ty. I'll try it out later.
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4652
Points : 9634
Reputation : 2327
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Mon 19 Dec 2016, 12:40

Yep, it has to go in the script where the humongous CSS rules are. Razz
avatar
Guest
Guest
View all awards

PostGuest on Mon 19 Dec 2016, 13:45

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




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!
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4652
Points : 9634
Reputation : 2327
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 20 Dec 2016, 10:41

No problem. Smile

Topic archived

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

 
Permissions in this forum:
You cannot reply to topics in this forum