Race Replacer - Ancestries, Species, and more

Race Replacer - Ancestries, Species, and more

Install
scanime
2nd May, 2023
8 installations 3 likes

Update! You no longer need this plugin to change the names used for Races or any other modules. Check out the updates to Kanka 1.4.2 at https://blog.kanka.io/2023/05/18/1-42-renaming-modules-premium-campaigns-and-polygones-release/

You've gone and changed the name "Race" in the sidebar of your campaign to something else. Maybe your fantasy game has "Ancestries" or "Folk" or you might have a science-fiction game with "Species" or "Xenotypes" instead. But after you've changed the sidebar, the entity pages still uses the old name. But we can change that (mostly) with this little CSS plugin.

How to use the plugin

By default, the plugin changes "Races" to "Ancestries" out of the box. But if you'd like it to be something else, you'll need to do a bit of CSS yourself after installing this plugin to set the variables to what you'd like the new name to be. To start, click "Campaign" in your sidebar, then select "Theming" and then press the "New Style" button to create a new CSS theme. Name it what you'd like, and paste in:

:root { <br>&nbsp; &nbsp;/* For race entities &amp; entity lists */<br>&nbsp; &nbsp;--race-renamer-breadcrumb: "Ancestries";<br>&nbsp; &nbsp;--race-renamer-breadcrumb-size: 0.75rem;<br>&nbsp; &nbsp;--race-renamer-header: "Ancestries";<br>&nbsp; &nbsp;--race-renamer-header-size: 1.3rem;<br>&nbsp; &nbsp;--race-renamer-nested: "Displaying all ancestries that don't have a parent ancestry. Click on a row to see the children ancestries.";<br>&nbsp; &nbsp;--race-renamer-view-btn: "Ancestry";<br>&nbsp; &nbsp;--race-renamer-new-btn: "Ancestry";<br>&nbsp; &nbsp;--race-renamer-th-sub: "Sub-Ancestries";<br>&nbsp; &nbsp;--race-renamer-filtered: "Ancestries."; /* Don't forget the period */<br>&nbsp; &nbsp;--race-renamer-filtered-width: 7em;<br>&nbsp; &nbsp;--race-renamer-filtered-left: -3.5em;<br>&nbsp; &nbsp;--race-renamer-filtered-bg: var(--box-footer-background);<br><br>&nbsp; &nbsp;/* For character entities */<br>&nbsp; &nbsp;--race-renamer-filter-label: "Ancestry";<br>&nbsp; &nbsp;--race-renamer-th-char: "Ancestries";<br>&nbsp; &nbsp;--race-renamer-profile: "Ancestries";<br>&nbsp; &nbsp;--race-renamer-profile-with-age: "Ancestries, Age";<br>&nbsp; &nbsp;--race-renamer-abilities: "Ancestry abilities";<br><br>&nbsp; &nbsp;/* For forms */<br>&nbsp; &nbsp;--race-renamer-form-parent: "Parent Ancestry";<br>&nbsp; &nbsp;--race-renamer-form-choose: "Choose an ancestry";<br>&nbsp; &nbsp;--race-renamer-form-label-new: "New Ancestry";<br>&nbsp; &nbsp;--race-renamer-form-character: "Ancestries";<br><br>&nbsp; &nbsp;/* For quick creator */<br>&nbsp; &nbsp;--race-renamer-quick: "Ancestry";<br>&nbsp; &nbsp;--race-renamer-quick-add: "New Ancestry";<br>&nbsp; &nbsp;--race-renamer-quick-submit: "Create Ancestry";<br>}

This may look intimidating, but usually all we have to worry about is changing the text to what you'd like it to be. And the only part that most people will see are race entities and entity lists, and character entities. The other variables are mostly for forms for users that have the ability to create or edit entities. Below are examples are what each of the text variables affect, so you'll know what to change them to. After you've made your changes, save the theme.


Entities & Entity Lists

race%20renamer%202.jpg

There are a few other variables that control formatting. --race-renamer-header-size sets the font size in the header. The default size in a campaign is 1.3rem, but yours might be different if you are using another theme or plugin. --race-renamer-breadcrumb-size does the same; it's default size is 0.75rem.

