32bit.cafe/content/themes.html

70 lines
3.0 KiB
HTML

<h2>Themes</h2>
<section>
<p>The 32-Bit Cafe is powered by its community, which rings true for our website styling as well! Adding themes allows for extra creativity and inclusivity of hobbyists who want to showcase their skills or just have fun with a team project. Thank you to everyone who participates and makes this part of the web more collaborative!</p>
</section>
<section>
<p>The following themes have been contributed:</p>
<ul>
<?php
foreach($themes as $theme) {
if($theme->name=="Default") continue;
echo("<li><a href=\"/css/themes/$theme->filename\">$theme->name</a> by ");
echo(($theme->website!="") ? "<a href=\"$theme->website\">$theme->author</a>" : $theme->author);
echo("</li>\n");
}
?>
</ul>
</section>
<section><p>To contribute your own theme:</p>
<ol>
<li>Include this comment at the very top of your stylesheet, with the theme's name, your name, and your website URL:</li>
<pre>/*
* Name:
* Author:
* Website:
*/
</pre>
<li>Upload your .css file through the form below.</li>
</ol>
<p><strong>Remember to name your CSS file your custom theme name!</strong> It will be published here.</p>
</section>
<section class="form">
<?php if(isset($_GET["error"])) { ?>
<p><strong><font color=red>Error uploading. Please make sure you upload a css file.</font></strong></p>
<?php }; if(isset($_GET["submitted"])) { ?>
<p><strong>Your theme has been sent! Thank you!</strong></p>
<?php } else { ?>
<form action="upload.php" method="post" enctype="multipart/form-data">
Select CSS file:<br>
<input type="file" name="fileToUpload" id="fileToUpload"><br><br>
<input type="submit" value="Upload" name="submit">
</form>
<?php } ?>
</section>
<section>
<p><strong>Please note:</strong> Stylesheets should be as accessible as possible. We may not use stylesheets that are very hard to read, hide important elements, contain any offensive or derogatory elements, or alter our texts in significant ways.</p>
</section>
<h3>Unsure how to start work on a theme?</h3>
<section>
<p>Here's our current suggestion on how to work on a new theme stylesheet without needing a playground, until that's completed!</p>
<ul>
<li>Go to <a href="https://32bit.cafe/">the homepage</a>, right-click the background, and select "View Source."</li>
<li>Copy the entire thing and paste into your editor of choice. Save as <code>index.html</code>.</li>
<li>Edit <code>index.html</code> and add this code after the <code>base.css</code> tag: <code>
&lt;link id="themeTarget" rel="stylesheet" type="text/css" href="NAMEOFYOURCSS.css"&gt;
</code></li>
<li>Create a new <code>.css</code> file in your editor of choice, save as aforementioned <code>NAMEOFYOURCSS.css</code>.</li>
<li>View <code>index.html</code> file in your browser of choice, visiting file address as the web address, like C:/User/FOLDERNAME/index.html.</li>
<li>Edit <code>NAMEOFYOURCSS.css</code> with your CSS changes.</li>
</ul>
<p>At the same time, compare to <a href="https://32bit.cafe/css/base.css">the base.css file</a> to see what classes are being used.</p>
</section>