Latest topics
» FM Themes
by SLGray Today at 16:48

» User - Made Creations
by SLGray Today at 16:48

» The Football Forums
by Mati Today at 15:22

» [BUG] Avatar doesn't resize when reading the profile
by Samantha NL Today at 12:33

» Search Bar Options
by Samantha NL Today at 11:38

» Chit Chat Thread
by Jazeon Today at 05:42

» Christmas logo
by Teo! Today at 03:56

» SyncEditor
by keko_ferkeko Today at 00:31

» Private message bg color
by Mr.Alam Yesterday at 22:54

» Multi-step Login Form
by Samantha NL Yesterday at 12:54

» Member of the Month
by Samantha NL Yesterday at 12:38

» Forumactif Edge - Dutch Translation
by Samantha NL Yesterday at 10:49

» Widget : Staff Online
by Samantha NL Yesterday at 10:39

» Questions about styling the Main Search Box
by Samantha NL Yesterday at 10:24

» Found a typo in your default Edge CSS
by Samantha NL Yesterday at 03:07

Recent Tutorials
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

Add more topic title colors

View previous topic View next topic Go down

Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8395
Reputation : 2010
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome 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 25 Feb 2015, 17:40

By default there are only a total of 14 different colors to choose from for your topic title. With this little trick you will be able to add more colors to the topic title color list for your Forumotion forum.


Exclamation Attention : You should have Allow topics title color enabled if you're going to follow this trick.
Administration Panel > General > Messages and E-mails > Configuration

Choose Yes for Allow topics title color and save.


Addition of Colors


To add additional colors to the drop down go to Administration Panel > Modules > JavaScript codes management and create a new script.

Title : Extra topic colors
Placement : In all the pages
Paste the following code :
Code:
$(function() {
  if (!document.post || !document.post.topic_color) return;
  var colors = {
    'Crimson' : '#DC143C',
    'Tomato' : '#FF6347',
    'Orange Red' : '#FF4500',
    'Pink' : '#FFC0CB',
    'Magenta' : '#FF00FF',
    'Violet' : '#EE82EE',
    'Sky' : '#87CEEB',
    'Light Sky' : '#87CEFA',
    'Slate Blue' : '#6A5ACD',
    'Steel Blue' : '#4682B4',
    'Teal' : '#008080',
    'Lime' : '#00FF00',
    'Dark Green' : '#006600',
    'Light Green' : '#90EE90',
    'Yellow Green' : '#9ACD32'
  },
  a, b = document.post.topic_color, c = b.childNodes, i = 0, j = c.length, k;
  for (k in colors) {
    a = document.createElement('OPTION');
    a.innerHTML = k;
    a.style.color = colors[k];
    a.value = colors[k];
    b.insertBefore(a, b.firstChild);
  };
  for (; i<j; i++) if (c[i].style.color == document.post.subject.style.color) c[i].selected = 1;
});

Modifications

At the top of the script you will see a colors object. Inside this object you'll be able to define and modify existing colors. You should include the color name, and the color code. Here's a simple example :
Code:
var colors = {
  'Red' : '#FF0000',
  'Green' : '#009900',
  'Blue' : '#0000FF'
},

We can add as many or as little colors as we want, as you can see in the exemple above. It should be written as 'color name' : 'color code' and multiple colors should be separated by a comma. The last color doesn't need a comma, because that will throw an error in older browsers.

To make choosing colors easy for you, you can use some of the following resources. Smile


Removal of Colors


Maybe you want to remove certain colors from the topics color list. For example white and grey because they're hard to read on white backgrounds. To do this, go to Administration Panel > Modules > JavaScript codes management and create a new script.

Title : Remove topic colors
Placement : In all the pages
Paste the following code :
Code:
$(function() {
  if (!document.post || !document.post.topic_color) return;
 
  var badeggs = [
    '#FFFFFF',
    '#999999',
    '#FFFF00'
  ],
  o = document.post.topic_color.childNodes, i = 0, j = o.length, k, v, l = badeggs.length;
 
  for (; i<j; i++) {
    for (k = 0; k<l; k++) {
      v = badeggs[k].toLowerCase();
      if (o[i].innerHTML.toLowerCase() == v || o[i].value.toLowerCase() == v) {
        o[i].style.display = 'none';
        o[i].selected && ( o[i].nextSibling ? o[i].nextSibling.selected = 1 : o[i].previousSibling.selected = 1 );
      }
    }
  }
  document.post.subject.style.color = document.post.topic_color.value;
});

