├── README.md
├── Release History
├── custom-css.disable
    ├── module.php
    └── resources
    │   └── css
    │       └── custom.css
└── latest-version.txt


/README.md:
--------------------------------------------------------------------------------
 1 | # webtrees 2 standard theme enhancements version 1.0.19
 2 | 
 3 | <h3>
 4 | <a id="user-content-features" class="anchor" aria-hidden="true" href="#features">
 5 | <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
 6 | <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
 7 | </path>
 8 | </svg>
 9 | </a>Features
10 | </h3>
11 | 
12 | <p>The custom.css file contains enhancements for all <a href="https://www.webtrees.net/" rel="nofollow">webtrees</a> <b> standard themes</b>.  Results may be vary with custom themes such as webtrees-theme-justlight or the Rural theme.</p>
13 | <p>The goal of these changes is for better large screen space utilize as well a improved mobile support.</p>
14 | 
15 | **Special note for large screen monitors with a width of 1680 or greater.  The last selector in the common.css file sets these monitors to use 75% of the screen with for webtrees displays.  If you want webtrees to use 100% of the available screen change the 75% To 100%.
16 | 
17 | 
18 | Style changes are for webtrees 2.0 and later including the beta version. 
19 | =======
20 | 
21 | For a preview of this release see <a href="https://skatekey.net" rel="nofollow">skatekey.net </a>
22 | </p>
23 | 
24 | <h3>
25 | <a id="user-content-installation" class="anchor" aria-hidden="true" href="#installation">
26 | <svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
27 | <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S
28 | 
29 | 
30 | .5 6 13 6z">
31 | </path>
32 | </svg>
33 | </a>Installation
34 | </h3>
35 | <p>
36 | 
37 | There are two ways to use these style changes for <a href="https://www.webtrees.net/" rel="nofollow">webtrees</a>.
38 | 
39 | <ul style="list-style-type: none;" =""="">
40 | 	<li>Option 1 - Install these changes as a webtrees 2 module.</li>
41 | 	<ul style="list-style-type: none;" =""="">
42 | 		<li>Step 1 - download the latest release of the zip file <b><a href="https://github.com/makitso/custom-css/releases/" rel="nofollow">Latest Release</a></b></li>
43 |         <li>Step 2 - unzip into a temporary folder and move the custom-css.disable folder into the modules_v4 folder </li>
44 |         <li>Step 3 - rename the folder custom-css.disable to custom-css</li> 
45 | 	</ul>
46 |     	<li> Option 2 - If you only want these changes to apply to one theme then copy the 		"contents" of the custom.css to the end of the specific style sheet, located in /public/css. 	</li>j
47 | 	<br>
48 |     
49 |     Note: Be sure to clear your browser cache after these changes - Chrome Shift+F5, Firefox F5
50 | </ul>
51 | </p>
52 | 
53 | 
54 | 
55 | <h3><a id="user-content-license" class="anchor" aria-hidden="true" href="#license">
56 | 	<svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>License</h3>
57 | <ul>
58 | <li>Copyright (C) 2025 <a href="https://www.webtrees.net/" rel="nofollow">webtrees</a> development team</li>
59 | </ul>
60 | <p>This program is free software: you can redistribute it and/or modify
61 | it under the terms of the GNU General Public License as published by
62 | the Free Software Foundation, either version 3 of the License, or
63 | (at your option) any later version.</p>
64 | <p>This program is distributed in the hope that it will be useful,
65 | but WITHOUT ANY WARRANTY; without even the implied warranty of
66 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the lol
67 | GNU General Public License for more details.</p>
68 | <p>You should have received a copy of the GNU General Public License
69 | along with this program. If not, see <a href="http://www.gnu.org/licenses/" rel="nofollow">http://www.gnu.org/licenses/</a>.</p>
70 | 


--------------------------------------------------------------------------------
/Release History:
--------------------------------------------------------------------------------
 1 | Versions
 2 | 1.0.0 - Base module:
 3 | /* Limit size of media object on Individual page for large monitors */
 4 | /* Reduce spacing on Individual page */
 5 | /* Inline Individual data for FAB theme */
 6 | /* Slide show controls */
 7 | /* Adjust height for webtrees theme primary menu */
 8 | /* Move style from code to css for tables in Hourglass Chart */
 9 | /* Person box style changes before padding 2 and border 1 are added */
