Before asking for help please read "How to request help" by clicking on that tab above here.
  • Page:
  • 1
  • 2

TOPIC: [SOLVED] Créer un thème

Créer un thème 3 weeks 2 hours ago #1

  • jbyvosges
  • jbyvosges's Avatar
  • Offline
  • Junior
  • Français mais moi je comprendre l'anglois.
  • Posts: 214
Bonjour

Je ne trouve aucune explication pour créer mon propre thème. La page https://wiki.webtrees.net/en/Themes ne contient que très peu de choses.
Je vais devoir continuer à utiliser mes thèmes en 1.7 (dolman.fr.fr et lesbarbry.fr) malgré les problèmes de sécurité.
Je trouve que plus le temps passe et plus webtrees devient compliqué. J'ai essayé de mettre mes fichiers sous module_v4, mais seuls les fichiers css semblent influer.
Est-ce que j'utilise la version 2 prématurément ?

I can't find any explanation for creating my own theme. The page [url = https: //wiki.webtrees.net/en/Themes] https://wiki.webtrees.net/en/Themes [/ url] contains very little.
I will have to continue using my themes in 1.7 ([url = http: //dolman.fr] dolman.fr [/ url] .fr and [url = http: //dolman.fr] lesbarbry.fr [/ url] ) despite security concerns.
I find that the more time passes, the more complicated webtrees becomes. I tried to put my files under module_v4, but only the css files seem to influence.
Do I use version 2 prematurely?
PHP 7.2.19 MySql 5.6.46
Webtrees 1.7.16 et 2.0.3
Navigateur : Firefox 74.0
O.S. : Linux Ubuntu 16.04 64 bits et Ubuntu 19.10

https://dolman.fr/ https://lesbarbry.fr/
The administrator has disabled public write access.

Créer un thème 2 weeks 6 days ago #2

  • fisharebest
  • fisharebest's Avatar
  • Offline
  • Administrator
  • Posts: 12560
> I can't find any explanation for creating my own theme.

webtrees includes:

* instructions for creating modules - /modules_v4/README.md
* an example theme module - /modules_v4/example-theme.disable

To create a theme
1) make a copy of example-theme.disable
2) edit it to insert your own name, etc.
3) replace the .CSS file with your own.
4) if you do not want to replace any HTML templates, delete that code.
Greg Roach - This email address is being protected from spambots. You need JavaScript enabled to view it. - fisharebest.webtrees.net
The administrator has disabled public write access.

Créer un thème 2 weeks 6 days ago #3

  • jbyvosges
  • jbyvosges's Avatar
  • Offline
  • Junior
  • Français mais moi je comprendre l'anglois.
  • Posts: 214
Merci Greg.

