Skip to content

AO3-7210 I18n skins-creating.html help file #5554

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
hunternet93 wants to merge 7 commits into
base: master
Choose a base branch
from
+300 −206
Open

AO3-7210 I18n skins-creating.html help file #5554

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ff7db90
AO3-7210: Migrated skins-creating.html help file to localized help co…
hunternet93 Jan 21, 2026
6237fd5
fix app/views/skins/_form.html.erb for lint
hunternet93 Jan 21, 2026
b3aa2c7
fix app/views/skins/_form.html.erb for lint again
hunternet93 Jan 21, 2026
7020232
added css translation
hunternet93 Jan 21, 2026
c4864d4
normalize
hunternet93 Jan 21, 2026
8835f7c
reverted .one_declaration_per_ruleset.description changes to match so…
hunternet93 Jan 21, 2026
7a9394d
Updates per review
hunternet93 Feb 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions app/controllers/help_controller.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,7 @@ def first_login

def preferences_locale
end

def skins_creating
end
end
225 changes: 225 additions & 0 deletions app/views/help/skins_creating.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,225 @@
<dl id="help">
<dt><%= t(".intro.header") %></dt>
<dd>
<p><%= t(".intro.description") %></p>
</dd>

<dt><%= t(".allowed_properties") %></dt>
<dd>
<p>
<code>
background, border, column, cue, flex, font, layer-background,
layout-grid, list-style, margin, marker, outline, overflow, padding,
page-break, pause, scrollbar, text, transform, transition
</code>
</p>
</dd>
<dt><%= t(".allowed_specific_properties") %></dt>
<dd>
<p>
<code>
-replace, -use-link-source, accelerator, accent-color, align-content,
align-items, align-self, alignment-adjust, alignment-baseline,
appearance, azimuth, baseline-shift, behavior, binding, bookmark-label,
bookmark-level, bookmark-target, bottom, box-align, box-direction,
box-flex, box-flex-group, box-lines, box-orient, box-pack, box-shadow,
box-sizing, caption-side, clear, clip, color, color-profile,
color-scheme, content, counter-increment, counter-reset, crop, cue,
cue-after, cue-before, cursor, direction, display, dominant-baseline,
drop-initial-after-adjust, drop-initial-after-align,
drop-initial-before-adjust, drop-initial-before-align,
drop-initial-size, drop-initial-value, elevation, empty-cells, filter,
fit, fit-position, float, float-offset, font, font-effect,
font-emphasize, font-emphasize-position, font-emphasize-style,
font-family, font-size, font-size-adjust, font-smooth, font-stretch,
font-style, font-variant, font-weight, grid-columns, grid-rows,
hanging-punctuation, height, hyphenate-after, hyphenate-before,
hyphenate-character, hyphenate-lines, hyphenate-resource, hyphens,
icon, image-orientation, image-resolution, ime-mode, include-source,
inline-box-align, justify-content, layout-flow, left, letter-spacing,
line-break, line-height, line-stacking, line-stacking-ruby,
line-stacking-shift, line-stacking-strategy, mark, mark-after,
mark-before, marks, marquee-direction, marquee-play-count,
marquee-speed, marquee-style, max-height, max-width, min-height,
min-width, move-to, nav-down, nav-index, nav-left, nav-right, nav-up,
opacity, order, orphans, page, page-policy, phonemes, pitch,
pitch-range, play-during, position, presentation-level,
punctuation-trim, quotes, rendering-intent, resize, rest, rest-after,
rest-before, richness, right, rotation, rotation-point, ruby-align,
ruby-overhang, ruby-position, ruby-span, size, speak, speak-header,
speak-numeral, speak-punctuation, speech-rate, stress, string-set,
tab-side, table-layout, target, target-name, target-new,
target-position, top, unicode-bibi, unicode-bidi, user-select,
vertical-align, visibility, voice-balance, voice-duration,
voice-family, voice-pitch, voice-pitch-range, voice-rate, voice-stress,
voice-volume, volume, white-space, white-space-collapse, widows, width,
word-break, word-spacing, word-wrap, writing-mode, z-index
</code>
</p>
</dd>

<dt><%= t(".skin_examples.header") %></dt>
<dd>
<p>
<%= t(".skin_examples.description_html",
public_skins_link: link_to(t(".skin_examples.public_skins"), skins_path)) %>
</p>
</dd>