10 | /* Add w-100 selector to family and spouse and compact charts */
11 | /* Fix drop downs on person box */
12 | /* Center text on forms */
13 | /* Add vertical scrolling to small block displays */
14 | /* Add horizontal scroll bars to lists */
15 | /* Touch devices - icons larger */
16 | 
17 | 1.0.1 - Update FAB theme to match spacing for Individual names
18 | 1.0.2 - Update vertical and horizontal scroll bars for specific lists.
19 | 1.0.3 - Tidy up selectors and improve mobile / large screen support
20 | 1.0.4 - Fix validation error
21 | 1.0.5 - Limit image size on individual page for width sizes > 75%
22 | 1.0.6 - Support new container selector container-lg in webtrees 2.0.8
23 | 1.0.7 - Another fix for image size on individual page for width sizes > 75%
24 | 1.0.8 - Add code to play nicer with other custom themes from Carmans
25 | 1.0.9 - Add print controls for individual events
26 | 1.0.10 - Changes necessary to support the development version with bootstrap 5.0
27 | 1.0.11 - Remove bootstrap 5.0 selector that impacted the JustLight theme
28 | 1.0.12 - Monor style changes, remove bootstrap 5 workarounds, make some style unique to colors theme
29 | 1.0.13 - Repackaging of 1.0.12 in a github release, no changes
30 | 1.0.14 - Ensure that chart box sizing only applies to standard webtrees themes
31 | 1.0.15 - Increase font sizeon family display
32 | 1.0.16 - Code to fix Fancy Image Bar and FAB theme problem.
33 | 1.0.17 - Code to set link color.
34 | 1.0.18 - Revert 1.0.17 
35 | 1.0.19 - Limit thumbnail width on individual page for issue #9


--------------------------------------------------------------------------------
/custom-css.disable/module.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | /**
  4 |  * Example theme.  Here we are extending an existing theme.
  5 |  * Instead, you could extend AbstractModule and implement ModuleThemeInterface directly.
  6 |  */
  7 | 
  8 | declare(strict_types=1);
  9 | 
 10 | namespace MyCustomNamespace;
 11 | 
 12 | use Fisharebest\Webtrees\Module\AbstractModule;
 13 | use Fisharebest\Webtrees\Module\ModuleCustomInterface;
 14 | use Fisharebest\Webtrees\Module\ModuleCustomTrait;
 15 | use Fisharebest\Webtrees\Module\ModuleGlobalInterface;
 16 | use Fisharebest\Webtrees\Module\ModuleGlobalTrait;
 17 | 
 18 | return new class extends AbstractModule implements ModuleCustomInterface, ModuleGlobalInterface {
 19 |     use ModuleCustomTrait;
 20 |     use ModuleGlobalTrait;
 21 | 
 22 |     /**
 23 |      * @return string
 24 |      */
 25 |     public function title(): string
 26 |     {
 27 |         return 'Theme modifications';
 28 |     }
 29 | 
 30 |     /**
 31 |      * @return string
 32 |      */
 33 |     public function description(): string
 34 |     {
 35 |         return 'Theme modifications, as used on https://skatekey.net';
 36 |     }
 37 | 
 38 |     /**
 39 |      * The person or organisation who created this module.
 40 |      *
 41 |      * @return string
 42 |      */
 43 |     public function customModuleAuthorName(): string
 44 |     {
 45 |         return 'Rob Peters';
 46 |     }
 47 | 
 48 |     /**
 49 |      * The version of this module.
 50 |      *
 51 |      * @return string  e.g. '1.2.3'
 52 |      */
 53 |     public function customModuleVersion(): string
 54 |     {
 55 |         return '1.0.19';
 56 |     }
 57 | 
 58 |     /**
 59 |      * A URL that will provide the latest version of this module.
 60 |      *
 61 |      * @return string
 62 |      */
 63 |     public function customModuleLatestVersionUrl(): string
 64 |     {
 65 |         return 'https://raw.githubusercontent.com/makitso/custom-css/master/latest-version.txt';
 66 |     }
 67 | 
 68 |     /**
 69 |      * Where to get support for this module.  Perhaps a github respository?
 70 |      *
 71 |      * @return string
 72 |      */
 73 |     public function customModuleSupportUrl(): string
 74 |     {
 75 |         return 'https://github.com/makitso/custom-css/issues';
 76 |     }
 77 | 
 78 |     /**
 79 |      * Where does this module store its resources
 80 |      *
 81 |      * @return string
 82 |      */
 83 |     public function resourcesFolder(): string
 84 |     {
 85 |         return __DIR__ . '/resources/';
 86 |     }
 87 | 
 88 |     /**
 89 |      * Add an additional stylesheet to the header
 90 |      *
 91 |      * @return string
 92 |      */
 93 |     public function headContent(): string
 94 |     {
 95 |         $url = $this->assetUrl('css/custom.css');
 96 | 
 97 |         return '<link rel="stylesheet" href="' . e($url) . '">';
 98 |     }
 99 | };