Modifications

At the top of the script you will see an array of badeggs. In this array you'll be able to write the names or values of the colors that you want to remove from the default topic color list.
Code:
var badeggs = [
  '#FFFFFF',
  '#999999',
  '#FFFF00'
],

We can add a few or all possible colors in the list. Each color that you want to remove should be separated by a comma. You can use either the name of the color or its value; the value is recommended. The downfall to using the the name of the color, is that member's using a different language, such as French, would be able to still see the colors removed in English.

To make work easy for you, here's a list of all the default color names and values which you can remove if you wish.
NameValue
Dark red#660000
Red#FF0000
Orange#FF9933
Brown#663300
Yellow#FFFF00
Green#006600
Olive#666633
Cyan#00FFFF
Blue#0000FF
Dark Blue#000099
Indigo#6600FF
Grey#999999
White#FFFFFF
Black#000000

If we wanted to remove all default values and start anew, then our array would look like this.
Code:
var badeggs = [
  '#660000',
  '#FF0000',
  '#FF9933',
  '#663300',
  '#FFFF00',
  '#006600',
  '#666633',
  '#00FFFF',
  '#0000FF',
  '#000099',
  '#6600FF',
  '#999999',
  '#FFFFFF',
  '#000000'
],


Notice
Tutorial written by Ange Tuteur.
Reproduction not permitted without consent from the author.


Last edited by Ange Tuteur on Tue 15 Mar 2016, 06:20; edited 2 times in total
FiB

Title :
Gender : Male
Posts : 172
Points : 934
Reputation : 13
Location : UK
Language : Eng
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://www.ourbulgariaforum.com

PostFiB on Fri 27 Feb 2015, 09:39

Thanks Ange might give this a go Thumb right
Michael_vx

Title :
Gender : Male
Age : 24
Posts : 290
Points : 1372
Reputation : 74
Language : Arabic
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://miccsoft.net https://www.facebook.com/Michaelvx2008

PostMichael_vx on Sat 28 Feb 2015, 19:38

Thumb left
lol
each time you surprise me with something super great
you do the best projects and all what i do is mass them up Sad
thanks again for this super project
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8395
Reputation : 2010
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sun 01 Mar 2015, 21:05

I updated the tutorial to include how to remove existing colors.

@Michael_vx I don't think it's that great. I got the idea to write a tutorial for it since I've seen it asked quite a few times. We should have the option to modify these colors as it's possible to change and add to them as shown in this tutorial.
FiB

Title :
Gender : Male
Posts : 172
Points : 934
Reputation : 13
Location : UK
Language : Eng
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://www.ourbulgariaforum.com

PostFiB on Mon 02 Mar 2015, 08:18

Hi Ange is there anyway to add more colours to the posting page.
Michael_vx

Title :
Gender : Male
Age : 24
Posts : 290
Points : 1372
Reputation : 74
Language : Arabic
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://miccsoft.net https://www.facebook.com/Michaelvx2008

PostMichael_vx on Mon 02 Mar 2015, 13:39

@Ange Tuteur
will
the new update looks nice now its not only just add its add and change the original colors its almost full control of the forum database color change everything only we miss is how to change the whole Editor to other editor Very Happy
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8395
Reputation : 2010
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome 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 02 Mar 2015, 21:46

@Michael_vx it's possible to install or even write your own editor if you have the knowledge. The only problem is that you cannot modify the server-side parsing. Which means if you have custom tags for your editor you'll have to parse them via JavaScript.

@FiB wrote:Hi Ange is there anyway to add more colours to the posting page.
You're referring to the editor color selector, correct ?
FiB

Title :
Gender : Male
Posts : 172
Points : 934
Reputation : 13
Location : UK
Language : Eng
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://www.ourbulgariaforum.com

PostFiB on Tue 03 Mar 2015, 02:56

@FiB wrote:Hi Ange is there anyway to add more colours to the posting page.
Michael_vx