<dt><%= t(".one_declaration_per_ruleset.header") %></dt>
<dd>
<p>
<%= t(".one_declaration_per_ruleset.description_html",
repeated_declarations_css_code: tag.br + tag.code(tag.pre(%{
.my-class {
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
}
})),
background_code: tag.code("background")) %>
<code><pre>
.my-class { background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); }
.my-class { background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); }
.my-class { background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); }
</pre></code>
</p>
</dd>

<dt><%= t(".font_family.header") %></dt>
<dd>
<p>
<%= t(".font_family.description.separate_properties_html",
font_code: tag.code("font"),
font_properties_css_code: tag.code("font-size: 1.1em; font-weight: bold; font-family: Cambria, Constantia, Palatino, Georgia, serif;")) %>
</p>
<p>
<%= t(".font_family.description.font_names_html",
font_family_code: tag.code("font-family"),
web_safe_fonts_link:
link_to(t(".font_family.description.web_safe_fonts"),
"https://www.w3schools.com/cssref/css_fonts_fallbacks.asp")) %>
</p>
<p>
<%= t(".font_family.description.no_font_face_html",
cannot_bold: tag.strong(t(".font_family.description.cannot")),
font_face_code: tag.code("@font-face")) %>
</p>
</dd>

<dt><%= t(".custom_properties.header") %></dt>
<dd>
<p><%= t(".custom_properties.description.names") %></p>
<p>
<%= t(".custom_properties.description.accepting_properties_html",
font_family_code: tag.code("font-family"),
content_code: tag.code("content"),
var_code: tag.code("var()")) %>
</p>
<p><%= t(".custom_properties.description.availability_html", var_code: tag.code("var()")) %></p>
</dd>

<dt><%= t(".external_urls.header") %></dt>
<dd>
<p>
<%= t(".external_urls.description_html",
example_url_code: tag.code("url('https://example.com/my_awesome_image.jpg')")) %>
</p>
</dd>

<dt><%= t(".allowed_keywords.header") %></dt>
<dd>
<p>
<%= t(".allowed_keywords.description_html",
absolute_code: tag.code("absolute"),
bottom_code: tag.code("bottom"),
center_code: tag.code("center"),
underline_code: tag.code("underline")) %>
</p>
</dd>

<dt><%= t(".numeric_values.header") %></dt>
<dd>
<p>
<%= t(".numeric_values.description.precision_html",
various_units_link:
link_to(t(".numeric_values.description.various_units"),
"https://w3schools.com/css/css_units.asp"),
units_list_code: tag.br + tag.code(t(".numeric_values.description.units_list",
cm_code: "cm",
em_code: "em",
ex_code: "ex",
in_code: "in",
mm_code: "mm",
pc_code: "pc",
pt_code: "pt",
px_code: "px"))) %>
Comment on lines +148 to +156
Copy link
Contributor

@Bilka2 Bilka2 Feb 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would prefer to have the units in the locale file so that the string isn't so split up

</p>
<p><%= t(".numeric_values.description.em_unit_html", em_code: tag.code("em")) %></p>
</dd>

<dt><%= t(".colors.header") %></dt>
<dd>
<p>
<%= t(".colors.description_html",
black_hex_code: tag.code("#000000"),
black_rgb_code: tag.code("rgb(0,0,0)"),
black_rgba_code: tag.code("rgba(0,0,0,0)"),
common_color_names_link: link_to(t(".colors.common_color_names"),
"https://www.w3schools.com/colors/colors_names.asp")) %>
</p>
</dd>

<dt><%= t(".scale.header") %></dt>
<dd>
<p>
<%= t(".scale.description_html",
transform_code: tag.code("transform"),
scale_numeric_value_code: tag.code("scale(#{t('.scale.numeric_value')})")) %>
</p>
</dd>

<dt><%= t(".comments.header") %></dt>
<dd>
<p><%= t(".comments.description") %></p>
</dd>

<dt><%= t(".css_basics.header") %></dt>
<dd>
<p>
<%= t(".css_basics.description.line_of_css_html",
example_css_code: tag.code("#{t('.css_basics.description.selector')} {#{t('.css_basics.description.property')}: #{t('.css_basics.description.value')};}")) %>
Copy link
Contributor

@Bilka2 Bilka2 Feb 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would prefer to have the entire thing, including the {} and semicolon, in the locale file, instead of splitting the string this much