J'avais déjà lu ce fichier Markdown et je ne pense pas que c'est avec ces instructions très sommaires quel(on peut créer son propre thème.
I had already read this Markdown file and I don't think it is with these very brief instructions that we can create our own theme.
Regards,
PHP 7.2.19 MySql 5.6.46
Webtrees 1.7.16 et 2.0.3
Navigateur : Firefox 74.0
O.S. : Linux Ubuntu 16.04 64 bits et Ubuntu 19.10

https://dolman.fr/ https://lesbarbry.fr/
The administrator has disabled public write access.

Créer un thème 2 weeks 6 days ago #4

  • ric2015
  • ric2015's Avatar
  • Offline
  • Junior
  • Posts: 130
jbyvosges wrote:
I had already read this Markdown file and I don't think it is with these very brief instructions that we can create our own theme.

Why not - What is missing? We can expand the instructions, but you'll have to give us a bit more to work with.

Have you actually tried to create a custom theme following these instructions? What, specifically, did not work?
Richard

webtrees 1.7.15 at cissee.de/webtrees
Custom modules for 1.7.x and 2.x (Extended Relationships, Gov4Webtrees, Shared Places, Compact Themes Adjuster) available at cissee.de
The administrator has disabled public write access.

Créer un thème 2 weeks 6 days ago #5

  • jbyvosges
  • jbyvosges's Avatar
  • Offline
  • Junior
  • Français mais moi je comprendre l'anglois.
  • Posts: 214
Thanks, Richard.

For example which file to modify or add to obtain the title between two images (as on dolman.fr)
I placed a copy of resources / views / default.phtml in my theme directory, under module_v4, but it is not taken into account.
Ditto for my images, which I put under resources / img: it doesn't work.

"To install a module, copy its folder to` modules_v4` "What folder? There is no folder in apps / Module

Can we recover the css files from the old version 1.7?

Really missing a step to step example to understand what to do

I also tried vesta and compact-theme.

I was developper (especially C++) before I am retired (more than ten years ago) but the programming in php has evolved and I am overwhelmed ... I hope you hunderstand my English.
PHP 7.2.19 MySql 5.6.46
Webtrees 1.7.16 et 2.0.3
Navigateur : Firefox 74.0
O.S. : Linux Ubuntu 16.04 64 bits et Ubuntu 19.10

https://dolman.fr/ https://lesbarbry.fr/
The administrator has disabled public write access.

Créer un thème 2 weeks 6 days ago #6

  • ric2015
  • ric2015's Avatar
  • Offline
  • Junior
  • Posts: 130
jbyvosges wrote:
I placed a copy of resources / views / default.phtml in my theme directory, under module_v4, but it is not taken into account.
You have to register your custom view, so that it actually replaces a default view. This is shown in the module 'example-theme.disable', in 'public function boot()'.

In general, note that all resources (images, css, custom views, i18n files) have to be made available explicitly by your custom module. You cannot just put files into sub-folders and have them picked up automatically. See this thread for a more detailed description. Css files in particular can be added rather easily though, also as shown in 'example-theme.disable', as Greg already pointed out. Just start by following his steps 1) to 4), and take it from there.

jbyvosges wrote:
"To install a module, copy its folder to` modules_v4` "What folder?
Just like you copied the folder containing a webtrees 1.x custom module to 'modules_v3'.

jbyvosges wrote:
Can we recover the css files from the old version 1.7?
There may be some css classes that haven't changed, but I guess in most cases it's actually easier to start from scratch. Not sure about this, though, I haven't done much with css yet.
Richard

webtrees 1.7.15 at cissee.de/webtrees
Custom modules for 1.7.x and 2.x (Extended Relationships, Gov4Webtrees, Shared Places, Compact Themes Adjuster) available at cissee.de
Last Edit: 2 weeks 6 days ago by ric2015.
The administrator has disabled public write access.

Créer un thème 2 weeks 6 days ago #7

  • jbyvosges
  • jbyvosges's Avatar
  • Offline
  • Junior
  • Français mais moi je comprendre l'anglois.
  • Posts: 214
I think I will leave out and continue with 1.7. It becomes too complicated for me.
PHP 7.2.19 MySql 5.6.46
Webtrees 1.7.16 et 2.0.3
Navigateur : Firefox 74.0
O.S. : Linux Ubuntu 16.04 64 bits et Ubuntu 19.10

https://dolman.fr/ https://lesbarbry.fr/
The administrator has disabled public write access.

Créer un thème 2 weeks 6 days ago #8

  • ric2015
  • ric2015's Avatar
  • Offline
  • Junior
  • Posts: 130
jbyvosges wrote:
I think I will leave out and continue with 1.7. It becomes too complicated for me.

Well, that seems to be a common reaction unfortunately. It's not that complicated actually, once you understand the basics. Did you even look at the examples?
Richard

webtrees 1.7.15 at cissee.de/webtrees
Custom modules for 1.7.x and 2.x (Extended Relationships, Gov4Webtrees, Shared Places, Compact Themes Adjuster) available at cissee.de
The administrator has disabled public write access.
Do you need a web hosting solution for your webtrees site?
If you prefer a host that specialises in webtrees, the following page lists some suppliers able to provide one for you: 

