Surname Cloud

[Geoff1959]

Hi good morning,

I would like to change the font and colour of the names in the surname cloud does anybody know where this is ?

Regards,

Geoff

[Newfloridian]

Hi Geoff

I haven't explored the coding for the Surname Cloud in any great depth but there is a clue in the comment at line 115 of the file surname_cloud.class.php (which is in the root directory):

// Note: the appearance of the names is controlled by class surnames-cloud which is defined in templatestyle.css

In fact it isn't there but was presumably moved to genstyle.css when the cloud was incorporated into the mainstream TNG:

Line  1807 (et sec):

/* styles for home page surname cloud post */

Cheers Alan

[Katryne]

Hello !

I found out that colours were specified in template style.css of folder css/ for the specific template in use. (from line 1203 for template 12).

If I change the colour directly in the original templatestyle.css, the colour changes to what I want.

If I let templatestyle.css to its original state and enter the modification in mytngstyle.css, the modification is not taken into account.

Why ?

Below if an example of what I modified :

a.size8      { color: rgb(0,115,0); }
a.size8:link    { color: rgb(0,115,0); }
a.size8:visited { color: rgb(0,115,0); }

Thanks for any help.

[XerxX]

Hi Katryne,

It should work. I copied the definitions from templatestyle.css and pasted them last in mytngstyle.css.

The file didn't use rgb(r, g, b) as in your example but #rrggbb.

However; I changed all colours to red #ff0000:

a.size1      { color: #ff0000; }
a.size1:link    { color: #ff0000; }
a.size1:visited { color: #ff0000; }

a.size2      { color: #ff0000; }
a.size2:link    { color: #ff0000; }
a.size2:visited { color: #ff0000; }

a.size3      { color: #ff0000; }
a.size3:link    { color: #ff0000; }
a.size3:visited { color: #ff0000; }

etc. all the way down. The result is:

All red. (This is template 12)

Three thoughts:

1) Empty your cache

2) Make sure that the definitions are at the end of mytngstyle.css - or at least after all a (anchor) definitions.

3) Change the RGB function to RGB values (as in my example). Although I don't understand why the rgb(r, g, b) function should not work..?

 

HTH

Erik

 

[Katryne]

Thanks Erik ! I'll try in the morning, when the sky will be clear and so will my brain.

[stores]

Hello Katryne

I actually went through this a few months back and found... 

The name colors are made in the css\mytngstyle.css file. My changes, which are to the color then size, which are at the are at the end of mytngstyle.css as Erik pointed out, are as follows...

/* my colors for the home page surname cloud names begin (Originally code is from the templatestyle.css file in later tng templates */

a.size1      { color: #cc0052; }
a.size1:link    { color: #cc0052; }
a.size1:visited { color: #cc0052; }

a.size2      { color: #007fff; }
a.size2:link    { color: #007fff; }
a.size2:visited { color: #007fff; }

a.size3      { color: #330066; }
a.size3:link    { color: #330066; }
a.size3:visited { color: #330066; }

a.size4      { color: #e64d00; }
a.size4:link    { color: #e64d00; }
a.size4:visited { color: #e64d00; }

a.size5      { color: #0000cc; }
a.size5:link    { color: #0000cc; }
a.size5:visited { color: #0000cc; }

a.size6      { color: #768811; }
a.size6:link    { color: #768811; }
a.size6:visited { color: #768811; }

a.size7      { color: #005300; }
a.size7:link    { color: #005300; }
a.size7:visited { color: #005300; }

a.size8      { color: #19c8c2; }
a.size8:link    { color: #19c8c2; }
a.size8:visited { color: #19c8c2; }

a.size9      { color: #6C3483; }
a.size9:link    { color: #6C3483; }
a.size9:visited { color: #6C3483; }

a.size0      { color: #7c0a02; }
a.size0:link    { color: #7c0a02; }
a.size0:visited { color: #7c0a02; }

/* my colors for the home page surname cloud names end */

/* my styles for the home page surname cloud names begin (Original code starts on line 1859 of the genstyle.css file */

a.size1      { font-size: 190%; }
a.size2      { font-size: 180%; }
a.size3      { font-size: 170%; }
a.size4      { font-size: 160%; }
a.size5      { font-size: 150%; }
a.size6      { font-size: 140%; }
a.size7      { font-size: 130%; }
a.size8      { font-size: 120%; }
a.size9      { font-size: 110%; }
a.size0      { font-size: 100%; }

/* my styles for the home page surname cloud names end */

But to actually get the Surnames to change color depends on the percentages of a given Surname compared to the most populated surname. I had to play with the percentages in the surname_cloud.class.php file which started on line 84.

I have one Surname with 698 relations and the next highest is 165, then a couple with 134... So the core percentages only resulted in something like 4 or 5 different colors, so i just played with the percentages until i saw 10 different colors. 

My changes to the surname_cloud.class.php are as follows...

            // Assign a class to each surname based upon relative number to most used surname
            $percent = 100 * $name['count'] / $SurnameMax;
            if ($percent > 98) {
                $class = 1;
            } else if ($percent > 20) {
                $class = 2;
            } else if ($percent > 16) {
                $class = 3;
            } else if ($percent > 12) {
                $class = 4;
            } else if ($percent > 11) {
                $class = 5;
            } else if ($percent > 9) {
                $class = 6;
            } else if ($percent > 6) {
                $class = 7;
            } else if ($percent > 4) {
                $class = 8;
            } else if ($percent > 3 ) {
                $class = 9;
            } else {
                $class = 0;
            }
            $surnames[$idx]['class'] = $class;
        }

        // Clean up

Hope this helps...

[Katryne]

Thank you you two. Now, I can do as I want !

Do you know is there is a way to make changes in php the way it's done for css. I mean is there a way in TNG to write modified php code in a kind of extra file, which would override original TNG files in order not to fork original files. This way, my php modifications would not be overwritten with next TNG release. The way it works for css with mytngstyle.css.

In my online album cms made with Piwigo, there is a plugin called Local File Editor with enables this "local" changes.

https://genealogie.revestou.fr/

[XerxX]

I'm glad that I could help you a bit, Katryne.

Regarding

3 hours ago, Katryne said:

is there a way in TNG to write modified php code in a kind of extra file, which would override original TNG files in order not to fork original files.

If I don't misunderstand; you are describing mods They edit the PHP code to suit your wishes.

And because you uninstall them before doing any TNG updates the changes are not overwritten (you install them again later).

 

Have a good day!

Erik

[Katryne]

Yes, that is like mods, but I do not need to unsinstall then re-install them when there is an update of the core. The "local" files are never erased by an update and you can edit them within the administration of the CMS, with a simple editor. Not need to open files by ftp.

 

[XerxX]

That image looks a bit like it corresponds to TNG's customconfig.php

There you can set variables (TNG original or your own) to whatever you want. I use it for "private" variables in some mods (Forum, Comments...) but of course you can edit it "by hand".

It is included when tng_begin.php is called (at the start of pages), and it's read last of the configs so your values are used.

/Erik