IMPORTANT

Drupal has recently updated its file structure at the beginning of 2022. This means all files uploaded to Drupal will now have a different URL than before and using the wrong URL structure will result in the file not displaying correctly and a page saying what you are looking for is not found.

The new file structure is as follows:

https://kidspirit.oregonstate.edu/sites/kidspirit.oregonstate.edu/files/YYYY-MM/FILE_NAME

Note that you are now required to include the year and month of when the file is uploaded to the URL.

The file name will be the exact string that Drupal assigns to your file after upload, this should be a string with all lower case letters and have no space. Include the file extension such as .pdf or .png to the file name.

Note that it might take a few moments for Drupal to actually process the URL and the file may not actually show up immediately. Double-check that you have entered the correct URL and wait for a few moments.

Why Do We Have It?

As part of the standardization effort, Boomerang has created a standardized header for program pages designed by Butterfly. This header is now available as a paragraph bundle called Hiro Register.

All KidSpirit program page has to use this header, no other header should be present.

How Do I Add One?

To add this to the page, simply add a new Paragraph and select Hiro Register. The header will be automatically added, you may wish to configure the header with the program information, proceed below for instructions.

DO NOT EDIT ANY PART OF THE BUNDLE

The Hiro Header bundle depends on custom code written by Boomerang, stuff might break if edited incorrectly.

Giant warnings are everywhere to prevent this, please don't ignore them unless you know what you are doing!

Header Stopped Working/Looking Funny

If somebody ignored the giant warning that says do not edit, Hiro Register will stop working, but fortunately, to fix this is rather simple, just remove the broken Hiro Register and add a new one, as simple as that. Yes, that means you will have to try and configure it correctly, so have fun!

Editing Code

WARNING: You must be familiar with HTML, CSS, and JS to proceed

If you are familiar with basic web development, here are the thing you can do:

• Edit CSS with inline CSS

• Edit link URL

• Change Page Program Color

• Set Program Picture

• Change Button Text

And here are the things you must not do:

• Remove any classes

• Create any elements that do not have any container

• Remove any parent elements

Configuring Header

WARNING: Please read the notice above

Change Program Color

To change program color, locate the CSS variable --ks-program-color, and you may add your color behind it. A handy list of all KidSpirit colors is included above it.

Accepted color types:

• HEX

• RGB

• RGBA

Change Program Picture

To change the program picture, locate the CSS function url() at the bottom of the code, simply paste the link to the new picture inside the brackets.

NOTE: The CSS function url() take links in a specific format like so: url('https://REPLACEWITHDOMAIN.TLD/PATH'). Make sure to include the quotation marks as well as the protocol. Relative paths are accepted.

Change Program Text

To change the program text, locate the <h2></h2> tag with the class anthonian-program-title, you may replace the text within the heading tags.

NOTE: Like all HTML tags, you can only replace what's in between the tag, removing the class will result in horror. E.g. <tag attribute="something">REPLACE TEXT HERE</tag> notice there is a right arrow > before the text and a left arrow < after the text.

Change Button Text

To change the button text, locate the <button></button> tag with the class anthonian-button, you may replace the text within the button tags.

NOTE: Like all HTML tags, you can only replace what's in between the tag, removing the class will result in horror. E.g. <tag attribute="something">REPLACE TEXT HERE</tag> notice there is a right arrow > before the text and a left arrow < after the text.

Change Button Link

To change the button text, locate the <a></a> tag around the button, to change the link, simply change the link inside the href attribute.

NOTE: This is an attribute, not a tag, you need to keep the quotation and not edit anything else. E.g. <tag attribute="REPLACE TEXT HERE">Child Elements</tag> notice the quotation marks around the text.