Main Site

Custom CSS

Whether you are designing your very first game launcher or you are a seasoned frontend architect, the Game Launcher Creator (GLC) Custom CSS engine is built to get out of your way and let your creativity flow. Powered by our proprietary runtime rendering technology, you have complete control over the look, feel, and animation of your launcher objects.

The Golden Rules of GLC Custom CSS

Before diving into the code, there are a few strict rules you must follow to ensure your designs don't conflict with the engine's built-in spatial rendering:

  • Never use position: (e.g., position: absolute;, relative, or fixed). GLC handles all object coordinates automatically. Overriding this will break your object's placement on the canvas.
  • Avoid static width and height: You already set the exact size of your object using the editor's properties. Changing these via CSS will cause layout issues.
  • Use transforms for resizing: If you want an object to grow or shrink (like a hover effect), achieve this using transform: scale(1.1); rather than changing its dimensions.

For Beginners: Styling Made Simple

If you have never written a line of code before, don't worry. This concept can be tricky at first, but our engine is designed to do the heavy lifting for you.

In traditional web design, you have to write complex "selectors" to tell the computer exactly which button or image you want to style. In GLC, you skip that step entirely.

When you open the Custom CSS dialog for an object, any code you type is automatically locked to that specific object. You don't need to know its ID or HTML structure. Just tell the engine what you want it to look like!

Pro Tip

You might notice the use of !important. Because the GLC engine has default styles to make sure your objects always look good out-of-the-box, appending !important to your properties tells the engine to prioritize your custom design.

css

/* Example: Making a simple red button */
background-color: red !important;
border: 2px solid white !important;
border-radius: 8px !important;

The Magic of Auto-Scoping

How does it work without breaking the rest of your launcher? Our runtime engine features a robust, isolated CSS parser. When you save your CSS, the engine automatically extracts your rules and scopes them strictly to your object's internal data name.

This means you can safely use standard states like :hover or :active without accidentally affecting every other element on your page.

For Advanced Developers: Pushing the Limits

If you know your way around stylesheets, the GLC proprietary engine gives you the keys to the kingdom. We fully support advanced CSS features seamlessly integrated into our custom rendering pipeline.

  • External Libraries & Fonts: You can use @import rules at the very top of your snippet to pull in Google Fonts or external stylesheets. Our engine securely hoists these to the document head.
  • Pseudo-classes & Elements: Full support for :hover, :active, :focus, ::before, and ::after.
  • Animations: You can define and trigger complex @keyframes animations directly within the object's CSS payload.

css

/* Advanced Example: Cyber Glitch Button /
/ This snippet imports a tech font, creates a cyberpunk cut-corner using clip-path, and adds a glowing hover state */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
background: #0b0b0b !important;
border: none !important;
border-right: 4px solid #ff0055 !important;
border-left: 4px solid #00e5ff !important;
color: #ffffff !important;
font-family: 'Share Tech Mono', monospace !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px) !important;
transition: all 0.2s ease !important;
:hover {
background: #1a1a1a !important;
text-shadow: -2px 0 #00e5ff, 2px 0 #ff0055 !important;
padding-left: 10px !important;
}

Developer Tier: The CSS Preset Library

We know that building high-fidelity UI elements from scratch takes time. For users on the Developer Tier, we've integrated a massive, cloud-based CSS Preset Library directly into the Custom CSS Dialog.

Click the Presets button to access the preset browser. Here's what you get:

  • Live Sandbox Previews: See exactly how a preset—like our flat-design "3D Push" button—will behave in real-time before you apply it.
  • Smart Type Matching: The engine detects what type of object you are styling (e.g., a Progress Bar vs. a TextBox) and builds a high-fidelity preview environment mimicking your actual launcher configuration.
  • Instant Application: Found an effect you like? Apply it instantly. You can then tweak the raw code in the editor to perfect it for your exact needs.

Ready to start styling? Select any object in your launcher canvas, hit the Custom CSS property, and make it your own!