100 | 


--------------------------------------------------------------------------------
/custom-css.disable/resources/css/custom.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * webtrees: online genealogy
  3 |  * Copyright (C) 2020 webtrees development team
  4 |  * This program is free software: you can redistribute it and/or modify
  5 |  * it under the terms of the GNU General Public License as published by
  6 |  * the Free Software Foundation, either version 3 of the License, or
  7 |  * (at your option) any later version.
  8 |  * This program is distributed in the hope that it will be useful,
  9 |  * but WITHOUT ANY WARRANTY; without even the implied warranty of
 10 |  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 11 |  * GNU General Public License for more details.
 12 |  * You should have received a copy of the GNU General Public License
 13 |  * along with this program. If not, see <http://www.gnu.org/licenses/>.
 14 |  */
 15 |  
 16 |  /* ---- custom.css -- */
 17 |  
 18 | /* set check and radio boxes background for colors theme */
 19 | 
 20 |  [dir] .wt-theme-colors .form-check-input:checked {
 21 | 	background-color: var(--color-1);
 22 | 	border-color: var(--color-1);
 23 | }
 24 | 
 25 | [dir] .wt-theme-colors .form-control-check:checked[type=checkbox] {
 26 | 	accent-color: var(--color-1);
 27 | }
 28 | 
 29 | [dir] .wt-theme-colors #HTML:checked[type=radio] {
 30 | 	accent-color: var(--color-1);
 31 | }
 32 | 
 33 | .wt-theme-colors #PDF:checked[type=radio] {
 34 | 	accent-color: var(--color-1);
 35 | }
 36 | 
 37 | 
 38 | /* Limit size of media objects on Individual page for large monitors */
 39 | .col-sm-3 .gallery img {
 40 |   max-width: 200px;
 41 |   margin-left: auto;
 42 |   display: flex;
 43 |   margin-right: auto;
 44 | }
 45 | 
 46 | /* Reduce spacing on Individual page */
 47 | [dir] .card-body {
 48 | 	padding: .25rem .25rem .25rem 1.25rem;
 49 | 	}
 50 | 	
 51 | [dir] .card-body dd {
 52 | 	margin-bottom: 0;
 53 | 	}
 54 | 	
 55 | /* Inline Individual data for FAB theme */
 56 | [dir] .card-body dt {
 57 | 	clear: both;
 58 | 	margin-right: 0;
 59 | }	
 60 | 
 61 | /* slid show controls */
 62 | .svg-inline--fa.fa-w-14, .svg-inline--fa {
 63 | 	opacity: .7;
 64 | }
 65 | 
 66 | /* Adjust height for webtrees theme pirimay menu */
 67 | [dir] .dropdown-menu.show {
 68 |     max-height: 60rem;
 69 | }
 70 | 
 71 | /* move style from code to css for tables in Hourglass Chart */
 72 | .wt-chart-hourglass table {
 73 | 	border-collapse: collapse;
 74 | 	border: none;
 75 | }
 76 | .wt-chart-hourglass th, .wt-chart-hourglass td {
 77 | 	padding: 0;
 78 | }
 79 | 
 80 | #childbox .person_box {
 81 | 	border: thin solid #aaa!important;
 82 | }
 83 | 
 84 | /* Person box style changes before padding 2 and border 1 are added.
 85 |  * w-100 for Family and spouse and compact charts */
 86 | 
 87 | /* Ensure that custom-css person box sizes only apply to standard webtrees themes */
 88 | 
 89 | [class*="wt-theme-c"] .wt-chart .wt-chart-box, /* relationship chart */
 90 | [class*="wt-theme-fab"] .wt-chart .wt-chart-box, /* relationship chart */
 91 | [class*="wt-theme-minimal"] .wt-chart .wt-chart-box, /* relationship chart */
 92 | [class*="wt-theme-webtrees"] .wt-chart .wt-chart-box, /* relationship chart */
 93 | [class*="wt-theme-xenea"] .wt-chart .wt-chart-box, /* relationship chart */
 94 | 
 95 | [class*="wt-theme-c"] .w-100 td .wt-chart-box, /* compact chart */
 96 | [class*="wt-theme-fab"] .w-100 td .wt-chart-box, /* compact chart */
 97 | [class*="wt-theme-minimal"] .w-100 td .wt-chart-box, /* compact chart */
 98 | [class*="wt-theme-webtrees"] .w-100 td .wt-chart-box, /* compact chart */
 99 | [class*="wt-theme-xenea"] .w-100 td .wt-chart-box, /* compact chart */
