Welcome to the RuneGlory Wiki, where we do our best to make your life easier!

You can use the search menu on the right side of the wiki (or at the bottom if you are on mobile) to search for the page you are looking for. The most popular pages can be found on the right side of the wiki aswell (or again at the bottom if you are on mobile).

Difference between revisions of "User:Jplayer"

From RuneGlory
Jump to: navigation, search
 
(87 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
Hello, this is just a preview.
 
−
 
−
- Jplayer
 
−
 
 
<html>
 
<html>
 +
<!-- TEXT -->
 +
<p style="font-weight: bold;">Text</p>
 +
<input type="text" maxlength="30" value="Usertitle" id="text" class="update">
 +
<br>
 +
<br>
 +
<!-- COLOR -->
 +
<p style="font-weight: bold;">Color</p>
 +
<input id="color" type="color" value="#C0C0C0" class="update">
 +
<br>
 +
<br>
 +
<!-- GLOW COLOR -->
 +
<p style="font-weight: bold;">Glow Color</p>
 +
<input id="glowColor" type="color" value="#C0C0C0" class="update">
 +
<br>
 +
<br>
 +
<!-- GLOW RADIUS -->
 +
<p style="font-weight: bold;">Glow Radius</p>
 +
<div class="itemBackground"><input id="glowRadius" type="range" min="0" max="1000" value="1000" class="update"></div>
 +
<br>
 +
<!-- TEXT FORMATTING -->
 +
<p style="font-weight: bold;">Text Formatting</p>
 +
<div class="itemBackground" style="padding: 10px;">
 +
<label><input type="checkbox" id="bold" class="update" checked=""><div style="line-height: 20px;">Bold</div></label>
 +
<label><input type="checkbox" id="italic" class="update"><div style="line-height: 20px;">Italic</div></label>
 +
<label><input type="checkbox" id="strikethrough" class="update"><div style="line-height: 20px;">Strikethrough</div></label>
 +
<label><input type="checkbox" id="glitter" class="update"><div style="line-height: 20px;">Glitter</div></label>
 +
</div>
 +
<br>
 +
<!-- PREVIEW -->
 +
<p style="font-weight: bold;">Preview</p>
 +
<div style="padding: 30px; background-color: #1D1D1D; text-align: center; border: 1px solid #A2A2A2; font-size: 12px;">
 +
<span id="preview"></span>
 +
</div>
 +
<br>
 +
<!-- HTML CODE -->
 +
<p style="font-weight: bold;">HTML Code</p>
 +
<input type="text" id="code">
  
−
<script>
 
  
−
window.onload = function() {
 
  
−
$( "div#mw-page-base, div#mw-head-base" ).remove();
 
−
$( "body" ).prepend( "<nav></nav>" );
 
−
$( "div#content, div#mw-navigation" ).wrapAll( "<div id='wrap'></div>" );
 
−
$( "div#mw-navigation" ).insertBefore( "div#content" );
 
−
// $( "<div id='notice'><p>Announcement message goes here.</p></div>" ).insertAfter( "div#mw-navigation" );
 
−
$( "div#content" ).wrap( "<div id='content-sidebar-wrap'></div>" );
 
−
$( "div#mw-panel" ).insertBefore( "div#content" );
 
−
$( "div#content" ).wrap( "<div id='content-wrap'></div>" );
 
−
$( "div#contentSub" ).insertBefore( "div#content" );
 
−
$( "<div id='navigation'></div>" ).insertBefore( "div#content" );
 
−
$( "div#right-navigation" ).appendTo( "div#navigation" );
 
−
$( "div#left-navigation" ).appendTo( "div#navigation" );
 
  
  
−
$( "div#siteNotice" ).insertAfter( "div#mw-navigation" );
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 +
<script type="text/javascript">
  
 +
update();
  
−
if ( $( "span.subpages" ).length ) {
+
$( "input.update" ).change( function() {
−
$( "span.subpages" ).html( $( "span.subpages" ).children() );
+
update();
−
var title = $( "h1#firstHeading" ).html().split('/');
+
});
−
$( "<span>" + title[ title.length - 1 ] + "</span>" ).appendTo( "span.subpages" );
 
−
} else {
 
−
$( "div#contentSub" ).prepend( "<span class='subpages'></span>" );
 
−
var title = $( "h1#firstHeading" ).html().split('/');
 
−
$( "<span>" + title[ title.length - 1 ] + "</span>" ).appendTo( "span.subpages" );
 
−
}
 
  
−
}
+
function update() {
  
−
</script>
+
var text = $( "input#text" ).val();
 +
var color = $( "input#color" ).val();
 +
var glowColor = $( "input#glowColor" ).val();
 +
var glowRadius = $( "input#glowRadius" ).val() / 100;
  
 +
// TEXT SHADOW
  
 +
if ( glowRadius == 0 ) {
 +
var textShadow = "text-shadow: none;";
 +
} else {
 +
var textShadow = "text-shadow: 0 0 " + glowRadius + "px " + glowColor + ";";
 +
}
  
−
<style>
+
// TEXT FORMATTING
  
−
p {
+
if ( $( "input#bold" ).is( ":checked" ) ) {
−
    line-height: 20px;
+
var fontWeight = "bold;";
−
    font-size: 14px;
+
} else {
−
    margin: 0px;
+
var fontWeight = "normal;";
−
    color: black;
+
}
−
}
 
  
 +
if ( $( "input#italic" ).is( ":checked" ) ) {
 +
var fontStyle = "italic;";
 +
} else {
 +
var fontStyle = "initial;";
 +
}
  
 +
if ( $( "input#strikethrough" ).is( ":checked" ) ) {
 +
var textDecoration = "line-through;";
 +
} else {
 +
var textDecoration = "initial;";
 +
}
  
 +
if ( $( "input#glitter" ).is( ":checked" ) ) {
 +
var background = "url(http://forum.grinderscape.org/images/Crowns/Glitter.gif);";
 +
} else {
 +
var background = "none;";
 +
}
  
 +
var textFormatting = "font-weight:" + fontWeight + "font-style:" + fontStyle + "text-decoration:" + textDecoration + "background:" + background;
  
−
nav {
+
var style = "color:" + color + ";" + textShadow + textFormatting;
−
    height: 40px;
+
$( "span#preview" ).html( text ).attr( "style", style );
−
    background-color: #CB5E5E;
 
−
}
 
  
−
div#wrap {
+
$( "input#code" ).val( "<span style='" + style + "'>" + text + "</span>"  );
−
    background-color: #776BA6;
 
−
    width: 1200px;
 
−
    margin: 30px auto;
 
−
    padding: 30px 30px 0 30px;
 
−
}
 
  
−
div#mw-head {
 
−
    position: initial;
 
 
}
 
}
  