In most cases, the CSS simply replaces the default text with whatever text you set in the variable. But --race-renamer-filtered works differently because of the dynamic nature of the text. It attempts to cover up the end of the sentence, replacing "Race." with the new variable. Because of this, there are additional formatting variables you may need to tweak. --race-renamer-filter-width sets the width of the replacement text, and --race-renamer-filtered-left sets how far left to move it. The longer the original text, the wider and further left the replacement text will need to be. Finally, --race-renamer-filtered-bg sets the background color used to hide the original text. By default, we try to match the assigned color for the footer background.


Character Entities

race%20renamer%20character.png?raw=true

Normally, there's two different texts on the button to add Race abilities to a Character depending on the width of the browser window, but I simplified it to using just one. There are two variables not shown in the screenshot. There's the label for the Races column on the Character entity list, --race-renamer-th-char, and the label to filter by Races on the same page, which uses --race-renamer-filter-label.


Forms

race%20renamer%20form.jpg?raw=true

Not shown is the variable --race-renamer-form-character which is on the new and edit character entity pages. It's the label above where a character's races are selected.


Quick Creator

race%20renamer%20quick%20creator.jpg?raw=true

Finally, the Quick Creator has some of it's own variables, but I tried to re-use some from the main form when possible.


Limitations

This plugin can't change the title of the page, so your browser tab or window will continue to say Races. It also can't change the order of items, so a normally alphabetized list of entity types (Characters, Locations, etc.) is still going to have Races in the same place even if it appears to have a different name. It also ignores any language settings, so users viewing your page will see whatever is set with the plugin instead, which may cause issues if users are viewing in a different language. Finally, this plugin also isn't very friendly to screen readers or other assistive devices, and the replacement text can't be selected.

Latest version 1.1

Released 1 year ago on 2nd May, 2023

Version 1.1: Updated for new entity list layout.

Problems? Suggestions? Let me know! Hopefully I've covered all the instances to replace "Race" but there may be some I've missed.

CSS rules

