FM Design
Would you like to react to this message? Create an account in a few clicks or log in to continue.

IMPORTANT

FM Design is in read-only mode, please click here for more information.

Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Tue 03 Sep 2019, 11:49

» GIFActif - Giphy Button for the Editor
by Ange Tuteur Wed 08 May 2019, 17:21

» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28

» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15

» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11

» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24

» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58

» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50

» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22

» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12

» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10

» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51

» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11

» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19

» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34

Recent Tutorials
Top posting users this month

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

None

[ View the whole list ]


Most users ever online was 515 on Tue 14 Sep 2021, 15:24

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

View previous topic View next topic Go down

Anonymous
Guest
Guest

PostGuest 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
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12014
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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 :
https://i.servimg.com/u/f86/18/21/41/30/quote-12.png?color=primary >> [EDGE STYLING] Question: How to attach certain elements to the themes? Quote-12
https://i.servimg.com/u/f86/18/21/41/30/quote-12.png?color=secondary >> [EDGE STYLING] Question: How to attach certain elements to the themes? Quote-12
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.
Anonymous
Guest
Guest

PostGuest 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:

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


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;}
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12014
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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.
Anonymous
Guest
Guest

PostGuest 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?
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12014
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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
Anonymous
Guest
Guest

PostGuest 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 ...
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12014
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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; }'+
Anonymous
Guest
Guest

PostGuest 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.
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12014
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Mon 19 Dec 2016, 12:40

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

PostGuest Mon 19 Dec 2016, 13:45

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

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


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!
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12014
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Tue 20 Dec 2016, 10:41

No problem. Smile

Topic archived
Sponsored content

PostSponsored content

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