−
  div#p-personal {
+
</script>
−
    position: initial;
 
−
    text-align: right;
 
−
    padding-bottom: 30px;
 
−
}
 
−
 
 
−
  #p-personal ul {
 
−
    padding: 0;
 
−
    display: inline-block;
 
−
    background-color: #CB5E5E;
 
−
}
 
−
 
 
−
    #p-personal ul li {
 
−
    float: initial;
 
−
    margin: 0;
 
−
    font-size: 14px;
 
−
    line-height: 20px;
 
−
    display: inline-block;
 
−
    padding: 10px!important;
 
−
    background: none;
 
−
}
 
−
 
 
−
div#siteNotice {
 
−
    background-color: #CB5E5E;
 
−
    padding: 10px;
 
−
    margin-bottom: 30px;
 
−
    text-align: center;
 
−
}
 
−
 
 
−
  div#localNotice {
 
−
    margin-bottom: 0;
 
−
}
 
−
 
 
−
div#content-sidebar-wrap {
 
−
    display: flex;
 
−
}
 
−
 
 
−
  div#mw-panel {
 
−
    position: initial;
 
−
    width: 20%;
 
−
    padding: 0px 30px 0px 0px;
 
−
    box-sizing: border-box;
 
−
}
 
−
 
 
−
  div#p-logo {
 
