Howdy Everyone!
Now I'm studying the extensions... a long job for me
However the flexibility of FLARUM and what you can do only with header and css is incredible
You can see my last ... ehm ... transofrmation at https://blitz4x.com and below the images you can find the code
Thx. Marco
Header
(Of course you can go on my site and "Save As" the images)
<div style="position: relative; height: 500px;">
<table style="margin: 50px 0px 0px 50px;">
<tr>
<td>
<a href="/" style="width: 100%;">
<img src="/assets/images/biohazard-transparent-200.png" title="CLICK per tornare alla pagina principale | HOME" />
</a>
</td>
<td id="motto" style="vertical-align: bottom; text-align: left; padding-left: 25px; padding-bottom: 25px; font-size: 34px; font-weight: bold; color: yellow;">
Blitz 4x aka FOUR-EX<br>
Shooter Trade - One Shot One Kill
</td>
</tr>
</table>
<div style="position: absolute; bottom: 20px; width: 90%; margin-left: 5%; margin-right: 5%; border: 5px solid orange; border-radius: 5px; background-color: rgba(0, 0, 0, 0.50); display: inline-block; text-align: center; vertical-align: middle; padding-top: 5px; padding-bottom: 5px;">
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=UXR7265E2WMPJ" target="_blank" style="font-size: 30px; font-weight: bold; color: yellow;" onmouseover="this.style.color='orange'" onmouseout="this.style.color='Yellow'">
Dal 01.04.2019 tot 40 pip in 5 gg operativi <img src="/assets/images/hot-beverage_32px.png" /> CLICK e beviamoci un caffè
</a>
</div>
</div>
and css
body {
background: transparent;
/*background-image: url(https://blitz4x.com//assets/images/SWAT-blitz.jpg);*/
background-image: url(https://blitz4x.com//assets/images/army-sniper-largecaliber-rifle.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: top left;
background-attachment: fixed;
}
#app {
background-color: rgba(26, 26, 26, 0.75);
}
.Hero {
background: rgba(33, 33, 33, 0.75);
}
.Hero-close {
opacity: 1.0;
border: 5px solid orange;
}
.container {
width: 90%;
margin-left: auto;
margin-right: auto;
}
html, body, #app, .Hero, p,
.Post-body, .TextEditor textarea {
color: #ffffff !important;
font-size: 20px;
line-height: normal;
}
@media screen and (max-width: 800px) {
#motto {
display: none;
}
}
#home-link {
font-weight: bold;
font-size: 20px;
}
#home-link::before {
content: "HOME: ";
}
.username:hover {
color: orange;
}
.Dropdown-menu--right {
left: auto;
right: 150px;
border: 5px solid yellow;
border-radius: 5px;
}
.containerNarrow {
max-width: none;
}
.item-sort {
display: none !important;
}
.item-refresh::before {
color: orange;
font-weight: bold;
content: "Ogni tanto CLICK QUI PER AGGIORNARE LA PAGINA -> ";
}
button[title="Ricarica"] {
border: 2px solid orange;
}
Button.Button--primary.IndexPage-newDiscussion.hasIcon {
min-width: 300px;
}
.IndexPage-toolbar {
margin-bottom: 50px;
}
.TagLabel {
font-size: 14px !important;
}
.sideNav .Dropdown-menu .item-tags span {
color: orange;
font-weight: bold;
}
.sideNav .Dropdown-menu .item-tags span::after {
color: orange;
font-weight: bold;
content: " <- CLICK";
}
.TagsPage .sideNav {
display: none;
}
p.TagTile-description {
color: black !important;
font-size: 16px;
}
.Dropdown-menu > li > a,
.Dropdown-menu > li > button,
.Dropdown-menu > li > span {
font-size: 18px;
overflow: visible;
}
.DiscussionListItem-title {
font-size: 22px;
color: #ffff00 !important;
}
.DiscussionListItem-info {
font-size: 14px;
color: #ffffff;
}
.DiscussionListItem:hover {
background: rgba(29, 29, 29, 0.75);
}
h2.DiscussionHero-title {
background: black;
padding: 5px;
border-radius: 5px;
}
.ComposerBody-header h3 {
color: orange;
}
.Composer.minimized {
border: 5px solid yellow;
border-radius: 5px;
height: 100px !important;
}
.item-fullScreen {
border: 5px solid orange;
border-radius: 5px;
}
.PostEdited {
display: none;
}
.Post-body blockquote {
font-size: inherit;
font-style: italic;
border: 0;
background: transparent;
color: #808080;
border-radius: none;
padding: 8px 15px;
border-left: 5px solid orange;
border-top: 2px dotted #1a1a1a;
border-bottom: 2px dotted #1a1a1a;
margin: 1em 0;
}
.Post-body img {
max-width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
}
.Post-body img::before {
color: orange;
content: "Click sull'immagine per ingrandirla";
}
.Post-body img:hover {
opacity: 0.5;
}
.no-touch .Post-actions {
opacity: 1;
}
.Post-header {
color: #ffff00 !important;
font-size: 22px;
font-weight: bold;
}
.Post-footer {
color: orange;
}
.Button--link {
background: transparent !important;
color: #bababa;
}
.DiscussionPage-nav {
position: absolute;
top: -200px;
right: 75px;
z-index: 1500;
}
.DiscussionPage-nav > ul {
width: 200px;
padding: 10px;
border: 5px solid orange;
border-radius: 5px;
color: white !important;
background-color: black;
}
.Scrubber a {
color: orange;
}
a, a:link, a:focus, a:visited {
color: yellow;
text-decoration: none;
}
a:hover {
/*text-shadow: 1px 1px yellow;*/
color: orange;
text-decoration: underline;
}
hr {
color: orange;
}