46 lines
1.6 KiB
HTML
46 lines
1.6 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}CSS Overlay Help - {{ super() }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="card">
|
|
<h2>Custom Overlay CSS Guide</h2>
|
|
<p>This guide will help you create your own custom CSS for the chat overlay. Your CSS is applied on top of a base stylesheet, so you only need to override the styles you want to change.</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>HTML Structure</h3>
|
|
<p>Your CSS will be applied to a simple HTML structure. Here are the key classes you can target:</p>
|
|
<ul>
|
|
<li><code>.chat-container</code>: The main container holding all messages.</li>
|
|
<li><code>.chat-message</code>: The container for a single message, including the username and text.</li>
|
|
<li><code>.username</code>: The part of the message that shows the chatter's name.</li>
|
|
<li><code>.message-text</code>: The actual content of the chat message.</li>
|
|
</ul>
|
|
<p>The <code>body</code> of the overlay is transparent by default, so you only need to style the message elements.</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>Example: "Bubbly" Theme</h3>
|
|
<p>Here is a simple example to get you started. This creates chat bubbles with a gradient background.</p>
|
|
<pre><code>body {
|
|
font-family: 'Comic Sans MS', cursive, sans-serif;
|
|
font-size: 18px;
|
|
text-shadow: 1px 1px 2px #333;
|
|
}
|
|
|
|
.chat-message {
|
|
background: linear-gradient(135deg, #7f5af0, #a970ff);
|
|
color: white;
|
|
padding: 10px 15px;
|
|
border-radius: 20px;
|
|
margin-bottom: 10px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.username {
|
|
font-weight: bold;
|
|
color: #e0e0e0;
|
|
}</code></pre>
|
|
</div>
|
|
{% endblock %} |