Title :
Gender : Male
Age : 24
Posts : 290
Points : 1372
Reputation : 74
Language : Arabic
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://miccsoft.net https://www.facebook.com/Michaelvx2008

PostMichael_vx on Tue 03 Mar 2015, 04:10

@Ange Tuteur
will
may be i dont have enough Knowledge
first reason the Editor use Java Scripts wich is needing to be hosted on a host service and this is not a problem to since i already made a forum on a free hosting site wich is on that link
http://micsoft.is-best.net/vx
its not VB its MyBB that i tried to suggest about it to be added to forumotion before but i think that wont happen
lets back to the topic
the site of the Editor
http://www.sceditor.com
i made a Script that should be placed on a fourmotion but my problem is how to make it really work and replace the old Editor wich be like what the home page of the Editor say
Code:
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link rel="stylesheet" href="http://micsoft.is-best.net/vx/minified/themes/default.min.css" type="text/css" media="all" />
    <script type="text/javascript" src="http://micsoft.is-best.net/vx/minified/jquery.sceditor.bbcode.min.js"></script>
    <script>
    $(function() {
    // Replace all textarea's
    // with SCEditor
    $("textarea").sceditor({
    plugins: "bbcode",
    style: "http://micsoft.is-best.net/vx/minified/jquery.sceditor.default.min.css"
    });
    });
    </script>
if i find out how i force the replacing i think it will be done you can check the codes of the Editor it self that made by creators is within the links
http://micsoft.is-best.net/vx/minified/themes/default.min.css
http://micsoft.is-best.net/vx/minified/jquery.sceditor.bbcode.min.js
http://micsoft.is-best.net/vx/minified/jquery.sceditor.default.min.css
wich is loaded in the code i provide above in my forum all what i did is just replaced the Editor template and done but on forumotion its an other story for 100% but it should be able to use that Editor but how can i force the replace
i think ill need your Exprince in that case because i still cannot came up with idea about forumotion Editor force replace
sorry for long reply
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8395
Reputation : 2010
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome 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 04 Mar 2015, 00:07

@FiB This should help : http://help.forumotion.com/t134603-personalize-the-color-palette-of-the-editor#906632

@Michael_vx The documentation on the website should explain how to install the editor. Forumotion uses it exclusively for message editing -- other textareas are free. They do that by using a unique ID for where their editor will be. That is #text_editor_textarea

You can modify the existing sceditor here via the instance. ex :
Code:
var editor = $('#text_editor_textarea').sceditor('instance');
editor.val() // returns editor message
editor.inSourceMode() // returns true or false depending on editor state

A majority of the sceditor methods can be used like this.. Wink
http://www.sceditor.com/api/sceditor/
Michael_vx

Title :
Gender : Male
Age : 24
Posts : 290
Points : 1372
Reputation : 74
Language : Arabic
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://miccsoft.net https://www.facebook.com/Michaelvx2008

PostMichael_vx on Wed 04 Mar 2015, 17:37

will i still did not get the point yet
but i think if i tried i might get something
the code you provided as ex im not sure about it
but what is the forumotion Editor ID
as i know if i forced the original editor to be removed and the other Editor might take the place easy
and by the way
the code of color control is now cooler and much better
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8395
Reputation : 2010
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Thu 05 Mar 2015, 04:11

The ID of the editor is at the selector query before the sceditor instance. i.e. #text_editor_textarea. There's a built in function for the sceditor that allows you to destroy the editor.
Code:
$('#text_editor_textarea').sceditor('instance').destroy(); // destroy the editor
Ape

Title :
Gender : Male
Posts : 99
Points : 1048
Reputation : 23
Language : English i think
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostApe on Sat 08 Oct 2016, 16:16

This don't show the colors in the dropdown in Firefox 49.0.1 is there a fix to this please all the text is black.
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8395
Reputation : 2010
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome 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 12 Oct 2016, 13:24

@Ape wrote:This don't show the colors in the dropdown in Firefox 49.0.1 is there a fix to this please all the text is black.
Well you already saw my other posts, so you know I'll be looking into this, BUT ANYWAYS I think I'll try and browse in Firefox for a little while to see if I can get the problem to occur on my end. Unfortunately if I can't inspect the problem I can't fix it which is a huge drawback. grrr!!!!! I might give that site Val posted a try too.

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