Points of Required Attention™
Acmlmboard 2 Released
Github/GIT | @acmlmboard | IRC: #abdev
Chatting Places
IRC: #kafuka | Discord

Affiliates
Super Mario Bros. X | Kuribo64
Views: 5,340,277
Main | FAQ | IRC chat | Memberlist | Active users | Latest posts | Calendar | Stats | Ranks | Online users | Search
07-21-18 09:23 PM
Guest: Register | Login

0 users currently in msg db 'Computer Address',0xa | 1 guest

Main - msg db 'Computer Address',0xa - Neat Features - Random Thread for showing off?
Next newer thread | Next older thread


Scrydan
Posted on 04-13-15 07:24 PM (rev. 2 of 04-13-15 07:28 PM by Scrydan) Link | ID: 84413

Birdo
Scryforce - Wanna test the RPG? Let me know in a PM.
Level: 78


Posts: 1891/2009
EXP: 4218544
Next: 163682

Since: 07-18-12
From: USA

Last post: 1086 days
Last view: 1068 days
I suppose I wanted to share with someone some of the things designed in my board. Considering the fact not many will see its light of day for quite some time.

So lately I've been looking at my schemes/(themes as you know them) editor and thought of some solution to a feature I wanted for quite some time.

Now the following as an example:
<link rel="stylesheet" href="css/abI.css?tz=-18000&minover=0">

Would need something like (id="schemefile") for this trick to be applied here as well as a style tag right below it. Now I recently added this feature but its quite nice that you can see any Scheme's effects through some JS magic.

The code that makes the magic happen:

function changescheme(cssfile)
{
document.getElementById('schemefile').href={path-to-cssfile}> document.getElementById('overridescheme').innerHTML = '';
}
function overridescheme()
{
document.getElementById('schemefile').href='';

var schemecss = document.getElementById('cssfield').value;
//I recommend you do some replace function to fix image pathing or you WILL have a broken Theme test when editing!
//This is because the path is different compared to where ever your CSS is located.
schemecss = schemecss.replace(/..\/..\/images\//gi, 'boardfiles/images/');
document.getElementById('overridescheme').innerHTML = schemecss;
}

$(document).ready(function()
{
changescheme('{insert-your-css}');
});


Now this is an example of what is used on the editor page. The first function is used on the main page, as well as a test page that tests all site elements. You can make display any test element and make sure it looks all right in all available schemes.

The other function is to use the current text input for the CSS to override the Scheme. Thus you can compare the current with the new. I've also linked the current scheme the logged user is using so they can compare user scheme, target scheme, and text scheme.

The result is quite nice and very useful to those who wish to edit and add new schemes/themes to their board.


Do note that this value (cssfile) from the schemes page is automatically filtered to only allow "a-zA-Z_" characters as the file's name on my site's editor. I do not advise on forgetting to filter the values as it could lead to bad results (or broken JS). The hook for the style only applies for the scheme editor page. Optionally you could filter out things like </style> or even < + > when you are using the CSS style. It is still a works in progress idea, but I like it and perhaps someone besides myself can benefit from this code.


I might share some more interesting features here and there. But don't let me have all the fun. Share some of your own here as well. Could be from anything you coded, but make sure it is something you've done.


Edit: Optionally for the overridescheme function; you can instead of no arguments list one optional one that can change the textbox's ID so that it can be used in more than one place but it isn't needed on my site.

Back to my favorite layout!

Next newer thread | Next older thread
Main - msg db 'Computer Address',0xa - Neat Features - Random Thread for showing off?


Acmlmboard v2.5.4 (5/28/2018)
© 2005-2018 Acmlm, Emuz, et al.

Page rendered in 0.034 seconds. (716KB of memory used)
MySQL - queries: 60, rows: 450/484, time: 0.022 seconds.