bbertucc
commented
3 years ago Brown, like Illinois, works from centralized branded components. Their framework is similar to Matt's theme branded system: https://app.uxpin.com/design-system/16dde7501939e7c54a40
Short description
Control logos, fonts, & colors of all sites within Edupack..
User stories
“As a Network Administrator or Site Administrator, I want to set the look and feel of my WordPress dashboard and theme without coding anything.”
"As a theme developer, I want to use the branding standards that Network Administers set in the theme I'm developing for their system."
What is the problem that this feature solves?
Branding is inconsistent on a WordPress installation. One set of branding standards go into styling the WordPress backend. Another set goes into the theme. A third set goes into each individual site.
Streamlining the branding controls will also:
1. Create a Proprietary Look and Feel - One of the biggest time sucks for network admins is explaining to site owners why they can't use a requested plugin. For example, a site owner may want a slideshow button that uses out-of-date code because that slideshow plugin has buttons that the site owner finds cool.
When the dashboard, login screen, and theme are branded to an institution we found that plugin requests are diminished because site owners do not have the expectation that they can get all the features they would with a WordPress install that they manage.
2. Adding Branding GUI - Many Network Admins are not coders. Branding Controls that can be managed through a GUI allows network admins without coding experience the ability to update the branding of the dashboard, login screen, and theme branding. The plugin also streamlines control of branding, giving Network Admins on MS and SIte Admins on SI the ability to instantly update branding across their entire system.
3. Allow Theme Devs to quickly access branding - Themes often reference relative branding standards. If branding is updated on the backend, for instance, more work has to go into updating branding in a theme. If themes referenced the centralized brand controls, Administrators would only have to update these controls in one place.
User Journey
A dashboard page under the "Appearance" menu for SI or "Network Admin Settings" for MS includes "Brand Controls." When a Super Admin on MS or Site Admin on SI click "Brand Controls" they are taken to a dashboard page with a form that includes the field groups:
Logo:
A text field labeled "Logo URL" must include a valid URL to an image.
On form submission, the entry must begin with
HTTPS://orHTTP://. If it doesn't, the user receives an errorYour entry must be a valid URL by including "HTTP://" or "HTTPS://".On form submission, the field must also end with a valid image format ('.jpg', '.jpeg', '.gif', '.png', or '.svg').Colors:
Four text fields grouped under the label "Colors" include different Hex Values.
The first field is labeled "Primary" with the description "Default button color and background of key branded elements."
The second field is labeled "Alternative" with the description "Link color and background of secondary branded elements."
The third field is labeled "Lightest" with the description "Background color."
The fourth field is labeled "Darkest" with the description "Paragraph and heading color."
Each field must be in proper hex format. On form submission, if any field doesn't include the proper format the error message "Proper hex value (ie- #ebebeb) is required."
Typography:
Seven text fields under the "Typography" field group define type settings.
The first field is labeled "@import URL". This text field that must include a valid URL. On form submission, the entry must begin with
HTTPS://orHTTP://. If it doesn't, the user receives an errorYour entry must be a valid URL by including "HTTP://" or "HTTPS://".Example submission:https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@300;400&family=New+Tegomin&family=Roboto:wght@100&display=swapfrom Google Fonts orhttps://use.typekit.net/ihd1ejj.cssfrom Adobe Fonts.The other six fields must be filled out.
The first of these six fields is "Standard Font Family" (ie-
'Merriweather', serif).Under "Standard Font Family" are two required fields: "Standard Font - Regular Weight" (ie-
400) and "Standard Font - Bold Weight" (ie-700).We also have an "Alternative Font Family" (ie-
'Fira Sans', sans-serif) required field.Under "Alternative Font Family" are two required fields: "Alternative Font - Regular Weight" (ie-
400) and "Alternative Font - Bold Weight" (ie-900).Is this ticket blocked by any other dependencies?
No.
What are the views that need designing?
The "Brand Controls" page needs to be designed. The page should account for validation text on each field if the field contains an error. The design should also include "Brand settings saved." notice when the form is submitted and fields are successfully saved.
What sub-functions build up this piece of functionality?
The field values need to be saved on successful submission of the form.
The location of the link to "Brand Control" should also be displayed conditionally, depending on if the install is an MS or SI. "Brand Control" is only available to Super Admins under "Network Admin Settings" on MS. "Brand Control" is available to SI Admins under the "Appearance" menu.
The field data needs to be queryable by themes:
get_edu_logo()returns logo URL field dataget_edu_colors()returns an array with different hex valuesget_edu_fonts()returns font URL field dataNext steps