Web based family history software

Question WT 1.7.1 - settings & themes

  • otmar.mayr
  • Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
8 years 8 months ago #1 by otmar.mayr
WT 1.7.1 - settings & themes was created by otmar.mayr
I use a changed color theme and don't want, that the user changes the theme or the Palette. In WT 1.7.1 it is possible to hide the dropdown selector for the themes, but not the palette.

Why is that different now as before?

Changes at the themes should are now much easier as earlier? I cannot see a better way. I think the themes should get a much better setting possibility.

It would be great, if I could say p.e. the upper part of the menu should get the color #4B6B94 and the lower part the color #FFFFFF.

#topMenu {background:#FFFFFF;}

Another point is the badly readable histo text. I must change this code ever on "1".

rela,.histo{opacity:0,7}" on "1."

The big problem is to find this code. I think this should also be changeable in the themes settings.

With each WT upgrade I have to integrate this part of Gedcom Tag:

-> from here
case '_ADPN': return /* I18N: gedcom tag _ADPN */ WT_I18N::translate('Adoptive name');
case '_FARN': return /* I18N: gedcom tag _FARN */ WT_I18N::translate('Farm name');
case '_FKAN': return /* I18N: gedcom tag _FKAN */ WT_I18N::translate('Formal name');
case '_FRKA': return /* I18N: gedcom tag _FRKA */ WT_I18N::translate('Formerly known as');
case '_INDG': return /* I18N: gedcom tag _INDG */ WT_I18N::translate('Indigenous name');
case '_OTHN': return /* I18N: gedcom tag _OTHN */ WT_I18N::translate('Other name');
case '_RELN': return /* I18N: gedcom tag _RELN */ WT_I18N::translate('Religious name');

-> to here

With WT version 1.7.1 I cannot find anymore the right place to add this part.

www.verwandten.info / PHP-Version 8.2 / webtrees 2.1.18

Please Log in or Create an account to join the conversation.

More
8 years 8 months ago - 8 years 8 months ago #2 by JustCarmen
Replied by JustCarmen on topic WT 1.7.1 - settings & themes
Attached you will find your custom theme. It cost me less then 10 minutes to make it. And once you got acquaintance with the new theme system you will see how easy it is to make your own custom theme.

I walk you through.

First of all copy the folder themes/_custom and rename it. I called it 'custom_colors', but you can call it whatever you want.

Modify the file theme.php

If copied the file from the _custom theme you will find a lot of comments in the file with an explanation of the functions. Look carefully at the naming of the different parts. The id must be the same name as the folder name. The class name must be returned at the end. In this custom theme we extend the ColorsTheme instead of the webtreesTheme so this must be changed. The 'use' just below the credits must return the full namespace of the ColorsTheme class.

The only function I've added is the function to create the secondary menu without the colors palette. This is simply a copy of the function in the colors theme which you wil find in App/Themes/ColorsTheme. I removed the palette entry from the menu ($this->palette). Further I removed the example function menuLists because we don't need it.