Créer un thème 2 weeks 6 days ago #9

  • jbyvosges
  • jbyvosges's Avatar
  • Offline
  • Junior
  • Français mais moi je comprendre l'anglois.
  • Posts: 214
Yes I've a look to example-theme.disable/ compact_webtrees-master/ and vesta files.

However, I don't have much to modify, apart from the css file (which is easy). I think I have just need to modify the file that contains the "DOCTYPE" . (copy of resources/views/layouts/default.phtml but I don't know how to register that file and where I have to put it.
I don't understand anything about the file arrangement.
PHP 7.2.19 MySql 5.6.46
Webtrees 1.7.16 et 2.0.3
Navigateur : Firefox 74.0
O.S. : Linux Ubuntu 16.04 64 bits et Ubuntu 19.10

https://dolman.fr/ https://lesbarbry.fr/
The administrator has disabled public write access.

Créer un thème 2 weeks 5 days ago #10

  • Gustine
  • Gustine's Avatar
  • Offline
  • Junior
  • Posts: 171
jbyvosges wrote:
I think I will leave out and continue with 1.7. It becomes too complicated for me.
Me too.
I managed to follow the changes until the beta 4 version but then the upheavals were too great. You now need to be a specialist to rewrite the modules. This is not my case.

jbyvosges, if you succeed in adapting your theme, consider publishing it please ;-)
webtrees 1.7.16 (+ module sosa17 + vytux_menu + ancestral fan chart + openstreetmap) - Mageia 7 (php 7.3)
The administrator has disabled public write access.

Créer un thème 2 weeks 5 days ago #11

  • ric2015
  • ric2015's Avatar
  • Offline
  • Junior
  • Posts: 130
jbyvosges wrote:
I don't know how to register that file and where I have to put it.

Well, I'm not sure if it makes sense to continue this thread. I'd like to help, but we don't seem to make any progress. I already described how to do this specifically!

One more attempt: Look at the example-theme custom module. Actually, enable it and experiment with it. It has a custom view 'chart-box.phtml' that replaces the default 'chart-box.phtml'. This is done in the 'boot()' function. You want to the same with 'default.phtml'. It can't be that hard to adjust this example accordingly?

@Greg: This doesn't look promising in general, we seem to lose many custom module developers. Any ideas how to handle this better?
Richard

webtrees 1.7.15 at cissee.de/webtrees
Custom modules for 1.7.x and 2.x (Extended Relationships, Gov4Webtrees, Shared Places, Compact Themes Adjuster) available at cissee.de
The administrator has disabled public write access.

Créer un thème 2 weeks 4 days ago #12

  • jbyvosges
  • jbyvosges's Avatar
  • Offline
  • Junior
  • Français mais moi je comprendre l'anglois.
  • Posts: 214
Hello.
I think that the few examples are intended for people who know very well modern programming in php. For the majority, the examples are abstruse:
use Fisharebest \ webtrees \ Module \ ModuleCustomInterface;
: Which modules to declare here and why ?
return new class extends MinimalTheme implements ModuleCustomInterface {
: for me, it's Chinese.
View::registerCustomView('::default', $this->name() . '::default'); : don't work ;my file default.phtml is s not taken into account.
My css file :
.icon-silhouette-M { content: url(img/silhouette_male_small.png);} ; : don't work
.icon-silhouette-M { content: url(/img/silhouette_male_small.png);}; : don't work
.icon-silhouette-M { content: url(resources/img/silhouette_male_small.png);}; : don't work

The solution would be, eventually, to write a very detailed Wiki article or a guide explaining step by step the procedure to follow.

I spent a lot of time trying to understand how the first 1.x versions worked. I would be very disappointed that all of this was lost

I imagine that the programmers, Greg and the whole team are very involved in this project and it would be a shame to lose customers because the product is certainly very good.

Good luck !
PHP 7.2.19 MySql 5.6.46
Webtrees 1.7.16 et 2.0.3
Navigateur : Firefox 74.0
O.S. : Linux Ubuntu 16.04 64 bits et Ubuntu 19.10

https://dolman.fr/ https://lesbarbry.fr/
The administrator has disabled public write access.

Créer un thème 2 weeks 4 days ago #13

  • fisharebest
  • fisharebest's Avatar
  • Offline
  • Administrator
  • Posts: 12560
> .icon-silhouette-M { content: url(img/silhouette_male_small.png);} ; : don't work

For images, you have a few options.

1) If this theme is just for your own site, then use absolute URLs (start with "/") instead of relative URLs.