:root{
  /* For race entities & entity list */
  --race-renamer-breadcrumb: "Ancestries";
  --race-renamer-breadcrumb-size: 0.75rem;
  --race-renamer-header: "Ancestries";
  --race-renamer-header-size: 2rem;
  --race-renamer-nested: "Displaying all ancestries that don't have a parent ancestry. Click on a row to see the children ancestries.";
  --race-renamer-view-btn: "Ancestry";
  --race-renamer-new-btn: "Ancestry";
  --race-renamer-th-sub: "Sub-Ancestries";
  --race-renamer-filtered: "Ancestries."; /* Don't forget the period */
  --race-renamer-filtered-width: 7em;
  --race-renamer-filtered-left: -3.5em;
  --race-renamer-filtered-bg: var(--box-footer-background);
  
  /* For character entities */
  --race-renamer-filter-label: "Ancestry";
  --race-renamer-th-char: "Ancestries";
  --race-renamer-profile: "Ancestries";
  --race-renamer-profile-with-age: "Ancestries, Age";
  --race-renamer-abilities: "Ancestry abilities";
  
  /* For forms */
  --race-renamer-form-parent: "Parent Ancestry";
  --race-renamer-form-choose: "Choose an ancestry";
  --race-renamer-form-label-new: "New Ancestry";
  --race-renamer-form-character: "Ancestries";   
  
  /* For quick creator */
  --race-renamer-quick: "Ancestry";
  --race-renamer-quick-add: "New Ancestry";
  --race-renamer-quick-submit: "Create Ancestry";
}
/* For entities & entity list */
body:is(.kanka-races, .kanka-entity-race) ol:is(.entity-breadcrumb, .breadcrumb) li > a:is([href$="/races"], [href$="/races/tree"]) { font-size: 0; }
body:is(.kanka-races, .kanka-entity-race) ol:is(.entity-breadcrumb, .breadcrumb) li > a:is([href$="/races"], [href$="/races/tree"]):after { content: var(--race-renamer-breadcrumb); font-size: var(--race-renamer-breadcrumb-size); }
body:is(.kanka-races, .kanka-entity-race) section.content > div > h1 { font-size: 0; }
body:is(.kanka-races, .kanka-entity-race) section.content > div > h1:after { content: var(--race-renamer-header); font-size: 2rem;}
body:is(.kanka-races, .kanka-entity-race) section.content .box > form > .box-body > p.help-block { font-size: 0; }
body:is(.kanka-races, .kanka-entity-race) section.content .box > form > .box-body > p.help-block:before { font-size: 14px; display: inline; content: var(--race-renamer-nested); }
body:is(.kanka-races, .kanka-entity-race) section.content a.btn.pull-right:has( > i.fa-list ) { font-size: 0; }
body:is(.kanka-races, .kanka-entity-race) section.content a.btn.pull-right:has( > i.fa-list ):after { font-size: 14px; display: inline; content: var(--race-renamer-view-btn); }
body:is(.kanka-races, .kanka-entity-race) section.content form.datagrid-search + a.btn.pull-right { font-size: 0; } /* For Firefox */
body:is(.kanka-races, .kanka-entity-race) section.content form.datagrid-search + a.btn.pull-right:after { font-size: 14px; display: inline; content: var(--race-renamer-view-btn); } /* For Firefox */
body:is(.kanka-races, .kanka-entity-race) section.content a.btn.pull-right > i.fa-list { font-size: 14px; }
body:is(.kanka-races, .kanka-entity-race) section.content .btn-group > a.btn-new-entity { font-size: 0; }
body:is(.kanka-races, .kanka-entity-race) section.content .btn-group > a.btn-new-entity:after { font-size: 14px; display: inline; content: var(--race-renamer-new-btn); }
body:is(.kanka-races, .kanka-entity-race) section.content .btn-group > a.btn-new-entity > i.fa-plus { font-size: 14px; }
body:is(.kanka-races, .kanka-entity-race) section.content .box form .box-footer > p.help-block:after { content: var(--race-renamer-filtered); display: inline-block; width: var(--race-renamer-filtered-width); margin-left: var(--race-renamer-filtered-left); background-color: var(--race-renamer-filtered-bg); }
table#races > thead > tr > th.avatar + th + th + th { font-size: 0; } /* looks weird, but works for public, players, and admin */
table#races > thead > tr > th.avatar + th + th + th:after {display: inline; content: var(--race-renamer-th-sub); font-size: 14px;}
body:is(.kanka-races, .kanka-entity-race) #crud-filters-form > div > .form-group:nth-child(3) > label { font-size: 0; }
body:is(.kanka-races, .kanka-entity-race) #crud-filters-form > div > .form-group:nth-child(3) > label:after { content: var(--race-renamer-form-parent); font-size: 14px; }
body:is(.kanka-races, .kanka-entity-race) #crud-filters-form > div > .form-group:nth-child(3) .select2-selection__placeholder { font-size: 0; }
body:is(.kanka-races, .kanka-entity-race) #crud-filters-form > div > .form-group:nth-child(3) .select2-selection__placeholder:after { content: var(--race-renamer-form-choose); font-size: 14px; }
body:is(.kanka-races, .kanka-entity-race) #race-characters #datagrid-parent table > thead > tr > th:last-of-type { font-size: 0; }
body:is(.kanka-races, .kanka-entity-race) #race-characters #datagrid-parent table > thead > tr > th:last-of-type:before { font-size: 14px; content: var(--race-renamer-th-char); }
/* For the quick creator */
.modal .quick-creator-body .quick-creator-selection[data-entity-type="race"] > span { font-size: 0; }
.modal .quick-creator-body .quick-creator-selection[data-entity-type="race"] > span:before { content: var(--race-renamer-quick); font-size:14px; }
.modal-body.entity-creator-body-races > .quick-creator-header .dropdown > div { font-size: 0; }
.modal-body.entity-creator-body-races > .quick-creator-header .dropdown > div:before { content: var(--race-renamer-quick-add); font-size: 1.5rem; }
.modal-body.entity-creator-body-races > .quick-creator-header .dropdown > div:after {content: "\f078"; font-family: "Font Awesome 6 Pro";font-size: 1.5rem;font-weight: 900;display: var(--fa-display,inline-block);}
.modal-body.entity-creator-body-races > .quick-creator-header .dropdown > ul.dropdown-menu > li.disabled > a { font-size: 0; }
.modal-body.entity-creator-body-races > .quick-creator-header .dropdown > ul.dropdown-menu > li.disabled > a:after { content: var(--race-renamer-quick); font-size: 14px; margin-left: -1em;  }
.modal-body.entity-creator-body-races > .quick-creator-header .dropdown > ul.dropdown-menu > li.disabled > a:before { content: "\f00c"; font-family: "Font Awesome 6 Pro"; font-size: 14px; font-weight: 900;display: var(--fa-display,inline-block); }
.modal-body.entity-creator-body-races > .quick-creator-body > .qq-more-fields > .row > .col-sm-6:nth-child(2) > .form-group > label { font-size: 0; }
.modal-body.entity-creator-body-races > .quick-creator-body > .qq-more-fields > .row > .col-sm-6:nth-child(2) > .form-group > label:after { content: var(--race-renamer-form-parent); font-size: 14px; }
.modal-body.entity-creator-body-races > .quick-creator-body > .qq-more-fields > .row > .col-sm-6:nth-child(2) > .form-group > .input-group span.select2-selection__placeholder { font-size: 0; }
.modal-body.entity-creator-body-races > .quick-creator-body > .qq-more-fields > .row > .col-sm-6:nth-child(2) > .form-group > .input-group span.select2-selection__placeholder:after { content: var(--race-renamer-form-choose); font-size: 14px; }
.modal-body.entity-creator-body-races #qq-name-field::placeholder { color: var(--input-background-color); } /* Can't change placeholder text, but we can hide it */
.modal-body.entity-creator-body-races > .quick-creator-footer.mt-4 > .btn-group > button.quick-creator-submit:first-of-type > span { font-size: 0; }
.modal-body.entity-creator-body-races > .quick-creator-footer.mt-4 > .btn-group > button.quick-creator-submit:first-of-type > span:after { font-size: 14px; content: var(--race-renamer-quick-submit); }
form#entity-creator-form > .modal-body.entity-creator-body-races > .quick-creator-header .text-2xl { font-size: 0; }
form#entity-creator-form > .modal-body.entity-creator-body-races > .quick-creator-header .text-2xl:before { font-size: 1.5rem; content: var(--race-renamer-quick-add); }
/* For forms */
form.entity-form[action*="/races"] #form-entry > .row:nth-of-type(2) > .col-md-6:first-of-type > .form-group > label { font-size: 0; }
form.entity-form[action*="/races"] #form-entry > .row:nth-of-type(2) > .col-md-6:first-of-type > .form-group > label:after { content: var(--race-renamer-form-parent); font-size: 14px; }
form.entity-form[action*="/races"] #form-entry > .row:nth-of-type(2) > .col-md-6:first-of-type > .form-group > .input-group span.select2-selection__placeholder { font-size: 0; }
form.entity-form[action*="/races"] #form-entry > .row:nth-of-type(2) > .col-md-6:first-of-type > .form-group > .input-group span.select2-selection__placeholder:after { content: var(--race-renamer-form-choose); font-size: 14px; }
form.entity-form[action*="/races"] .form-group input[data-type="race"]::placeholder { color: var(--input-background-color); } /* Can't change placeholder text, but we can hide it */
form.entity-form[action*="/races"] ol:is(.entity-breadcrumb, .breadcrumb) li > a:is([href$="/races"], [href$="/races/tree"]) { font-size: 0; }
form.entity-form[action*="/races"] ol:is(.entity-breadcrumb, .breadcrumb) li > a:is([href$="/races"], [href$="/races/tree"]):after { content: var(--race-renamer-breadcrumb); font-size: var(--race-renamer-breadcrumb-size); }
form.entity-form[action$="/races"] section.content-header > h1 { font-size: 0; }
form.entity-form[action$="/races"] section.content-header > h1:after { content: var(--race-renamer-form-label-new); font-size: var(--race-renamer-header-size); }
body.kanka-races #bulk-edit .modal-body > .row:nth-of-type(3) > .col-md-6:first-of-type > .form-group > label { font-size: 0; }
body.kanka-races #bulk-edit .modal-body > .row:nth-of-type(3) > .col-md-6:first-of-type > .form-group > label:after { content: var(--race-renamer-form-parent); font-size: 14px; }
body.kanka-races #bulk-edit .modal-body > .row:nth-of-type(3) > .col-md-6:first-of-type > .form-group > .input-group span.select2-selection__placeholder { font-size: 0; }
body.kanka-races #bulk-edit .modal-body > .row:nth-of-type(3) > .col-md-6:first-of-type > .form-group > .input-group span.select2-selection__placeholder:after { content: var(--race-renamer-form-choose); font-size: 14px; }
body.kanka-races #bulk-edit .modal-body .form-group input[data-type="race"]::placeholder { color: var(--input-background-color); } /* Can't change placeholder text, but we can hide it */
body.kanka-characters #bulk-edit .modal-body > .row:nth-of-type(4) > .col-md-6:first-of-type > .form-group > label { font-size: 0; }
body.kanka-characters #bulk-edit .modal-body > .row:nth-of-type(4) > .col-md-6:first-of-type > .form-group > label:after { content: var(--race-renamer-form-character); font-size: 14px; }
form.entity-form[action*="/characters"] #form-entry > .row:nth-of-type(2) > .col-md-6:nth-of-type(2) > .form-group > label { font-size: 0; }
form.entity-form[action*="/characters"] #form-entry > .row:nth-of-type(2) > .col-md-6:nth-of-type(2) > .form-group > label:after { content: var(--race-renamer-form-character); font-size: 14px; }
/* For characters */
body.kanka-characters #crud-filters-form > #datagrid-filters > .box-body > .row:nth-of-type(4) > .col-md-6:first-of-type > .form-group > label { font-size: 0; }
body.kanka-characters #crud-filters-form > #datagrid-filters > .box-body > .row:nth-of-type(4) > .col-md-6:first-of-type > .form-group > label:after { content: var(--race-renamer-filter-label); font-size: 14px; }
body.kanka-characters #crud-filters-form > #datagrid-filters > .box-body > .row:nth-of-type(4) > .col-md-6:first-of-type .select2-selection__placeholder { font-size: 0; }
body.kanka-characters #crud-filters-form > #datagrid-filters > .box-body > .row:nth-of-type(4) > .col-md-6:first-of-type .select2-selection__placeholder:after { content: var(--race-renamer-form-choose); font-size: 14px; }
body.kanka-entity-character section.content #sidebar-profile-elements > .profile-race > .title { font-size: 0; }
body.kanka-entity-character section.content #sidebar-profile-elements > .profile-race > .title:before { content: var(--race-renamer-profile); font-size: 11px;  }
body.kanka-entity-character section.content #sidebar-profile-elements > .profile-race-age > .title { font-size: 0; }
body.kanka-entity-character section.content #sidebar-profile-elements > .profile-race-age > .title:before { content: var(--race-renamer-profile-with-age); font-size: 11px;  }
body.kanka-entity-character.entity-abilities section.content .header-buttons > a.btn[href$="entity_abilities/import?from=race"] > span.hidden-sm.hidden-xs { font-size: 0; }
body.kanka-entity-character.entity-abilities section.content .header-buttons > a.btn[href$="entity_abilities/import?from=race"] > span.visible-sm.visible-xs { font-size: 0; }
body.kanka-entity-character.entity-abilities section.content .header-buttons > a.btn[href$="entity_abilities/import?from=race"] > span.hidden-sm.hidden-xs:before { font-size: 12px; content: var(--race-renamer-abilities); }
body.kanka-entity-character.entity-abilities section.content .header-buttons > a.btn[href$="entity_abilities/import?from=race"] > span.visible-sm.visible-xs:before { font-size: 12px; content: var(--race-renamer-abilities); }
table#characters > thead > tr > th.avatar + th + th + th + th + th { font-size: 0; } /* looks weird, but works for public, players, and admin */
table#characters > thead > tr > th.avatar + th + th + th + th + th:after {display: inline; content: var(--race-renamer-th-char); font-size: 14px;}
 Install

User comments & reviews