Latest topics
» IconSkouliki
by skouliki Sun 17 Sep 2017, 11:05

» Awards
by Mr_Grande Sun 17 Sep 2017, 08:52

» Modify Category Tabs lead to a desired position and auto scroll click
by djblah Fri 15 Sep 2017, 14:56

» Display a preview of the user profile on hover
by Eiki Thu 14 Sep 2017, 02:38

» [GAME] Count to 30 - Ange Edition
by SLGray Mon 11 Sep 2017, 14:23

» Rank CSS
by Mr_Grande Fri 08 Sep 2017, 09:24

» make the topic a color
by Ultimas Wed 06 Sep 2017, 19:44

» Chit Chat Thread
by Valoish Sun 03 Sep 2017, 23:20

» The like/thumbs up or down feature
by Dr.kran Sun 03 Sep 2017, 19:21

» My text boxes are glitched, can you help with this type of problem?
by Wolfuryo Sun 03 Sep 2017, 17:08

» User - Made Creations
by SLGray Sun 03 Sep 2017, 16:25

» FM Themes
by SLGray Sun 03 Sep 2017, 16:24

» i need to add css improvement
by Wolfuryo Sat 02 Sep 2017, 12:12

» How do I add hover examine feature?
by Dr.kran Wed 30 Aug 2017, 16:43

» [GAME] World Snake
by SLGray Wed 30 Aug 2017, 14:46

Recent Tutorials
Top posting users this month
Who is online?
In total there are 5 users online :: 0 Registered, 0 Hidden and 5 Guests :: 1 Bot

None

[ View the whole list ]


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

[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 : 4684
Points : 9727
Reputation : 2331
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 : 4684
Points : 9727
Reputation : 2331
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 : 4684
Points : 9727
Reputation : 2331
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 : 4684
Points : 9727
Reputation : 2331
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 : 4684
Points : 9727
Reputation : 2331
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 : 4684
Points : 9727
Reputation : 2331
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