2) Embed the image using a "data" URL. This is recommended for performance.

e.g. css-tricks.com/data-uris/

There are sites that will convert a .PNG file to a data URL.

e.g. onlineimagetools.com/convert-image-to-data-uri
Greg Roach - This email address is being protected from spambots. You need JavaScript enabled to view it. - fisharebest.webtrees.net
The administrator has disabled public write access.

Créer un thème 2 weeks 4 days ago #14

  • jbyvosges
  • jbyvosges's Avatar
  • Offline
  • Junior
  • Français mais moi je comprendre l'anglois.
  • Posts: 214
1) If this theme is just for your own site, then use absolute URLs (start with "/") instead of relative URLs
: This is what I started to do; it's long: we can't just copy / paste existing css files, but it works.
2) Embed the image using a "data" URL. This is recommended for performance.
: I didn't know the way to do it. Thanks, Greg: I just tried (http://jpillora.com/base64-encoder/) . That works fine. Maybe I could copy / paste a min.css file.

My biggest problem at this time is to use my own default.phtml file. The thing escapes me, but it doesn't have to be very complicated.

regards
PHP 7.2.19 MySql 5.6.46
Webtrees 1.7.16 et 2.0.3
Navigateur : Firefox 74.0
O.S. : Linux Ubuntu 16.04 64 bits et Ubuntu 19.10

https://dolman.fr/ https://lesbarbry.fr/
The administrator has disabled public write access.

Créer un thème 2 weeks 4 days ago #15

  • fisharebest
  • fisharebest's Avatar
  • Offline
  • Administrator
  • Posts: 12560
> My biggest problem at this time is to use my own default.phtml file.

Tell us exactly what you did?
Greg Roach - This email address is being protected from spambots. You need JavaScript enabled to view it. - fisharebest.webtrees.net
The administrator has disabled public write access.

Créer un thème 2 weeks 4 days ago #16

  • jbyvosges
  • jbyvosges's Avatar
  • Offline
  • Junior
  • Français mais moi je comprendre l'anglois.
  • Posts: 214
I want to change webtrees/resources/views/layouts/default.phtml to my own.

