User:Arskari/sandbox

Instrument Options visual

Instrument Name of the currently selected instrument	Lock Toggles the instrument lock, which prevents the current instrument from being placed or selected.	Copy Copies the settings of the current instrument to the clipboard as a string. The settings string is not instrument exclusive.	Load Reads the contents of the clipboard and parses it to settings, if possible.	Clone Creates a Clone of the current instrument and its settings.	Delete Deletes a cloned instance of an instrument.
Mute Mutes the current instrument.	Solo Mutes all other instruments.				Reset Resets all options to their default values.
Volume Slider that adjusts the instrument's global volume, before note volume or sequence volume.					Delay Toggles the delay effect.
Panning Slider that adjusts the instrument's panning, from 100% left to 100% right.
Detune Set the instrument's detune value, from -1200 (1 octave down) to 1200 (1 octave up). Shift click for finer control.
Reverb Select the reverb effect to use.	Reverb volume Slider that controls the amount of reverb for the instrument.
Distort Select the distort effect to use.	Distort volume Slider that controls the amount of distort for the instrument.
Equalizer Toggle that enables equalizer functions.	High EQ Slider controlling the high EQ pass.
	Mid EQ Slider controlling the mid EQ pass.
	Low EQ Slider controlling the low EQ pass.

this is going to get real ugly to edit if more options are added

Might be useful, but it's really just for eyecandy. Should definitely be added to a template first if it's going to be added.

---

WIP Main Page draft

Welcome to the Online Sequencer Wiki, a wiki for using and navigating Online Sequencer. Online Sequencer is a web-based music sequencer that allows users to create music saved online or on their computer and share it with other users.

Getting Started Features Instruments Instrument Options Equalizer

Online Sequencer News test.onlinesequencer.net : Synthesizer instrument added Sequence information moved to sidebar, sequence descriptions added Sustained smooth synth added, old sequences not affected Community Online Sequencer Forum Current Contest (9/1/23 – 9/21/2023) Winners announced on 9/30! Theme: Alternative Rock Last Contest (8/1/23 – 8/21/2023) Theme: Eurobeat Winning entries: blazing heart!! - vocal by LucentTear Power Trip by Mr. Magicman Radiance -End of The Universe - by N4T Pi-canto by Julesvpraag

End Draft

Deploy-ready version on User:Arskari/main page prototype

Eye candy, but for something actually important this time. The main page, right now, is a general overview of the site which makes sense, but doesn't really help with getting around the wiki itself. Userspace pages aren't private, so contribute if you want.

TODO:

• Navigation sections for useful articles
• Link to forum/community sites?
• Current community events bumper (Ongoing, Winner, ?) Needs styling for contests
• Online Sequencer updates/news Started, needs more entries. Changelog documentation page?
• Wiki users/article count?
• Using a single table for both bumpers causes wrapping issues on narrow windows/mobile, hence the div tags. Need a way to set them to the same height each.
  • The bumpers are now a flex box containing two inline elements, each with a single table contained in itself. This handles scaling and wrapping.
• Migrate sections currently on Main Page to their own articles (History, features)

Wikitext Breakdown

__NOTOC__
{|class="wikitable" style="width: 100%; border-spacing: 5px; text-align: center; margin-bottom: .3%;"
| <span style="font-size:125%;">Welcome to the '''{{SITENAME}}''', a wiki for using and navigating [https://onlinesequencer.net/ Online Sequencer].</span>
'''Online Sequencer''' is a web-based music [[wikipedia:Music_sequencer|sequencer]] that allows users to create music saved online or on their computer and share it with other users.
|}

This is the welcome banner, implemented as a wikitable. __NOTOC__ prevents a table of contents from being generated, but a __FORCETOC__ could be used after this if wanted for the rest of the main page.

<div style="display: flex; flex-wrap: wrap; column-gap: .3%;">

Opens a flexbox container to handle the two bumpers. flex-wrap: wrap enables wrapping at narrow screen sizes, such as shrinking a window or on a mobile device. column-gap adds space between items if on the same row.

<div style="display:inline; margin-left: auto; margin-right: auto; margin-bottom: .3%; flex-grow: 1; ">

Creates an inline element inside the flexbox. flex-grow causes the sections to stretch to fill out all possible width; having both at 1 makes them share the width.

{|class="wikitable" style="width: 100%; height: 100%; border-spacing: 5px; margin-top: 0px;"
|-
| style="vertical-align: top;" |

Creates a table inside the inline element, which is what is actually seen. Width and height are set to take up all space in their container. vertical-align must be applied to the row and makes sure content is aligned to the top, rather than centering by default.

{|class="wikitable" style="width: 100%; border-spacing: 5px; margin-top: 3px;"
!style="color:#FFFFFF; background:#254d88; text-align: left;"|'''Getting Started''' <!-- LINK ARTICLES HERE -->
|}

Banner using a table for color and styling.

* [[Features]]
* [[Instruments]]
* [[Equalizer]]
|}
</div>

Content in a list, then close the table, and finally close the inline.

<div style="display:inline; margin-left: auto; margin-right: auto; margin-bottom: .3%; flex-grow: 1;">

Second inline element.

{|class="wikitable" style="width: 100%; height: 100%; border-spacing: 5px; margin-top: 0px;"
|-
| style="vertical-align: top;" |

Second table.

{|class="wikitable" style="width: 100%; border-spacing: 5px; margin-top: 3px;"
!style="color:#FFFFFF; background:#254d88; text-align: left;"|'''Online Sequencer News''' <!-- For news about the site itself -->
|}

Another banner.

'''[https://test.onlinesequencer.net/ test.onlinesequencer.net]''' : Synthesizer instrument added
Sustained smooth synth added, old sequences not affected

Content in a list.

{|class="wikitable" style="width: 100%; border-spacing: 5px;"
!style="color:#FFFFFF; background:#254d88; text-align: left";|'''Community''' <!-- For contests, mod applications, other community stuff -->
|}

Another banner.

[https://test.onlinesequencer.net/forum/ Online Sequencer Forum]

Link to the forum.

----
[https://onlinesequencer.net/forum/thread-8016.html Current Contest] (8/1/23 – 8/21/2023)
Theme: Eurobeat
----
[https://onlinesequencer.net/forum/thread-7942.html Last Contest] (7/1/23 – 7/21/2023)
Theme: Jungle music
Winning entries:

[http://onlinesequencer.net/3509773 jungle jammin'] by [https://onlinesequencer.net/members/26737 Mr. Magicman]
[https://onlinesequencer.net/3519882 I was inspired by traditional African music] by [https://onlinesequencer.net/members/14215 Lopyt]
[https://onlinesequencer.net/3498969 Black Mamba] by [https://onlinesequencer.net/members/36102 JOwen]
|}
</div>

Remainder of the table. ---- creates a horizontal line to separate sections. Listing items by # creates a numbered list. Close the table and inline.

</div>

Close the flexbox.