Home
| Dark mode for Twemoji button and other customizations |
OverviewDescriptionRecently, Forumotion included the option to add a Twemoji button via the Administration Panel. That button is not new, but until now you had to add it manually as an external Javascript code. Because of that change, some upgrades have been made, for example the ability to add a search bar like in Twitter.This post is to illustrate how other basic changes can be made, and they should work in any forum version. Demonstration Technical limitations› This tutorial is dedicated to the forums powered by Forumotion free forum service› It works with all Forumotion forums' versions InstallationIntroductionGeneral remarks or considerations about the installationCSSIn order to design the style of the resource, you need to go towards Administration Control Panel (ACP) Display CSS & Colors CSS Style Sheet and add append the following codesYou can change the size of the dropbox, adding this: You need to reply to the topic in order to see the code resources You can also change the background of the dropbox. If the background is dark, I suggest changing the color of the text as well... You need to reply to the topic in order to see the code resources ...and also the color of the link to Twemoji (both the default color and hovered), like this: You need to reply to the topic in order to see the code resources Finally, another possible change is the effect on the icons when they are hovered. By default, their opacity changes to 0.7, to avoid that you can simply change that attribute to inherit. You need to reply to the topic in order to see the code resources CSS CustomizationAfter that you can apply a custom effect, like a brightness filter;
or maybe an opacity filter a bit stronger than default. Another option is a scale change, with
Javascript & jQueryFor the next step you need to go towards Administration Control Panel (ACP) Modules HTML & Javascript Javascript codes management and create a new code - upon verifying that Javascript codes management is enabled.
Javascript CustomizationOn the very start, you can set the size of the icons (I recommend values between 16 and 72), and also the margin between emojis in the emoji list.The available emojis are either 16px, 36px or 72px. Any other value will use the next bigger option and apply a scale to reduce them to the desired size, for optimization. The CSS scale transformation commented on the first section will look better on icon sizes that are scaled this way. Also, the 16px icons look a bit different from the others; if you want icons with a size of 16px but using the scaled 36px version, go to the line 23 and change
To change the tooltip "Twemoji" to something else, for example "Emojis" as in this forum, go to the line 99 (in the very end of the code). Notes
|
| This resource belong to this community unless differently stated. No reproduction possible without our agreement, in accordance with article L122-1 of the CPI. |
