Repo ![:boom:]( ":boom:")
: GitHub - hnb-ku/discourse-flex-footer-theme-component
Screenshots
Desktop:
Zoomed out:
Zoomed in:
Mobile:
click for full size
![:warning:]( ":warning:")
This theme component requires you to actually look at the code and change it to your preferences. ![:warning:]( ":warning:")
This is a skeleton. I added placeholders for demo purposes. You still need to add content / links.
I left comments everywhere to guide you through. For example:
<!--- Start Card B -->
<div class="df-cards df-card-b">
<!--- Start Card content -->
<h3 class="df-card-b-title">
Giveaway!
</h3>
<p>
in pro unum atqui splendide, ut eum omittam platonem <a href="#">Giveway!</a>
</p>
<a href="#"><img src="//image.ibb.co/eONDmm/100_Amazon_voucher_giveaway.png"></a>
<!--- End Card content -->
</div>
<!--- End Card B -->
<!--- Start Card C -->
<div class="df-cards df-card-c">
<!--- Start Card content -->
<h3 class="df-card-a-title">
Subscribe
</h3>
<p>
Subscribe to our newsletter to get the latest scoop right to your inbox.
</p>
<form>
<input type="text" name="Name" placeholder="Your name" autofocus>
<input type="email" name="email" placeholder="Email address" autofocus>
<button class="btn btn-primary" type="submit">Subscribe</button>
</form>
<!--- End Card content -->
</div>
<!--- End Card C -->
You can pretty much add anything inside cards, from mailing lists signup forms, ads, or even iframes.
You only need to look for the portion between
<!-- start card content -->
and
<!-- end card content -->
remove the placeholders, and add your content.
Since you will be modifying the code, I cannot update the repo otherwise your modifications will be overwritten.
Colors / backgrounds / font size follow variables at the top of the sheet like so:
$df-top-footer-background: rgb(40, 40, 40);
$df-bottom-footer-background: rgb(17, 17, 17);
$df-top-link-color: inherit;
$df-bottom-link-color: rgb(185, 185, 185);
$df-shared-text-color: rgb(175, 175, 175);
$df-shared-heading-color: rgb(255, 255, 255);
$df-base-font-size: 1em;
You only need to change those variables at the top.
I am happy to help if you post specific problems / questions here.
)
: 
This theme component requires you to actually look at the code and change it to your preferences. 