Code:
<?php namespace OtmarMayer\MyCustomTheme; /** * webtrees: online genealogy * Copyright (C) 2015 webtrees development team * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * You should have received a copy of the GNU General Public License * along with this program. If not, see <http://www.gnu.org/licenses/>. */ use Fisharebest\webtrees\Theme\ColorsTheme; /** * Class CustomTheme - This is a template showing how to create a custom theme. * * Since theme folders beginning with an underscore are reserved for special * use, you should copy this entire folder ("themes/_custom") to a new name. * For example, "themes/custom". You should also rename the class. * * In this example, we are extending the webtrees theme, but you could * also extend any of the core themes, or even the base theme. * * Only the first two functions are required: themeId() and themeName(). * The rest are just examples, and should be removed in actual themes. */ class CustomColorsTheme extends ColorsTheme { /** * Give your theme a unique identifier. Themes beginning with an underscore * are reserved for internal use. * * {@inheritdoc} */ public function themeId() { return 'custom_colors'; } /** * Give your theme a name. This is shown to the users. * Use HTML entities where appropriate. e.g. “Black &amp; white”. * * You could use switch($this->locale) {} to provide a translated versions * of the theme name. * * {@inheritdoc} */ public function themeName() { return 'Custom Colors'; } /** * This is an example function which shows how to add an additional CSS file to the theme. * * {@inheritdoc} */ public function stylesheets() { $css_files = parent::stylesheets(); // Put a version number in the URL, to prevent browsers from caching old versions. $css_files[] = WT_BASE_URL . 'themes/custom_colors/custom-1.0.css'; return $css_files; } /** * This function is copied from App/Theme/ColorsTheme * * $this->menuPalette() removed * * {@inheritdoc} */ protected function secondaryMenu() { return array_filter(array( $this->menuPendingChanges(), $this->menuMyPages(), $this->menuFavorites(), $this->menuThemes(), $this->menuLanguages(), $this->menuLogin(), $this->menuLogout(), )); } } return new CustomColorsTheme(); // This script must return a theme object.

The only file you then should add is the css file which will hold ONLY the changes from the Colors theme. This file is referenced in the theme.php file as custom-1.0.css. In this case your file will look like this:
Code:
/* ======== Colors theme changes ========== */ header { background: #4B6B94; } .primary-menu { background:#FFFFFF; } .rela, .histo { opacity:1; }

And you are done. The big advantage of the new theme system is that you don't lose your changes with an upgrade.


File Attachment:

File Name: custom_col...7-20.zip
File Size:2 KB



The Gedcom Tags are in the file App/GedcomTag.php.


Carmen
Designer of the JustLight theme (comes with a light and dark color palette), Fancy Imagebar, Fancy Research Links and Fancy Treeview for webtrees 2


Check my website at www.justcarmen.nl
Attachments:
Last edit: 8 years 8 months ago by JustCarmen. Reason: Error in css

Please Log in or Create an account to join the conversation.

  • otmar.mayr
  • Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
8 years 8 months ago #3 by otmar.mayr
Replied by otmar.mayr on topic WT 1.7.1 - settings & themes
Hi Carmen!

Thanks a lot for your help. Without your help I couldn't manage. It works again.

Greetings, Otmar

www.verwandten.info / PHP-Version 8.2 / webtrees 2.1.18

Please Log in or Create an account to join the conversation.

More
8 years 8 months ago #4 by larrydanger
Replied by larrydanger on topic WT 1.7.1 - settings & themes
Evidently it is really necessary to use the _custom theme in your distribution.

The above theme will not work because webtrees must be capitalized in the use statement my distribution.

Laurence Eighner Hexamer

Please Log in or Create an account to join the conversation.

More
8 years 8 months ago #5 by JustCarmen
Replied by JustCarmen on topic WT 1.7.1 - settings & themes
Code:
The above theme will not work because webtrees must be capitalized in the use statement my distribution.

You are right. This has to do with the forum settings... forgot to mention it here.

See: www.webtrees.net/index.php/en/forum/help...ontroller-page#53882


Carmen
Designer of the JustLight theme (comes with a light and dark color palette), Fancy Imagebar, Fancy Research Links and Fancy Treeview for webtrees 2


Check my website at www.justcarmen.nl

Please Log in or Create an account to join the conversation.

More
8 years 7 months ago #6 by Chap
Replied by Chap on topic WT 1.7.1 - settings & themes
In building a custom theme....

I am using the xenea theme as the base theme and extending the CSS as shown by Carmen as per her suggestions. That's all fine and dandy.

How can I get the custom theme.php to look at an alternative images folder to override images in the xenea theme?

Chap

Harlan County Jones' @ www.jonesipedia.com
Williamsburg Theme Project

Please Log in or Create an account to join the conversation.

More
8 years 7 months ago #7 by fisharebest
Replied by fisharebest on topic WT 1.7.1 - settings & themes
> How can I get the custom theme.php to look at an alternative images folder to override images in the xenea theme?

The images are referenced in the .CSS file - and are relative to it.

You could add your own CSS definitions after the existing ones which point to an image folder in your own theme.

Greg Roach - greg@subaqua.co.uk - @fisharebest@phpc.social - fisharebest.webtrees.net

Please Log in or Create an account to join the conversation.

More
8 years 7 months ago #8 by JustCarmen
Replied by JustCarmen on topic WT 1.7.1 - settings & themes
Hi Chap,

I assume you have linked your own css file from your custom theme.php file (in the function 'stylesheets()'.

The xenea folder has a structure like this:



Use the same folder structure in your custom theme.

Then you just have to place the images you want to change in your custom images folder.
In your stylesheet you copy the styles from the xenea theme which contain the links to the images. Most icons can be found in the icon section of the xenea stylesheet (at this time somewhere near line 3400)

Suppose you want to change the media-icon.

You will find this reference in the xenea theme:
Code:
.icon-button_media { width: 18px; height: 16px; background-image: url(images/buttons/media.png); vertical-align: middle; }

In your own stylesheet you just take over the link to the background image:
Code:
.icon-button_media { background-image: url(images/buttons/media.png); }

Unless your icon has another width and height than you should take over that too.

Place your image in your custom folder images/buttons

Or if you rather have them all in the same folder than place the image in the folder css/images and change the link accordingly to: images/media.png


Carmen
Designer of the JustLight theme (comes with a light and dark color palette), Fancy Imagebar, Fancy Research Links and Fancy Treeview for webtrees 2


Check my website at www.justcarmen.nl
Attachments:

Please Log in or Create an account to join the conversation.

More
8 years 7 months ago #9 by Chap
Replied by Chap on topic WT 1.7.1 - settings & themes
Thanks Greg, Thanks Carmen,

I'm getting my custom.css through stylesheets() perfectly.

I can't seem to get the images folder path as Carmen suggests. The theme.php wants to default to the xenea directory path for images.

I'll keep working on it. :)

Thanks again.

Chap

Harlan County Jones' @ www.jonesipedia.com
Williamsburg Theme Project

Please Log in or Create an account to join the conversation.

More
8 years 7 months ago #10 by Chap
Replied by Chap on topic WT 1.7.1 - settings & themes
Ahhh.....

I had to add this to the theme.php file ...

public function assetUrl() {
return 'themes/path_to_my_custom_theme/css-1.7.0/';
}


Very cool..

Thanks!
Chap

Harlan County Jones' @ www.jonesipedia.com
Williamsburg Theme Project

Please Log in or Create an account to join the conversation.

More
8 years 7 months ago #11 by fisharebest
Replied by fisharebest on topic WT 1.7.1 - settings & themes
Doing this means you need to replace (and maintain) *all* the CSS.

If you were to simply append your own stylesheet (see the example in the custom theme), you'd only need to maintain your differences - i.e. your icons. You'd automatically pick up any changes to the core theme.

Although you are free to replace/maintain any part of the theming, the new design was specifically created to allow you to specify just your differences from a core theme.

Greg Roach - greg@subaqua.co.uk - @fisharebest@phpc.social - fisharebest.webtrees.net

Please Log in or Create an account to join the conversation.

More
8 years 7 months ago #12 by Chap
Replied by Chap on topic WT 1.7.1 - settings & themes
Greg,

Thanks! Indeed it does. :)

Chap

Harlan County Jones' @ www.jonesipedia.com
Williamsburg Theme Project

Please Log in or Create an account to join the conversation.

More
8 years 5 months ago #13 by Hagershorn
Replied by Hagershorn on topic WT 1.7.1 - settings & themes
Thank you very much. Successfully added new theme with added menu item in the header. Now need to make it the same colour. Tomorrow!

Regards
John H

John H
Windows 7 webtrees 1.7.2
8Gb ram, 3.9GHz quad core, mysql 5.5.32 php 5.3.3 Apache 2.2.14
www.hawthornthwaite.net/webtrees
John H

Please Log in or Create an account to join the conversation.

Powered by Kunena Forum
}