</p>
<p>
<%= t(".css_basics.description.css_selectors_and_rules_html",
selector_bold: tag.strong(t(".css_basics.description.selector")),
body_tag_code: tag.code("body"),
h1_tag_code: tag.code("h1"),
property_bold: tag.strong(t(".css_basics.description.property")),
value_bold: tag.strong(t(".css_basics.description.value"))) %>
</p>
<p>
<%= t(".css_basics.description.examples_header") %>
</p>
<ul>
<li>
<%= t(".css_basics.description.font_size_example_html",
font_size_css_code: tag.code("body {font-size: 1.1em;}")) %>
</li>
<li>
<%= t(".css_basics.description.background_color_example_html",
background_color_css_code: tag.code("#header {background-color: purple}")) %>
</li>
<li>
<%= t(".css_basics.description.blink_example_html",
blink_css_code: tag.code(".meta {font-style: blink}")) %>
</li>
</ul>

<p><%= t(".css_basics.description.css_tutorials") %></p><ul>
<li><%= link_to(t(".css_basics.description.css_intro_tutorial"), "https://www.w3schools.com/css/css_intro.asp") %></li>
<li><%= link_to(t(".css_basics.description.css_getting_started_tutorial"), "http://developer.mozilla.org/docs/CSS/Getting_Started") %></li>
</ul>
</dd>

</dl>
2 changes: 1 addition & 1 deletion app/views/skins/_form.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@

