Official support and community forum for ForumSpark. Access announcements, troubleshooting, customization help, extension development, theme resources, and platform updates.
Cedric
·Themes & Extensions
·1 month ago
Boo & Co is now available in the marketplace.
Very fun, playful and sleek Halloween-themed theme. Select Boo & Co in theme selector.
View the product, screenshots and reviews
Use this topic for questions and discussion.
Cory
·Themes & Extensions
·7 months ago
Preview #1 - Preview #2
Use the version below for v1 boards; use this version for v2 and above.
Create a new custom profile field:
Admin CP → Users & Groups → Profile Fields → Add field
Handle: mood
Label: Mood
Show in mini profile: Enable
Admin CP → Themes → Board Templates → Below the board
<script>
const moodN = ['None', 'Aggressive', 'Amazed', 'Amused', 'Angelic', 'Angry', 'Artistic', 'Asleep', 'Bashful', 'Blah', 'Bored', 'Breezy', 'Brooding', 'Busy', 'Buzzed', 'Chatty', 'Cheeky', 'Cheerful', 'Cloud_9', 'Cold', 'Coldturkey', 'Confused', 'Cool', 'Crappy', 'Curious', 'Cynical', 'Daring', 'Dead', 'Depressed', 'Devilish', 'Doh', 'Doubtful', 'Drunk', 'Energetic', 'Fiendish', 'Fine', 'Flirty', 'Gloomy', 'Goofy', 'Grumpy', 'Hot', 'Hungover', 'In-Love', 'Innocent', 'Inpain', 'Inspired', 'Lonely', 'Lurking', 'Mellow', 'Mischievious', 'Nerdly', 'Nerdy', 'Notworthy', 'Paranoid', 'Pensive', 'Psychedelic', 'Question', 'Relaxed', 'Roflmao', 'Sad', 'Scared', 'Shocked', 'Sick', 'Sleepy', 'Sneaky', 'Snobbish', 'Spaced', 'Stressed', 'Sunshine', 'Sweettooth', 'Thinking', 'Tired', 'Twisted', 'Veggedout', 'Worried', 'Yeehaw'];
const moodI = ['https://files.jcink.net/uploads/cory//p478599.png', 'https://files.jcink.net/uploads/cory//p478511.gif', 'https://files.jcink.net/uploads/cory//p478512.gif', 'https://files.jcink.net/uploads/cory//p478513.gif', 'https://files.jcink.net/uploads/cory//p478514.gif', 'https://files.jcink.net/uploads/cory//p478515.gif', 'https://files.jcink.net/uploads/cory//p478516.gif', 'https://files.jcink.net/uploads/cory//p478517.gif', 'https://files.jcink.net/uploads/cory//p478518.gif', 'https://files.jcink.net/uploads/cory//p478520.gif', 'https://files.jcink.net/uploads/cory//p478521.gif', 'https://files.jcink.net/uploads/cory//p478522.gif', 'https://files.jcink.net/uploads/cory//p478523.gif', 'https://files.jcink.net/uploads/cory//p478524.gif', 'https://files.jcink.net/uploads/cory//p478525.gif', 'https://files.jcink.net/uploads/cory//p478526.gif', 'https://files.jcink.net/uploads/cory//p478527.gif', 'https://files.jcink.net/uploads/cory//p478528.gif', 'https://files.jcink.net/uploads/cory//p478529.gif', 'https://files.jcink.net/uploads/cory//p478530.gif', 'https://files.jcink.net/uploads/cory//p478531.gif', 'https://files.jcink.net/uploads/cory//p478532.gif', 'https://files.jcink.net/uploads/cory//p478533.gif', 'https://files.jcink.net/uploads/cory//p478534.gif', 'https://files.jcink.net/uploads/cory//p478535.gif', 'https://files.jcink.net/uploads/cory//p478536.gif', 'https://files.jcink.net/uploads/cory//p478537.gif', 'https://files.jcink.net/uploads/cory//p478538.gif', 'https://files.jcink.net/uploads/cory//p478539.gif', 'https://files.jcink.net/uploads/cory//p478540.gif', 'https://files.jcink.net/uploads/cory//p478541.gif', 'https://files.jcink.net/uploads/cory//p478542.gif', 'https://files.jcink.net/uploads/cory//p478543.gif', 'https://files.jcink.net/uploads/cory//p478544.gif', 'https://files.jcink.net/uploads/cory//p478545.gif', 'https://files.jcink.net/uploads/cory//p478546.gif', 'https://files.jcink.net/uploads/cory//p478547.gif', 'https://files.jcink.net/uploads/cory//p478548.gif', 'https://files.jcink.net/uploads/cory//p478549.gif', 'https://files.jcink.net/uploads/cory//p478550.gif', 'https://files.jcink.net/uploads/cory//p478553.gif', 'https://files.jcink.net/uploads/cory//p478554.gif', 'https://files.jcink.net/uploads/cory//p478555.gif', 'https://files.jcink.net/uploads/cory//p478556.gif', 'https://files.jcink.net/uploads/cory//p478557.gif', 'https://files.jcink.net/uploads/cory//p478558.gif', 'https://files.jcink.net/uploads/cory//p478559.gif', 'https://files.jcink.net/uploads/cory//p478560.gif', 'https://files.jcink.net/uploads/cory//p478561.gif', 'https://files.jcink.net/uploads/cory//p478562.gif', 'https://files.jcink.net/uploads/cory//p478564.gif', 'https://files.jcink.net/uploads/cory//p478565.gif', 'https://files.jcink.net/uploads/cory//p478566.gif', 'https://files.jcink.net/uploads/cory//p478567.gif', 'https://files.jcink.net/uploads/cory//p478568.gif', 'https://files.jcink.net/uploads/cory//p478569.gif', 'https://files.jcink.net/uploads/cory//p478570.gif', 'https://files.jcink.net/uploads/cory//p478571.gif', 'https://files.jcink.net/uploads/cory//p478572.gif', 'https://files.jcink.net/uploads/cory//p478573.gif', 'https://files.jcink.net/uploads/cory//p478574.gif', 'https://files.jcink.net/uploads/cory//p478575.gif', 'https://files.jcink.net/uploads/cory//p478576.gif', 'https://files.jcink.net/uploads/cory//p478577.gif', 'https://files.jcink.net/uploads/cory//p478578.gif', 'https://files.jcink.net/uploads/cory//p478579.gif', 'https://files.jcink.net/uploads/cory//p478580.gif', 'https://files.jcink.net/uploads/cory//p478581.gif', 'https://files.jcink.net/uploads/cory//p478582.gif', 'https://files.jcink.net/uploads/cory//p478583.gif', 'https://files.jcink.net/uploads/cory//p478584.gif', 'https://files.jcink.net/uploads/cory//p478585.gif', 'https://files.jcink.net/uploads/cory//p478586.gif', 'https://files.jcink.net/uploads/cory//p478587.gif', 'https://files.jcink.net/uploads/cory//p478588.gif', 'https://files.jcink.net/uploads/cory//p478589.gif'];
const label = document.querySelectorAll('label.input-label');
let value;
label.forEach(element => {
if (element && element.innerText.includes('Mood')) {
element.parentElement.nextElementSibling.querySelector('input').style.display = 'none';
const div = document.createElement('div');
div.style.display = 'flex';
div.style.flexWrap = 'wrap';
div.style.gap = '10px';
for (let i = 0; i < moodN.length; i++) {
const img = document.createElement('img');
img.src = moodI[i];
img.alt = moodN[i];
img.title = moodN[i];
img.className = 'mood-img';
img.width = '93';
img.height = '30';
img.style.cursor = 'pointer';
img.style.opacity = '0.5';
element.parentElement.nextElementSibling.appendChild(div);
div.appendChild(img);
}
value = element.parentElement.nextElementSibling.querySelector('input').value;
}
});
const flag = document.querySelectorAll('img.mood-img');
flag.forEach(element => {
if (element.title === value) {
element.style.opacity = '1';
}
element.addEventListener('click', function() {
flag.forEach(allElements => {
allElements.style.opacity = '0.5';
});
const title = element.title;
element.parentElement.parentElement.querySelector('input').value = title;
element.style.opacity = '1';
});
});
const about = document.querySelectorAll('div.profile-about__item');
about.forEach(element => {
if (element.querySelector('dt').innerText === 'Mood') {
const myMood = element.querySelector('dd').innerText;
for (let i = 0; i < moodN.length; i++) {
if (myMood === moodN[i]) {
element.querySelector('dd').innerHTML = `<img src="${moodI[i]}" title="${moodN[i]}" alt="${moodN[i]}">`;
}
}
}
});
const mini = document.querySelectorAll('div.mini-profile--custom dt');
mini.forEach(element => {
if (element.innerText === 'Mood') {
const myMood = element.nextElementSibling.innerText;
for (let i = 0; i < moodN.length; i++) {
if (myMood === '-') {
element.nextElementSibling.innerHTML = `<img src="${moodI[0]}" title="${moodN[0]}" alt="${moodN[0]}">`;
} else if (myMood === moodN[i]) {
element.nextElementSibling.innerHTML = `<img src="${moodI[i]}" title="${moodN[i]}" alt="${moodN[i]}">`;
}
}
}
});
</script>Preview #1 - Preview #2
Use the version below for v1 boards; use this version for v2 and above.
Create a new custom profile field:
Admin CP → Users & Groups → Profile Fields → Add field
Handle: flags
Label: Country
Show in mini profile: Enable
Admin CP → Themes → Board Templates → Below the board
<script>
const countryN = ['None', 'Afghanistan', 'Algeria', 'Argentina', 'Australia', 'Austria', 'Belgium', 'Brazil', 'Canada', 'Chile', 'China', 'Colombia', 'Denmark', 'Egypt', 'Ethiopia', 'France', 'Germany', 'Ghana', 'Greece', 'Hong Kong', 'India', 'Indonesia', 'Iran', 'Iraq', 'Ireland', 'Italy', 'Jamaica', 'Japan', 'Korea', 'Lebanon', 'Malaysia', 'Mexico', 'Morocco', 'Mozambique', 'Nepal', 'Netherlands', 'New Zealand', 'Nigeria', 'Norway', 'Pakistan', 'Peru', 'Philippines', 'Poland', 'Portugal', 'Russia', 'Saudi Arabia', 'South Africa', 'Spain', 'Sudan', 'Sweden', 'Switzerland', 'Taiwan', 'Thailand', 'Turkey', 'Uganda', 'Ukraine', 'United Kingdom', 'United States', 'Venezuela', 'Vietnam', 'Yemen'];
const countryI = ['https://files.jcink.net/uploads/cory//None.png', 'https://files.jcink.net/uploads/cory//Afghanistan.png', 'https://files.jcink.net/uploads/cory//Algeria.png', 'https://files.jcink.net/uploads/cory//Argentina_Flag_32.png', 'https://files.jcink.net/uploads/cory//Australia_Flag_32.png', 'https://files.jcink.net/uploads/cory//Austria_Flag_32.png', 'https://files.jcink.net/uploads/cory//Belgium_Flag_32.png', 'https://files.jcink.net/uploads/cory//Brazil_Flag_32.png', 'https://files.jcink.net/uploads/cory//Canada_Flag_32.png', 'https://files.jcink.net/uploads/cory//Chile_Flag_32.png', 'https://files.jcink.net/uploads/cory//China_Flag_32.png', 'https://files.jcink.net/uploads/cory//Colombia.png', 'https://files.jcink.net/uploads/cory//Denmark_Flag_32.png', 'https://files.jcink.net/uploads/cory//Egypt.png', 'https://files.jcink.net/uploads/cory//Ethiopia.png', 'https://files.jcink.net/uploads/cory//France_Flag_32.png', 'https://files.jcink.net/uploads/cory//Germany_Flag_32.png', 'https://files.jcink.net/uploads/cory//Ghana.png', 'https://files.jcink.net/uploads/cory//Greece_Flag_32.png', 'https://files.jcink.net/uploads/cory//Hong_Kong_Flag_32.png', 'https://files.jcink.net/uploads/cory//India_Flag_32.png', 'https://files.jcink.net/uploads/cory//Indonesia.png', 'https://files.jcink.net/uploads/cory//Iran.png', 'https://files.jcink.net/uploads/cory//Iraq.png', 'https://files.jcink.net/uploads/cory//Ireland_Flag_32.png', 'https://files.jcink.net/uploads/cory//Italy_Flag_32.png', 'https://files.jcink.net/uploads/cory//Jamaica_Flag_32.png', 'https://files.jcink.net/uploads/cory//Japan_Flag_32.png', 'https://files.jcink.net/uploads/cory//Korea_Flag_32.png', 'https://files.jcink.net/uploads/cory//Lebanon_Flag_32.png', 'https://files.jcink.net/uploads/cory//Malaysia_Flag_32.png', 'https://files.jcink.net/uploads/cory//Mexico_Flag_32.png', 'https://files.jcink.net/uploads/cory//Morocco.png', 'https://files.jcink.net/uploads/cory//Mozambique.png', 'https://files.jcink.net/uploads/cory//Nepal.png', 'https://files.jcink.net/uploads/cory//Netherlands_Flag_32.png', 'https://files.jcink.net/uploads/cory//New_Zealand_Flag_32.png', 'https://files.jcink.net/uploads/cory//Nigeria.png', 'https://files.jcink.net/uploads/cory//Norway_Flag_32.png', 'https://files.jcink.net/uploads/cory//Pakistan.png', 'https://files.jcink.net/uploads/cory//Peru.png', 'https://files.jcink.net/uploads/cory//Philippines_Flag_32.png', 'https://files.jcink.net/uploads/cory//Poland_Flag_32.png', 'https://files.jcink.net/uploads/cory//Portugal_Flag_32.png', 'https://files.jcink.net/uploads/cory//Russia_Flag_32.png', 'https://files.jcink.net/uploads/cory//Saudi_Arabia.png', 'https://files.jcink.net/uploads/cory//South_Africa.png', 'https://files.jcink.net/uploads/cory//Spain_Flag_32.png', 'https://files.jcink.net/uploads/cory//Sudan.png', 'https://files.jcink.net/uploads/cory//Sweden_Flag_32.png', 'https://files.jcink.net/uploads/cory//Switzerland_Flag_32.png', 'https://files.jcink.net/uploads/cory//Taiwan_Flag_32.png', 'https://files.jcink.net/uploads/cory//Thailand_Flag_32.png', 'https://files.jcink.net/uploads/cory//Turkey_Flag_32.png', 'https://files.jcink.net/uploads/cory//Uganda.png', 'https://files.jcink.net/uploads/cory//Ukraine.png', 'https://files.jcink.net/uploads/cory//United_Kingdom_flag_32.png', 'https://files.jcink.net/uploads/cory//United_States.png', 'https://files.jcink.net/uploads/cory//Venezuela_Flag_32.png', 'https://files.jcink.net/uploads/cory//Vietnam_Flag_32.png', 'https://files.jcink.net/uploads/cory//Yemen.png'];
const label = document.querySelectorAll('label.input-label');
let value;
label.forEach(element => {
if (element && element.innerText.includes('Country')) {
element.parentElement.nextElementSibling.querySelector('input').style.display = 'none';
const div = document.createElement('div');
div.style.display = 'flex';
div.style.flexWrap = 'wrap';
div.style.gap = '10px';
for (let i = 0; i < countryN.length; i++) {
const img = document.createElement('img');
img.src = countryI[i];
img.alt = countryN[i];
img.title = countryN[i];
img.className = 'country-flag';
img.width = '32';
img.height = '32';
img.style.cursor = 'pointer';
img.style.opacity = '0.5';
element.parentElement.nextElementSibling.appendChild(div);
div.appendChild(img);
}
value = element.parentElement.nextElementSibling.querySelector('input').value;
}
});
const flag = document.querySelectorAll('img.country-flag');
flag.forEach(element => {
if (element.title === value) {
element.style.opacity = '1';
}
element.addEventListener('click', function() {
flag.forEach(allElements => {
allElements.style.opacity = '0.5';
});
const title = element.title;
element.parentElement.parentElement.querySelector('input').value = title;
element.style.opacity = '1';
});
});
const about = document.querySelectorAll('div.profile-about__item');
about.forEach(element => {
if (element.querySelector('dt').innerText === 'Country') {
const myCountry = element.querySelector('dd').innerText;
for (let i = 0; i < countryN.length; i++) {
if (myCountry === countryN[i]) {
element.querySelector('dd').innerHTML = `<img src="${countryI[i]}" title="${countryN[i]}" alt="${countryN[i]}">`;
}
}
}
});
const mini = document.querySelectorAll('div.mini-profile--custom dt');
mini.forEach(element => {
if (element.innerText === 'Country') {
const myCountry = element.nextElementSibling.innerText;
for (let i = 0; i < countryN.length; i++) {
if (myCountry === countryN[i]) {
element.nextElementSibling.innerHTML = `<img src="${countryI[i]}" title="${countryN[i]}" alt="${countryN[i]}">`;
}
}
}
});
</script>Welcome to my new update of the theme (it was called liquid glass but now is jefx theme “you can change it if you want). Future updates will allow to put in forum spark 2.0
this theme has more options like my fav dynamic island where you can browse the internet if you want, hear music, and more.
it has style changer too changes the font letters and colors maybe shapes too.. i like the green one (Terminal)
it has the time date (maybe unnecessary to you) and you can block the theme notifications and sounds)
So enjoy my theme, guys. Have a nice day!
Cedric
·Themes & Extensions
·1 month ago
Flurry is now available in the marketplace.
Flurry, a playful winter theme with soft blues, snowy illustrations, and a welcoming feel. It brings a little seasonal cheer to your forum while keeping conversations easy to read.Choose from three illustrated scenes, toggle the snowfall, and switch to a compact layout to suit your browsing style. Flurry adapts to desktop, tablet, and mobile screens.We’d love to hear which scene is your favourite!
View the product, screenshots and reviews
Use this topic for questions and discussion.
Cedric
·Themes & Extensions
·1 month ago
Zenith is now available in the marketplace.
The view from the top. Zenith dresses your board in real photography: a full-width cover carries the header, and the same image flows through the category strips, the widget caps, the buttons, the forum markers and the footer, tinted by a two-color gradient overlay that runs across the page. Five covers ship with the theme, from snowy peaks to a city at dusk, and every one of them recolors the who...
View the product, screenshots and reviews
Use this topic for questions and discussion.
Cedric
·Themes & Extensions
·1 month ago
Evergreen is now available in the marketplace.
Evergreen, a woodland-inspired winter theme with forest greens, warm accents, and lantern-lit characters.Evergreen brings a cosy atmosphere to your community, pairing its illustrated header with clear forum sections and comfortable reading space. The built-in customizer includes snowfall and compact layout preferences, and the theme adapts across desktop and mobile.Come in, settle down, and join t...
View the product, screenshots and reviews
Use this topic for questions and discussion.
Cedric
·Themes & Extensions
·1 month ago
Wintertide is now available in the marketplace.
Wintertide, a winter theme with cool blue and lavender tones, rounded details, and a cast of snowy friends.Its illustrated header gives your community a seasonal welcome, while the clean forum layout keeps discussions front and centre. Members can adjust snowfall and spacing through the built-in customizer, with a responsive layout for smaller screens.A comfortable home for familiar faces and new...
View the product, screenshots and reviews
Use this topic for questions and discussion.
Cedric
·Themes & Extensions
·1 month ago
Solstice is now available in the marketplace.
Solstice, a photography-led winter theme with sweeping scenery and a spacious simple designed forum layout.Choose between Alpine Dusk, Snow Day, and Festive Glow, with independent image choices for the header and footer. The curved header blends into the page, while seasonal colour palettes complement your chosen scene.With optional snowfall, compact spacing, and a responsive layout, Solstice give...
View the product, screenshots and reviews
Use this topic for questions and discussion.
Cedric
·Themes & Extensions
·1 month ago
Relay is now available in the marketplace.
Relay brings glossy category strips, a bold sidebar, and an old school vibe to ForumSpark.Make it your own with:Four color presets and a custom color picker.Light, dark, and system appearance modes.Gloss, satin, or flat category strips.Adjustable spacing and collapsible navigation.Clear read/unread markers that follow your chosen color.A responsive layout for desktop and mobile.Members can save th...
View the product, screenshots and reviews
Use this topic for questions and discussion.
Cedric
·Themes & Extensions
·1 month ago
Carbon is now available in the marketplace.
Give your community a gaming-inspired look with Carbon Gaming: dark surfaces, accents, artwork, etc.Make it your own using the sliders icon beside your username. Choose colors, adjust unread markers, switch artwork, and customize the layout, all without changing anyone else’s view.Admins can upload their own artwork and set the default look for everyone. Artwork is included when exporting the them...
View the product, screenshots and reviews
Use this topic for questions and discussion.
Cedric
·Themes & Extensions
·1 month ago
A game room for your community. Members play bundled HTML5 games right on the board, chase personal bests, and take the crown on each machine.
55 bundled games - Puzzle, classics, action, cards and skill games, ready to play
Crowns - The best score on every game wears the crown, and losing it sends a notification
Leaderboards - All time and this week, per game and across the arcade
Hall of Fame - Who holds the most crowns
Widgets - Champions, top games and latest scores anywhere on your board
Fair play - Server side sessions, minimum play times and score caps keep the boards honest
Install through your ACP => Extension Directory
Please use this topic for bugs, support or requests.
Cedric
·Themes & Extensions
·1 month ago
Azure is now available in the marketplace.
A cool, bright, friendly theme in the spirit of the mid-2000s portals like Pixel2Life: a sky gradient with soft white swoosh lines, one clean white sheet, glass navigation tabs and a green welcome band. Modern underneath, nostalgic on the surface.Two-hue color system. Pick Classic, Ember or Berry, or set your own sky and accent colors. Members can choose their own pairing if you allow it.Welcome b...
View the product, screenshots and reviews
Use this topic for questions and discussion.
Cedric
·Themes & Extensions
·2 months ago
Absolute is now available in the marketplace.
Absolute is a love letter to the forums we grew up on, rebuilt with today's standards. Inspired by Absolution from Christian B (phpBB) If you ran a board in the golden era, this will feel like coming home. The whole forum floats as a single card above the page, under a shadow soft.One amber line holds the theme together. It runs beneath every category bar, under the tab you're standing on, along t...
View the product, screenshots and reviews
Use this topic for questions and discussion.
Liquid Glass 2.2!!!!!!! (it’s fixed, now loading animation page is better)
it has more customizable like (you can change any color you want, customize the cursor and the effects when you cursor is on a button/user menu)
wallpapers also you can add.
i put the theme so you can download it and ready to use.
This is the first theme I created
It has a loading page (if you want to customize it, you can see it in the layout)
There is a button where you can change colors (in general, the background is dark, me personally i don’t like the white mode.
Cedric
·Themes & Extensions
·1 month ago
Vista is now available in the marketplace.
Vista places your community on a full photographic backdrop: sharp at the horizon, softly frosted where the conversation lives. Panels stay light and open, menus float in as white glass, with a subtle accent color.Four sceneries. Mountain, galaxy, spring and winter. Admins upload and manage their own backdrops right from Board setup, and members pick their own view.Golden hour. The veil warms at d...
View the product, screenshots and reviews
Use this topic for questions and discussion.
Cedric
·Themes & Extensions
·1 month ago
Sleek Styles is now available in the marketplace.
Originally built by @Jamie — Converted to 2.0. Sleek Styles has always been something great, a deep blue calm theme with a sweep of silver. Originally built for Zetaboards by Jamie, later converted to V1, and now available for v2. This time there is a full dark mode available too and a matching footer. Enjoy!
View the product, screenshots and reviews
Use this topic for questions and discussion.
Cedric
·Themes & Extensions
·1 month ago
Mulberry Grove is now available in the marketplace.
Originally built by @Jamie — Converted for v2. A quiet corner of the forest for your community. Mulberry Grove pairs deep plum evenings with mulberry reds, an open header where a berry branch drifts behind your logo, and content that sits on a bright sheet like paper on a garden table. There are some improvements done from the original design, including a new color changer, a dark mode, redesigned...
View the product, screenshots and reviews
Use this topic for questions and discussion.
Cedric
·Themes & Extensions
·1 month ago
Nimbus is now available in the marketplace.
Nimbus turns your board's header into a living sky: an interactive particle field that links to your cursor, drifts with the occasional comet, and follows each visitor's local time of day, from a warm dawn to a starlit night.Everything runs on your gradient. Pick a pair and it flows through the header, the category crowns, buttons, markers and the footer. Forums with their own accent color carry i...
View the product, screenshots and reviews
Use this topic for questions and discussion.
Cedric
·Themes & Extensions
·2 months ago
Horizon is now available in the marketplace.
Horizon is the theme that turns your board into a place. One photograph or artwork runs behind everything: it fills the header, slips through the category strips, and settles into a starlit footer, always cut by soft curves instead of hard banner edges. And everything about it is managed from the little sun button in the corner of the board. No CSS, no template editing, just clicking around until...
View the product, screenshots and reviews
Use this topic for questions and discussion.
Cory
·Themes & Extensions
·7 months ago
Preview
Selecting a service type and inserting a video URL will embed the video within the post you create.
This code currently supports the following services:
Dailymotion
TikTok
Twitch
Vimeo
Change the width and height at the top of the script to your preference.
The width and height variables do not affect TikTok videos.
Admin CP → Themes → Board Templates → Below the board
<script>
const videoWidth = 560;
const videoHeight = 315;
const previewDIV = document.querySelector('.tiptap-toolbar');
if (previewDIV) {
const insertVideo = document.createElement('button');
insertVideo.type = 'button';
insertVideo.id = 'insert-video';
insertVideo.className = 'btn btn-secondary btn-sm';
insertVideo.innerText = 'Insert Video';
previewDIV.appendChild(insertVideo);
document.querySelector('#insert-video').addEventListener("click", () => {
if (document.querySelector('#video-container')) {
document.querySelector('#video-container').remove();
}
const videoSelector = `<div id="video-container" class="panel" style="border-width: 1px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%)"><div class="panel__sub-header">Insert a Video:</div><div style="padding: 1rem">Video Type:<br><select><option value="-1">Select One</option><option>Dailymotion</option><option>Facebook</option><option>TikTok</option><option>Twitch</option><option>Vimeo</option></select><br><br>Video URL:<br><input type="text"></div><div class="panel__sub-header"><button type="button" class="btn btn-secondary btn-sm submit">Submit</button> <button type="button" class="btn btn-secondary btn-sm cancel">Cancel</button></div></div>`;
document.body.insertAdjacentHTML('beforeend', videoSelector);
document.querySelector('#video-container button.cancel').addEventListener("click", () => {
document.querySelector('#video-container').remove();
});
document.querySelector('#video-container button.submit').addEventListener("click", () => {
const type = document.querySelector('#video-container select').value;
const video = document.querySelector('#video-container input').value;
document.querySelector('#video-container').remove();
if (type !== '-1') {
document.querySelector('.tiptap-editor p').innerHTML = document.querySelector('.tiptap-editor p').innerHTML + '[VIDEO=' + type + ']' + video + '[/VIDEO]';
}
});
});
}
const content = document.querySelectorAll('div.content');
if (content) {
content.forEach(post => {
post.innerHTML = post.innerHTML.replace(/\[VIDEO=(.+?)\](.+?)\[\/VIDEO\]/g, '<span class="video $1">$2</span>');
});
const video = document.querySelectorAll('span.video');
const script = document.createElement('script');
script.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v21.0';
document.body.appendChild(script);
const script2 = document.createElement('script');
script2.src = 'https://www.tiktok.com/embed.js';
document.body.appendChild(script2);
video.forEach(html => {
const vType = html.getAttribute('class').split('video ')[1];
let vID;
if (vType === 'Dailymotion') {
vID = html.innerText.split('/video/')[1];
html.innerHTML = `<iframe src="https://geo.dailymotion.com/player.html?video=${vID}" style="width:${videoWidth}px; height:${videoHeight}px; overflow:hidden; border:none;" allowfullscreen title="Dailymotion Video Player" allow="web-share"></iframe>`;
} else if (vType === 'Facebook') {
vID = html.innerText.split('/videos/')[1].split('/?')[0];
html.innerHTML = `<div class="fb-video" data-href="https://www.facebook.com/facebook/videos/${vID}/" data-width="${videoWidth}" data-height="${videoHeight}" ata-show-text="false"></div><div id="fb-root"></div>`;
} else if (vType === 'TikTok') {
vID = html.innerText.split('/video/')[1].split('?')[0];
let channel = html.innerText.split('.com/')[1].split('/')[0];
html.innerHTML = `<blockquote class="tiktok-embed" cite="https://www.tiktok.com/${channel}/video/${vID}" data-video-id="${vID}" data-embed-from="embed_page"><section></section></blockquote>`;
} else if (vType === 'Twitch') {
vID = html.innerText.split('/videos/')[1];
let loc = location.href.split('https://')[1].split('/')[0];
html.innerHTML = `<iframe src="https://player.twitch.tv/?video=v${vID}&parent=${loc}&autoplay=false" width="${videoWidth}" height="${videoHeight}" allowfullscreen></iframe>`;
} else if (vType === 'Vimeo') {
vID = html.innerText.substring(html.innerText.lastIndexOf('/') + 1, html.innerText.length);
html.innerHTML = `<iframe src="https://player.vimeo.com/video/${vID}" width="${videoWidth}" height="${videoHeight}" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>`;
}
});
}
</script>
Prism is now available in the marketplace.
Prism is built around a simple idea: no two members have to see the same forum. A small palette button in the corner lets every visitor pick their own header color and accent, in dark or light, and the whole board follows along. Lots of combinations, remembered on their device, no settings page in sight.The look itself takes its cue from the name. A faceted, gem-like artwork runs across the header...
View the product, screenshots and reviews
Use this topic for questions and discussion.
Cedric
·Themes & Extensions
·2 months ago
Jungle Safari is now available in the marketplace.
Take your community off the beaten path. Jungle Safari swaps the classic topbar for a bold expedition-style sidebar. Built for ForumSpark 2.0 boards.
View the product, screenshots and reviews
Use this topic for questions and discussion.
Cedric
·Themes & Extensions
·2 months ago
Cosmic is now available in the marketplace.
Cosmic brings a new colorful experience to your community. It inherits the forums accent colors and represents them as the category color.
View the product, screenshots and reviews
Use this topic for questions and discussion.