IMPORTANT

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

Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Tue 03 Apr 2018, 11:43

» 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

» Numbering of messages in the topic
by SLGray Mon 04 Dec 2017, 22:40

Recent Tutorials
Top posting users this month
Who is online?
In total there are 8 users online :: 0 Registered, 0 Hidden and 8 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

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
Gender : Male
Age : 22
Posts : 4726
Points : 9778
Reputation : 2362
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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.

--------

Ange Tuteur
Tips and TricksContact Me

avatar
Guest
Guest

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
Gender : Male
Age : 22
Posts : 4726
Points : 9778
Reputation : 2362
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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.

--------

Ange Tuteur
Tips and TricksContact Me

avatar
Guest
Guest

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
Gender : Male
Age : 22
Posts : 4726
Points : 9778
Reputation : 2362
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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

--------

Ange Tuteur
Tips and TricksContact Me

avatar
Guest
Guest

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
Gender : Male
Age : 22
Posts : 4726
Points : 9778
Reputation : 2362
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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; }'+

--------

Ange Tuteur
Tips and TricksContact Me

avatar
Guest
Guest

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
Gender : Male
Age : 22
Posts : 4726
Points : 9778
Reputation : 2362
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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

--------

Ange Tuteur
Tips and TricksContact Me

avatar
Guest
Guest

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
Gender : Male
Age : 22
Posts : 4726
Points : 9778
Reputation : 2362
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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

--------

Ange Tuteur
Tips and TricksContact Me

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