Tutorial Low-Code Hacks

[Ambiloquous]

A (Relatively) Low-Code Guide to Hacking RPNation (Tags)

I'm lazy. I don't actually want to type ten thousand lines of repetitive code to make something vaguely nice-looking and organized.

Here's a thread of all the little hacks I found over the years that don't require a degree in CSS and forty hours of free time.

You might need a little bit of

basic BBCode literacy

before you start. Remember to click the "Toggle BB code" button on your text editor window before messing with code, and always remember your closing tag.

• Coloured Tabs
• Custom List Bullets

 

[Ambiloquous]

Coloured Tabs (Or Any Static Colour Element)

This one will make any images in your tabs look just slightly off-colour (the people I've used it around haven't noticed anything though), depending on the image and the degree of rotation. The reason for this is

funni hue-rotate math

, so it's not great for this sort of thing, but we'll take what we have. This is a hack, don't ask for perfection.

(If you haven't noticed, I've used this hack on the link in the text above. In fact, I use it on basically all my links.)

1. Wrap a
   [div]
   tag around the tabs with the hue-rotate filter set to a degree
   filter: hue-rotate(#deg);
   where # is a degree from 0 to 360. Radians (rad), gradians (grad) or turns (turn) can be used as well, but I prefer degree for its precision without need for decimals. Play around with with the values to see what colours come up.
   
   
   
2. For each
   [tab]
   body, wrap everything inside with a div with a filter property with the hue-rotate set to the "opposite" of the outside tag
   [div=filter: hue-rotate(-#deg);]
   , or in other words, the negative degree of what you set the tab colour to. Otherwise, the colours inside will also be "rotated" to another colour. For instance, if I didn't wrap the second tab body with the negative degree, the orange in the image would be blue.
   
   
   
   
   • Without Image
   • With Image

   • Hello, world.
   • I am an orange.

     
   
   
   
   [div=filter: hue-rotate(160deg);][tabs]
   [tab=Without Image][div=filter: hue-rotate(-160deg);]Hello, world.[/div][/tab]
   [tab=With Image][div=filter: hue-rotate(-160deg);]I am an orange. [heightRestrict=200][img]https://cdn.pixabay.com/photo/2016/10/07/13/36/tangerines-1721590_1280.jpg[/img][/heightRestrict][/div][/tab]
   [/tabs][/div]
   
   
3. If that's all you need, you can stop right here. Otherwise, if you want to get closer to the exact shade of a colour, you can add additional filters to try and finagle your way into that perfect shade. Here's a
   list of other filters
   that can be used in tandem with hue-rotate, though be careful, some of them can't be "reverted" in tab body (e.g., sepia, grayscale).
   
   The example below uses a
   [div]
   tag with
   filter: hue-rotate(160deg) saturate(200%) brightness(160%);
   to wrap all tabs and
   filter: hue-rotate(-160deg) saturate(50%) brightness(62.5%);
   to wrap the contents of the tab bodies. As you can see, there is no negative percentage of saturation or brightness, so I had do some math. If you don't want to use your brain, the formula for "reverting" a percentage value is (100/percentage)*100. If you haven't noticed, the orange image is actually duller in the second example compared to the first, so this is even less of an exact reversion.
   
   
   
   
   
   • Without Image
   • With Image

   • Hello, world.
   • I am an orange.

     
   
   
   
   [div=filter: hue-rotate(160deg) saturate(200%) brightness(160%);][tabs]
   [tab=Without Image][div=filter: hue-rotate(-160deg) saturate(50%) brightness(62.5%);]Hello, world.[/div][/tab]
   [tab=With Image][div=filter: hue-rotate(-160deg) saturate(50%) brightness(62.5%);]I am an orange. [heightRestrict=200][img]https://cdn.pixabay.com/photo/2016/10/07/13/36/tangerines-1721590_1280.jpg[/img][/heightRestrict][/div][/tab]
   [/tabs][/div]

 

[Ambiloquous]

Custom List Bullets

You can actually set a specific image as a bullet instead of the basic circle or the enumerated list that RPN gives you. Unfortunately, you can't change the size of the image nor the position, so you'll have to find or crop an image to the exact size and the position that you want the bullet to be.

Once upon a time, I actually copy-pasted every individual bullet I made with their respective margins and flexbox wrapper. I despised doing that every time, so I eventually searched around and found this hack.

1. Wrap a
   [div]
   tag with a list-style-image property
   list-style-image: url('imageURL');
   around a list, where imageURL is the image address of whatever image you'd like to have as a bullet. For reference to what size the image should be for the text not to be oddly spaced and the image not to cut off, the image used in the example below is 16x16 pixels. A 32x32 image also works, but that's when the line spacing and the position of the bullet start looking a little off. If you don't mind the weird spacing and the cut-off-ness, go for whatever size image you want.
   
   
   • these
   • are
   • orange-y stars
   
   
   [div=list-style-image: url('https://64.media.tumblr.com/63f17a2f151ca9e6d8f723468675e0ab/593edb2e955f7ddc-fd/s75x75_c1/b5e65c49200e88e092188b1a94aa0b3e3971ede3.gifv');][LIST]
   [*]these
   [*]are
   [*]orange-y stars
   [/LIST][/div]

1. If you don't like images, there are also
   gradients
   , which can be placed virtually anywhere that requires an image.
   
   The example below uses a
   linear-gradient()
   .
   
   
   • these
   • are
   • orange squares
   
   
   [div=list-style-image: linear-gradient(#E36129, orange);][LIST]
   [*]these
   [*]are
   [*]orange-y stars
   [/LIST][/div]