Before you install: prerequisites
Switcheroo requires some changes before being installed. This step is very important, as the plugin will not work unless they are made.
Allow Ajax forms
Unofficial forms must be allowed to post on your forum. To do so is simple. Go to the admin panel and follow this path: General › General › Security. Uncheck the "Unauthorize unofficial forms to post messages and private messages on the forum" option and save your changes.
Activate the Toolbar
Make sure the Forumactif toolbar is activated. If it is not, follow this path to activate it: Modules › Toolbar › Configuration. If you have deactivated it because you don't plan to use it, there's a way to make it invisible at the end of this tutorial.
Keep the navbar
The main link bar (that allows to search, log in, register and log off) must be somewhere on all pages. If you have removed it from your templates, there's a solution to hide it at the end of the tutorial.
Install the plugin
The plugin itself is very easy to install. It's made up of two hosted Javascript files, which allow me to patch the scripts if needed and to make updates without requiring any action on your end.
monomer.js is where I centralise all functions I use on the daily. For example, it's with this script that the plugin's login form is called as a popup.
switcheroo.js is the main file that allows the plugin to work.
Unlike other scripts, Switcheroo is installed directly in a template on your forum. More specifically, it's put at the end of the
overall_footer_end template, before the
</body> tag.
- Code:
<!-- Plugin main bar, where the magic happens. Some values can be edited. -->
<nav id="switcheroo" class="switcheroo" direction="vertical" position="top"></nav>
<!-- Monomer.js and Switcheroo.js -->
<script src="https://cdn.jsdelivr.net/gh/caezd/switcheroo@master/monomer.js"></script>
<script src="https://cdn.jsdelivr.net/gh/caezd/switcheroo@master/switcheroo.js"></script>
<!-- Script to boot the plugin -->
<script>
(function() {
new Switcheroo('#switcheroo');
})();
</script>
Just like that, Switcheroo is installed and ready to go! It's not pretty yet, but CSS will get us there, don't fret! For now, let's focus on available options.
Plugin options
Switcheroo allows for some modifications through options that are built in the script. They're easy to modify, but these changes must be made in a very specific place within the script in order to work. Specifically, they must be set within the last two <script> </script> tags, in the template where it was installed.
- Code:
(function() {
new Switcheroo('#switcheroo', {
logo: ' logo ', /* accepts html, allows a logo redirecting to the forum homepage to be displayed */
enableReorder: true, /* enable drag&drop to switcher order account */
updateAvatar: true, /* enable right click to refresh the avatar */
confirm: true, /* prompts for a confirmation before switching accounts */
deleteIcon: '×', /* accepts html, icon to delete a linked account */
addIcon: '+', /* accepts html, icon to open the login and pairing form */
},
{
button: {
add: "Link a character",
},
msg: {
error: "An error has occured.",
confirm: "Please confirm to switcheroo.",
},
modal: {
password_label: "Password",
username_label: "Username",
login_button: "Login",
}
});
})();
Version 1.1.1A new set of parameters allows you to customize and translate every sentence used in the plugin.
Appearance
The CSS must be set for your whole forum. It's complete as-is, and has some variables so you can update the colours more easily.
- Code:
/*** ------------------------------- ***/
/*** SWITCHEROO - Par Monomer ------ ***/
/*** Gestionnaire de multicompte --- ***/
:root {
--text: #333;
--red: #D31141;
--link: #000;
--light: #FFF;
--lighter: #fafafa;
--grey: #F4F4F4;
--greyer: #E5E5E5;
--border: 1px solid #E5E5E5;
--font: 'Open Sans';
--gap-size: 16px;
--ease: cubic-bezier(0.4, 0.0, 0.2, 1);
--ease-bounce: cubic-bezier(0.43, 0.09, 0.38, 2.56);
}
/* BARRE SWITCHEROO --- */
.switcheroo {}
.switcheroo[position="static"] {
position: relative;
}
/* if bar on TOP */
.switcheroo[position="top"] {
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
/* if bar on BOT */
.switcheroo[position="bottom"] {
position: fixed;
bottom: 0;
left: 0;
z-index: 100;
}
/* HORIZONTAL bar */
.switcheroo[direction="horizontal"] {
width: 100%;
}
/* VERTICAL bar */
.switcheroo[direction="vertical"] {
height: 100%;
}
/* Circles display */
.switcheroo__squircles {
display: flex;
margin: 0;
padding: 0;
list-style: none;
padding: var(--gap-size);
gap: var(--gap-size);
}
.switcheroo[direction="horizontal"] .switcheroo__squircles {
flex-direction: row;
}
.switcheroo[direction="vertical"] .switcheroo__squircles {
flex-direction: column;
}
/* BAR --- */
.switcheroo {
color: var(--color-text);
background-color: var(--light);
border: var(--border);
font-size: 16px;
}
/* ACCOUNT DISPLAY ---*/
/* Circles */
.switcheroo__squircle {
position: relative;
display: grid;
place-items: center;
background-color: var(--grey);
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
transition: border-radius 128ms var(--ease);
}
/* Circles on hover */
.switcheroo__squircle:hover {
border-radius: 6px;
background: var(--greyer)
}
/* Avatar container */
.switcheroo__avatar {}
/* Avatar image */
.switcheroo__avatar img {
width: 40px;
height: 40px;
object-fit: cover;
object-position: center;
border-radius: 50%;
transition: border-radius 128ms var(--ease);
position: relative;
}
/* Avatar image on hover */
.switcheroo__avatar img:hover {
border-radius: 5px;
}
/* Connected account avatar */
.switcheroo__squircle.active,
.switcheroo__squircle.active img {
border-radius: 6px;
cursor: default;
}
/* Display of the hovered avatar */
.switcheroo__squircle:before {
content: "";
display: block;
background-color: var(--grey);
border: var(--border);
border-radius: 50%;
height: 48px;
width: 48px;
opacity: 0;
pointer-events: none;
position: absolute;
top: -5px;
bottom: 0;
right: 0;
left: -5px;
z-index: -1;
transform 128ms var(--ease), opacity 64ms var(--ease);
}
/* display of the selected/active account */
.switcheroo__squircle.active:before {
opacity: 1;
border-radius: 8px;
}
.switcheroo__squircle:hover:before {
border-radius: 8px;
opacity: 1;
transform 128ms var(--ease), opacity 64ms var(--ease);
}
/* Delete button */
.switcheroo__delete {
display: grid;
place-items: center;
position: absolute;
width: 16px;
height: 16px;
top: -7px;
right: -7px;
border-radius: 50%;
background-color: var(--red);
transform: scale(0);
opacity: 1;
transition: transform 128ms var(--ease), opacity 64ms var(--ease);
cursor: pointer;
color: var(--light);
}
.switcheroo__squircle:hover .switcheroo__delete {
opacity: 1;
transform: scale(1);
}
/* TOOLTIP NAME ---*/
/* Name container */
.switcheroo__popper {
background-color: var(--text);
padding: 0.68rem 1rem;
position: absolute;
width: -webkit-max-content;
width: max-content;
border-radius: 4px;
z-index: 0;
opacity: 0;
transition: opacity 64ms var(--ease), transform 128ms var(--ease-bounce);
pointer-events: none;
color: #fff;
}
/* name container if vertical */
.switcheroo[direction="vertical"] .switcheroo__popper {
left: 155%;
top: 50%;
transform-origin: left;
transform: translateY(-50%) scale(0.98);
}
/* name container if horizontal */
.switcheroo[direction="horizontal"] .switcheroo__popper {
top: 155%;
left: 50%;
transform-origin: top;
transform: translateX(-50%) scale(0.98);
}
/* tooltip arrow */
.switcheroo__popper:before {
content: "";
position: absolute;
width: 24px;
height: 24px;
background-color: var(--text);
z-index: -1;
}
/* tooltip arrow if vertical */
.switcheroo[direction="vertical"] .switcheroo__popper:before {
left: -2px;
top: 50%;
transform: translateY(-50%) rotate(-45deg);
}
/* tooltip arrow if horizontal */
.switcheroo[direction="horizontal"] .switcheroo__popper:before {
left: 50%;
top: -2px;
transform: translateX(-50%) rotate(-45deg);
}
/* Tooltip display on hover */
.switcheroo[direction="vertical"] .switcheroo__squircle:hover .switcheroo__popper {
opacity: 1;
transform: translateY(-50%) scale(1);
}
.switcheroo[direction="horizontal"] .switcheroo__squircle:hover .switcheroo__popper {
opacity: 1;
transform: translateX(-50%) scale(1);
}
/* LOGO --- */
.switcheroo__logo {
/* display: none */
/* à ajouter si vous voulez supprimer le logo*/
}
/* DIVIDER --- */
.switcheroo__divider {
/* display: none */
/* à ajouter si vous voulez supprimer le logo*/
background-color: var(--greyer);
border-radius: 3px;
transform: scale(0.8);
}
/* Divider if vertical */
.switcheroo[direction="vertical"] .switcheroo__divider {
width: 100%;
height: 2px;
}
/* Divider if horizontal */
.switcheroo[direction="horizontal"] .switcheroo__divider {
width: 2px;
}
/* ADD AN ACCOUNT ---*/
/* button : add an account */
.switcheroo__squircle--button {
transition: border-radius 128ms var(--ease);
color: var(--text);
}
.switcheroo__squircle--button:hover {
color: var(--light);
font-weight: bold;
}
/* LOGIN MODAL --- */
/* Background popup */
.monomer-overlay {
position: fixed;
z-index: 999;
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
transition: 0.2s opacity ease;
background: rgba(255, 255, 255, 0.6);
}
/* Login modal box */
.monomer-modal {
position: fixed;
z-index: 999;
top: 50%;
left: 50%;
opacity: 0;
width: 94%;
padding: 24px 20px;
transition: 0.2s opacity ease;
transform: translate(-50%, -50%);
border-radius: 5px;
background: var(--grey);
border: var(--border);
color: var(--text);
}
/* Login form */
.switcheroo__form {
padding: 48px;
background: var(--light);
border-radius: 5px;
}
/* field */
.switcheroo__form-row {
display: flex;
flex-flow: column;
align-items: flex-start;
margin-bottom: 16px;
}
/* field label */
.switcheroo__form-label {
margin-bottom: 8px;
font-size: 14px;
text-transform: uppercase;
font-weight: 600;
}
/* text input */
.switcheroo__form-input {
padding: 6px;
font-size: 16px;
border-radius: 4px;
width: 100%;
background-color: var(--light);
border: var(--border)!important;
border-bottom: 3px solid var(--greyer)!important;
color: var(--text);
cursor: text;
}
/* Login button */
.switcheroo__form-button {
border-radius: 8px;
padding: 4px 6px;
border: none;
outline: none;
box-shadow: none;
text-transform: uppercase;
font-size: 14px;
align-self: flex-end;
background-color: var(--light);
border: var(--border);
cursor: pointer;
}
.switcheroo__form-button:hover {
border: 1px solid transparent;
background: var(--text);
color: var(--light);
}
.monomer-modal.monomer-open, .monomer-overlay.monomer-open {
opacity: 1;
}
/* Close popup button */
.monomer-close {
font-size: 20px;
display: grid;
place-items: center;
width: 24px;
height: 24px;
position: absolute;
top: -7px;
right: -7px;
padding: 5px;
cursor: pointer;
color: #fff;
border: 0;
outline: none;
background: var(--red);
border-radius: 50%;
padding: 0;
}
.monomer-close:hover {
background: var(--text);
font-weight: 700;
}
Note This CSS is customised for the Blank Theme. It can also be used anywhere, no matter the forum version, as long as you make the necessary corrections.
Switcheroo also has a variant that allows you to change the orientation of the navbar (vertical or horizontal. Within the code installed in the
overall_footer_end template, you may notice that a "direction" is set:
<nav id="switcheroo" class="switcheroo" direction="vertical" position="top"></nav>
Direction
Set to "vertical" by default. You can replace it by "horizontal" to change the direction of the navbar.
Hide the prerequisites (optional)
Remove the Toolbar
This CSS will get rid of the toolbar without deactivating it, allowing the script to work. If it has added an unsightly blank space at the top of your forum, make sure it's not fixed to the screen, by setting the "Fix the toolbar" option to no.
- Code:
#fa_toolbar, #fa_toolbar_hidden {
display: none!important;
}
Hide the navbar
The default navbar is necessary for the plugin to work, but you may be using another one. The variable that allows the navbar to appear ({GENERATED_NAV_BAR}) is located in the overall_header template. If you can't find it, add this code tidbit right after the <body> tag.
- Code:
<div style="display: none;">{GENERATED_NAV_BAR}</div>
Home
Calendar
Latest images
Publications
FAQ
Search
Memberlist
Usergroups
Register
Log in
Discover Switcheroo