<fieldset>
<legend><%= ts('CSS') %></legend>
<h3 class="heading"><%= f.label :css, ts('CSS') %> <%= link_to_help 'skins-creating' %></h3>
<h3 class="heading"><%= f.label :css, t(".css") %> <%= link_to_help_modal(help_skins_creating_path, t(".skins_creating_help_title")) %></h3>
<p>
<%= f.text_area :css, :cols => 70, :class => 'large observe_textlength' %>
<%= live_validation_for_field("skin_css", maximum_length: ArchiveConfig.CONTENT_MAX_DISPLAYED) %>
Expand Down
2 changes: 1 addition & 1 deletion config/config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -361,7 +361,7 @@ BANNED_MULTIMEDIA_SRCS: []
# Allowed CSS
#
# *** IMPORTANT: if you edit these values please also update the
# skins-creating.html file in public/help ***
# skins_creating.html.erb file in app/views/help ***
#
# the following properties and keywords will be ADDED to the default set allowed
# in user-submitted CSS code, along with:
Expand Down
68 changes: 68 additions & 0 deletions config/locales/views/en.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1085,6 +1085,72 @@ en:
description: This preference allows you to select your preferred language for email messages that the Archive sends to you. The templates for these messages are currently being updated and translated by our volunteers. This is a work in progress; not all messages will be available in languages other than English at this time. If the template for that email has not yet been translated to your language, it will be sent in English.
header: Set preferred locale
page_heading: Locale Preferences
skins_creating:
allowed_keywords:
description_html: We allow all standard CSS keyword values (e.g., %{absolute_code}, %{bottom_code}, %{center_code}, %{underline_code}, etc.).
header: Keywords
allowed_properties: We allow the following properties including all their variations (and shorthand values)
allowed_specific_properties: We also allow the following specific properties
colors:
common_color_names: the set of commonly-supported color names
description_html: You can specify colors using hex values (eg, %{black_hex_code} is black in hex) or with RGB or RGBA values (e.g., %{black_rgb_code} and %{black_rgba_code} both give you black). This may be safer since not all browsers will necessarily support all color names. However, color names are more readable and easier to remember, so we also allow color names. (We suggest you stick to %{common_color_names_link}.)
header: Colors
comments:
description: Comments are stripped from CSS.
header: Comments
css_basics:
description:
background_color_example_html: 'Inside any tags with the id "header", set the background color to purple: %{background_color_css_code}'
blink_example_html: 'Inside any tags with the class "meta", make the text blink: (we do not advise this) %{blink_css_code}'
css_getting_started_tutorial: Getting Started (CSS Tutorial) from MDN
css_intro_tutorial: CSS introduction tutorial
css_selectors_and_rules_html: The %{selector_bold} is either the name of an HTML tag (like %{body_tag_code} or %{h1_tag_code}), or it can be an id or class that has been set on a tag. The %{property_bold} is what you want to change in the contents of that tag (for instance the font size), and the %{value_bold} is what you want to set it to.
css_tutorials: 'Some useful CSS tutorials for more information:'
examples_header: 'Examples:'
font_size_example_html: 'Inside the "body" tag, set the font size slightly larger than the baseline: %{font_size_css_code}'
line_of_css_html: 'A line of CSS code looks pretty much like this: %{example_css_code}'
property: property
selector: selector
value: value
header: 'If you are new to CSS, here are the basics:'
custom_properties:
description:
accepting_properties_html: All properties except %{font_family_code} and %{content_code} accept the %{var_code} function as a value. We don't allow fallbacks.
availability_html: Custom properties and the %{var_code} function are only available for site skins, and won't work on work skins.
names: Custom property names can contain any combination of lowercase letters (a-z) in the English alphabet, numerals zero to nine (0-9), dashes (-), and underscores (_). They can't contain single (') or double (") quotation marks, or URLs. Any uppercase letters (A-Z) will be converted to lowercase.
header: Custom Properties (Variables)
external_urls:
description_html: We allow external image URLs (specified as %{example_url_code}) in JPG, GIF, and PNG formats. Please note, however, that skins using external images will not be approved for public use.
header: URLs
font_family:
description:
cannot: cannot
font_names_html: In the %{font_family_code} property, we allow you to specify any font with an alphanumeric name. You can (but don't have to) specify the name with single or double quotes around it, just make sure the quotes match. (e.g., 'Gill Sans' and "Gill Sans" are both fine; 'Gill Sans" won't work.) Keep in mind that a font has to be installed on the user's operating system to work. It's a good idea when specifying fonts to use fallbacks in case your first-choice font isn't available. See %{web_safe_fonts_link}.
no_font_face_html: We %{cannot_bold} allow the %{font_face_code} attribute. Sorry! If you have an uncommon font that you want to use in a skin you would like to share, we suggest adding a comment in the skin's "Description" field with a pointer to a place for users to download the font themselves, and using web-safe fonts as fallbacks.
separate_properties_html: Unfortunately, you cannot use the %{font_code} shorthand in your CSS. All font properties have to be specified separately, e.g., %{font_properties_css_code}
web_safe_fonts: a set of web-safe fonts with fallbacks
header: Font and Font Family
intro:
description: 'Note that for security reasons, you can only use a limited set of CSS code: all other declarations and comments will be removed!'
header: You can create new skins for the Archive using our wizard, or by writing your own CSS (cascading style sheets) code
numeric_values:
description:
em_unit_html: 'PS: we highly encourage learning about and using %{em_code}, which lets you set things relative to the viewer''s current font size! It will make your layouts much more flexible and responsive to different browser/font settings.'
precision_html: 'You can specify numeric values up to two decimal places, either as percentages or in %{various_units_link}: %{units_list_code}'
units_list: "%{cm_code}, %{em_code}, %{ex_code}, %{in_code}, %{mm_code}, %{pc_code}, %{pt_code}, %{px_code}"
various_units: various units
header: Numeric Values
one_declaration_per_ruleset:
description_html: 'The CSS parser we use retains only one declaration for each property, meaning that rulesets like %{repeated_declarations_css_code} will have all but the last %{background_code} declaration removed (so your gradient would only show up in WebKit browsers). To avoid losing declarations with repeated properties, split each one into its own ruleset, like so:'
header: Use only one declaration per property per ruleset
scale:
description_html: You can specify scale (for the %{transform_code} property) as %{scale_numeric_value_code} where the numeric value can be specified up to two decimal places.
header: Scale
numeric_value: numeric value
skin_examples:
description_html: "%{public_skins_link} are visible and you can read their code and copy them to edit for your own use."
header: Look at other public skins for examples
public_skins: All approved public skins
home:
about:
ao3:
Expand Down Expand Up @@ -2255,10 +2321,12 @@ en:
confirm_delete:
confirm_html: Are you sure you want to <strong><em>delete</em></strong> the skin "%{skin_title}"?
form:
css: CSS
description: Description
icon: Upload a preview (png, jpeg or gif)
public: Apply to make public
skin_type: Type
skins_creating_help_title: Skins creating
title: Title
revert_skin_form:
revert_to_default: Revert to Default Skin
Expand Down
2 changes: 2 additions & 0 deletions config/routes.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -636,12 +636,14 @@
%w[
first_login
preferences_locale
skins_creating
].each do |action|
get "/help/#{action}", to: "help##{action}"
end

# Redirects for moved help files
get "/first_login_help", to: redirect("/help/first_login")
get "/help/skins-creating.html", to: redirect("/help/skins_creating")

get 'search' => 'works#search'
post 'support' => 'feedbacks#create', as: 'feedbacks'
Expand Down
Loading
Loading