−
    display: none;
 
−
}
 
−
 
 
−
  div#mw-panel div.portal {
 
−
    background: #6BA673;
 
−
    margin: 0;
 
−
    padding: 0;
 
−
    margin-bottom: 30px;
 
−
}
 
−
 
 
−
    div#mw-panel div.portal h3 {
 
−
    font-size: 14px;
 
−
    line-height: 20px;
 
−
    background-color: #CB5E5E;
 
−
    padding: 10px;
 
−
    cursor: initial;
 
−
    display: block!important;
 
−
}
 
−
 
 
−
    div#mw-panel div.portal div.body {
 
−
    margin: 0!important;
 
−
}
 
−
 
 
−
    div#mw-panel div.portal div.body ul li {
 
−
    line-height: 20px;
 
−
    font-size: 14px;
 
−
    padding: 10px;
 
−
}
 
−
 
 
−
  div#content-wrap {
 
−
    width: 80%;
 
−
    box-sizing: border-box;
 
−
}
 
−
 
 
−
  #contentSub, #contentSub2 {
 
−
    background-color: #CB5E5E;
 
−
    padding: 10px;
 
−
    font-size: 14px;
 
−
    line-height: 20px;
 
−
    margin: 0;
 
−
    margin-bottom: 30px;
 
−
}
 
−
 
 
−
  div#navigation {
 
−
    display: flex;
 
−
    position: relative;
 
−
    background-color: #CB5E5E;
 
−
}
 
−
 
 
−
    div#left-navigation {
 
−
    margin: 0;
 
−
}
 
−
 
 
−
    div#right-navigation {
 
−
    position: absolute;
 
−
    right: 0;
 
−
    margin: 0;
 
−
}
 
−
 
 
−
 
 
−
    div.vectorTabs {
 
−
    background: none;
 
−
    padding: 0;
 
−
    height: initial;
 
−
}
 
−
 
 
−
      div.vectorTabs ul {
 
−
    background: none;
 
−
}
 
−
 
 
−
      div.vectorTabs ul li {
 
−
    background: none;
 
−
    font-size: 0;
 
−
}
 
−
 
 
−
      div.vectorTabs li.selected {
 
−
    background: #6BA673;
 
−
}
 
−
 
 
−
        div.vectorTabs span {
 
−
    background: none;
 
−
}
 
−
 
 
−
        div.vectorTabs li a {
 
−
    font-size: 14px;
 
−
    line-height: 20px;
 
−
    padding: 10px;
 
−
    height: initial;
 
−
}
 
−
 
 
−
  div#content {
 
−
    margin: 0;
 
−
    border: 0;
 
−
    background-color: #6BA673;
 
−
    margin-bottom: 30px;
 
−
}
 
−
 
 
−
    h1#firstHeading {
 
−
    display: none;
 
−
}
 
−
 
 
−
div#footer {
 
−
    margin: 0;
 
−
    background-color: #776BA6;
 
−
    padding: 30px;
 
−
}
 
−
 
 
−
div#footer #footer-info li {
 
−
    padding: 0;
 
−
    font-size: 14px;
 
−
    line-height: 20px;
 
−
    text-align: center;
 
−
}
 
−
 
 
−
ul#footer-places {
 
−
    display: none;
 
−
}
 
−
 
 
−
ul#footer-icons {
 
−
    display: none;
 
−
}
 
−
 
 
−
</style>
 
−
 
 
−
 
 
−
 
 
 
</html>
 
</html>

Latest revision as of 00:25, 27 May 2016

Text



Color



Glow Color



Glow Radius


Text Formatting


Preview


HTML Code

Retrieved from "https://wiki.runeglory.com/index.php?title=User:Jplayer&oldid=1251"