100 | 
101 | [class*="wt-theme-c"] .d-flex .wt-chart-box,   /* all other charts */
102 | [class*="wt-theme-fab"] .d-flex .wt-chart-box, /* all other charts */
103 | [class*="wt-theme-minimal"] .d-flex .wt-chart-box, /* all other charts */
104 | [class*="wt-theme-webtrees"] .d-flex .wt-chart-box, /* all other charts */
105 | [class*="wt-theme-xenea"] .d-flex .wt-chart-box /* all other charts */
106 | 	{  
107 | 	width: 16.25rem; /* 260px */
108 | 	height: 5rem; /* 80px */
109 | 	line-height: 1.05;
110 | }
111 | 
112 | .wt-chart .wt-chart-box-facts .small {
113 | 	font-size: 11px;
114 | }
115 | 
116 | .wt-icon-sex{
117 | 	height: 1em;
118 | }
119 | 
120 | .svg-inline--fa.fa-fw {
121 |     width: .75em;
122 | }
123 | 
124 | .wt-icon-zoom-in {
125 |     width: 25px;
126 |     height: 25px;
127 | }
128 | 
129 | [dir] [class^=fact_] {
130 |     margin-bottom: 0;
131 | }
132 | 
133 | #childbox .person_box {
134 |     border: thin solid #aaa!important;
135 | }
136 | 
137 | /* fix dropdowns on person box */
138 | 
139 | [dir] .wt-chart-box .dropdown-menu {
140 |     max-height: 50rem; /* all charts */
141 | }
142 | 
143 | .wt-chart-pedigree .wt-chart-box .wt-chart-box-zoom-dropdown {
144 |     max-height: 20rem; /* only for zoom on pedigree */
145 | }
146 | 
147 | .wt-chart-box .dropdown-menu {
148 |     font-size: 12.8px;
149 |     padding: 5px 0;
150 | }
151 | 
152 | .wt-chart-box .dropdown-menu .NAME {
153 |     padding-left: 20px;
154 |     padding-top: 5px;
155 |     line-height: 1.5;
156 | }
157 | 
158 | [dir=rtl] .wt-chart-box .dropdown-menu .NAME {
159 |     padding-right: 20px;
160 | }
161 | 
162 | .wt-chart-box .wt-chart-box-name, .wt-chart-box .wt-chart-box-lifespan {
163 |     font-size: 14px;
164 | }
165 | 
166 | div [class^="menu-chart-"] {
167 |     padding-top: 3px!important;
168 | }
169 | 
170 | .wt-chart-box-zoom-dropdown div {
171 |     padding: 3px 5px 0 5px!important;
172 | }
173 | 
174 | div [class^="menu-chart-"] {
175 |     padding-left: 10px!important;
176 | }
177 | 
178 | [dir=rtl] div [class^="menu-chart-"] {
179 |     padding-right: 10px!important;
180 | }
181 | 
182 | div [class^="menu-chart-"] a {
183 |     padding-left: 5px;
184 |     vertical-align: top;
185 |     font-size: .83rem!important;
186 | }
187 | 
188 | [dir=rtl] div [class^="menu-chart-"] a {
189 |     padding-right: 5px;
190 | }
191 | 
192 | .wt-family-navigator-child  ul span {
193 |     margin: 0 5px;
194 | }
195 | 
196 | /* Center text on forms */
197 | 
198 | form .wt-page-options-label {
199 |     text-align: center;
200 | }
201 | 
202 | /* widen table for places */
203 | .w-25.list_table {
204 |     width: 35%!important;
205 | }
206 | 
207 | /* Add horizontal scrolling to small block displays */
208 | .hourglassChart .lineh1 {
209 |     margin-bottom: 0px;
210 | }
211 | 
212 | /* Add horizontal scrolling to small block displays */
213 | .wt-block-content-todays_events,
214 | .wt-block-content-todo,
215 | .wt-block-content-top10_givnnames,
216 | .wt-block-content-user_messages,
217 | .wt-block-content-user_blog,
218 | .wt-block-content-yahrzeit {
219 |     overflow-y: hidden;
220 | }
221 | 
222 | /* Add vertical scrolling to small block displays */
223 | .wt-block-content-todays_events,
224 | .wt-block-content-todo,
225 | .wt-block-content-top10_givnnames,
226 | .wt-block-content-user_messages,
227 | .wt-block-content-user_blog,
228 | .wt-block-content-yahrzeit {
229 |     max-height: 500px;
230 |     overflow: scroll;
231 | } 
232 | 
233 | /* add horizontal scroll bars to Lists */
234 | 
235 | #place-hierarchy, .indi-list, .fam-list {
236 |     overflow-x: auto;
237 | }
238 | 
239 | /* touch devices - icons larger */
240 | 
241 | @media (any-hover: none) {
242 | 
243 |     .wt-icon-zoom-in, .icon-pedigree {
244 |         width: 35px;
245 |         height: 35px;
246 |     }
247 | 
248 |     .wt-chart-box .wt-chart-box-name {
249 |         font-size: 16px;
250 |     }
251 | 
252 |     .icon-plus, .icon-minus {
253 |         width: 18px;
254 |         height: 18px;
255 |     }
256 | }
257 | 
258 | /* Adjust for various display sizes */
259 | 
260 | @media (max-width:500px) {
261 | 	.img-thumbnail {
262 | 		width: 35% !important;
263 | 		height: auto;
264 | 		display: block;
265 | 		margin: auto;
266 | 	}
267 | 
268 | 	.col {
269 | 		min-width: auto;
270 | 	}
271 | 
272 | 	#sidebar {
273 | 		width: auto!important;
274 | 	}
275 | }
276 | 
277 | @media (min-width:501px) and (max-width:1679px) {
278 | 	.container, .container-lg {
279 | 		max-width: 95%;
280 | 	}
281 | }
282 | 
283 | /* The following selector sets the webtrees screen utilization to 75% of the available screen size -- for large screen monitors.
284 |  * If you wish webtrees to uitilize all the available screen then change the max-width: to 100%
285 |  */
286 | @media (min-width: 1680px) {
287 | 	.container, .container-lg, .wt-theme-fab .jc-fancy-imagebar {
288 | 		max-width: 75%;
289 | 	}
290 | }
291 | 
292 | /* Control printing on Facts 
293 |  */
294 | @media print {
295 | 	#sidebar, 
296 | 	.wt-tabs-individual .nav-item .nav-link,
297 | 	.wt-page-menu,
298 | 	#add-fact, .wt-quick-facts, .input-group-append,
299 | 	.wt-footers,
300 | 	.wt-facts-table tbody tr:first-child,
301 | 	.accordion .card,
302 | 	.story_edit,
303 | 	.col-sm-3 .text-center,
304 | 	.editfacts 
305 | 		{display:none;}
306 | 	.col-sm-8 {
307 | 		-webkit-box-flex: 0;
308 | 		flex: 0 0 96.666667%;
309 | 		max-width: 96.666667%;
310 | 		}
311 | 	.nav-link.active 
312 | 		{display: block!important;}
313 | 	a:link
314 | 		{text-decoration: none;}
315 | }
316 | 


--------------------------------------------------------------------------------
/latest-version.txt:
--------------------------------------------------------------------------------
1 | 1.0.19
2 | 


--------------------------------------------------------------------------------