Custom CSS AI Guide


Get AI To Do It!

Not a CSS expert? No problem. You can easily use Artificial Intelligence (like ChatGPT, Claude, or Gemini) to write incredible custom styles and animations for your Game Launcher Creator objects.

Because the GLC proprietary rendering engine handles a lot of the heavy lifting—like object sizing and screen positioning—AI can sometimes get confused. It doesn't know how our engine works, so it might try to write code that conflicts with your launcher's built-in settings. To get the perfect code on the first try, you need to provide the AI with the right context and a strict set of rules.


The Golden Rules of GLC Custom CSS

Before you copy the prompt below, here are the absolute "Do Not's" when applying external CSS to your objects:

  • Never use position: (e.g., position: absolute;, relative, or fixed). GLC handles all spatial coordinates automatically. Overriding this will break your object's placement on the canvas.
  • Avoid static width and height: You already set the size of your object in the editor. If you want a button to get bigger when you hover over it, tell the AI to use transform: scale(1.1); instead of changing the actual pixel width and height.

The Ultimate AI Prompt

Copy the text in the box below, paste it into your favorite AI chatbot, and fill in the bracketed area at the very end with your desired design. This code block uses our built-in documentation shortcode so you can easily copy it with one click.

text

I am using Game Launcher Creator (GLC) to design a user interface. I want to add Custom CSS to an object.
Your task is to write the CSS code for me. You know nothing about the GLC engine, so here is the required context:
The engine automatically scopes the CSS directly to the specific object. Therefore, DO NOT write a main class selector, ID selector, or HTML wrapper. Just provide the base CSS properties, any pseudo-classes (like :hover, :active), and any @keyframes I might need.
IMPORTANT RULES YOU MUST FOLLOW:
Always append !important to every single property without exception.
DO NOT use the 'position' property (no absolute, relative, or fixed).
DO NOT set static 'width' or 'height' properties. If I ask for a grow/shrink effect, you must achieve it using 'transform: scale()'.
You can use @import rules at the very top for external fonts (like Google Fonts).
You can freely use properties like filter, box-shadow, text-shadow, border, background, clip-path, transition, and animation.
Example of the format I expect:
@import url('...');
background: #000 !important;
border-radius: 8px !important;
transition: all 0.3s ease !important;
:hover { transform: scale(1.05) !important; box-shadow: 0 0 10px red !important; }
Now, please write the CSS to make my object look like this:
[DESCRIBE WHAT YOU WANT HERE. Example: A futuristic neon green button that pulses on hover]

Important Notice

You MUST tell the AI what object you are applying the effect to. For example: button, image, video etc. so it knows what kind of styles it has access to.

How to Apply It

Once the AI generates your code, simply copy it, select your object in the GLC editor, open the Custom CSS property, and paste it right in. Hit save, and preview your launcher to see the magic happen!