In module.php 1 have put :
public function boot(): void
    {   
        // Register a namespace for our views.
        View::registerNamespace($this->name(), $this->resourcesFolder() . 'views/');

        // Replace an existing view with our own version.
        View::registerCustomView('::default', $this->name() . '::default');

and a copy of default.phtm in my resources/views/layouts directory
I did not think it would work and, indeed, it does not work : my file is ignored.
I just want to place some information before the main menu.... as in dolman.fr
PHP 7.2.19 MySql 5.6.46
Webtrees 1.7.16 et 2.0.3
Navigateur : Firefox 74.0
O.S. : Linux Ubuntu 16.04 64 bits et Ubuntu 19.10

https://dolman.fr/ https://lesbarbry.fr/
The administrator has disabled public write access.

Créer un thème 2 weeks 4 days ago #17

  • fisharebest
  • fisharebest's Avatar
  • Offline
  • Administrator
  • Posts: 12560
You are replacing the webtrees view "layotus/default", not "default"

> a copy of default.phtm in my resources/views/layouts directory

You are also replacing it with "layouts/default", not "default

So, you need to register it with:

View::registerCustomView('::layouts/default', $this->name() . '::layouts/default');

> I just want to place some information before the main menu.... as in dolman.fr

Can this be done with CSS? Let me investigate...

Note that layouts/default.phtml is a large file.
Things might change.

I plan to split it into smaller parts.
Then, you will only need to replace that small part.
Greg Roach - This email address is being protected from spambots. You need JavaScript enabled to view it. - fisharebest.webtrees.net
The administrator has disabled public write access.

Créer un thème 2 weeks 3 days ago #18

  • jbyvosges
  • jbyvosges's Avatar
  • Offline
  • Junior
  • Français mais moi je comprendre l'anglois.
  • Posts: 214
Thanks Greg! Always very effective!
Even if I don't understand what I'm doing, it works.
PHP 7.2.19 MySql 5.6.46
Webtrees 1.7.16 et 2.0.3
Navigateur : Firefox 74.0
O.S. : Linux Ubuntu 16.04 64 bits et Ubuntu 19.10

https://dolman.fr/ https://lesbarbry.fr/
The administrator has disabled public write access.

Créer un thème 1 week 5 days ago #19

  • jbyvosges
  • jbyvosges's Avatar
  • Offline
  • Junior
  • Français mais moi je comprendre l'anglois.
  • Posts: 214
Je reviens vers vous, après quelques jours. Mon thème avance bien. Quelques réflexions :
  • Blocs par défaut : fonctionne maintenant avec 2.0.3
  • recherche d'éventuelles erreurs : ne fonctionne toujours pas
    (Argument 3 passed to Fisharebest\Webtrees\Http\Controllers\AdminTreesController::checkReverseLink() must be of the type string
    )
  • Places flags ? ne fonctionne pas ? dans quel répertoire mettre "places" (anciennement modules_v3/googlemap/places). Ces flags sont-ils encore utilisés ?
  • où mettre les traductions personnalisées (anciennement data/language/fr.php)

I come back to you after a few days. My theme is progressing well. Some reflections:
  • Default blocks: now works with 2.0.3
  • search for possible errors: still does not work (
    Argument 3 passed to Fisharebest \ webtrees \ Http \ Controllers \ AdminTreesController :: checkReverseLink () must be of the type string
    )
  • Places flags? does not work ? in which directory to put "places" (formerly modules_v3 / googlemap / places). Are these flags still used?
  • where to put custom translations (formerly data / language / fr.php)
When I see the differences between versions 2.0.2 and 2.0.3, I wonder if our developers have enough time to sleep ...
PHP 7.2.19 MySql 5.6.46
Webtrees 1.7.16 et 2.0.3
Navigateur : Firefox 74.0
O.S. : Linux Ubuntu 16.04 64 bits et Ubuntu 19.10

https://dolman.fr/ https://lesbarbry.fr/
The administrator has disabled public write access.

Créer un thème 1 week 5 days ago #20

  • fisharebest
  • fisharebest's Avatar
  • Offline
  • Administrator
  • Posts: 12560
> earch for possible errors: still does not work

Do you have XREFs that are just numbers (no letters)?
Are you using PHP 7.4?

If yes, please create an issue at github.

> places flags? does not work ?

Flags do not currently work. github.com/fisharebest/webtrees/issues/2436

In 1.7, flags were stored in /modules_v3/....
In 2.0, we can only write files to /data and the webserver cannot access these private files

Places/locations needs a lot of work. I plan to rewrite all these together.

> where to put custom translations

You need to include these in your module, using a function "customTranslations()"

You can see an example here:
github.com/fisharebest/webtrees/blob/2.0...able/module.php#L110
Greg Roach - This email address is being protected from spambots. You need JavaScript enabled to view it. - fisharebest.webtrees.net
The administrator has disabled public write access.
  • Page:
  • 1
  • 2
Powered by Kunena Forum