• Welcome to Simple Machines Community Forum. Please login or sign up.

Type-R

Started by Mick., September 18, 2021, 05:07:48 PM

Previous topic - Next topic

Mick.

Link to the theme
Type-R 2.1 Responsive SMF Theme

Type-R is a simple responsive theme for SMF 2.1. Has your social media follow buttons, top links, awesome design and minimal. Our style is clean, flat and professional. When you see our design out there, you'll know where it came from, idesignSMF.com


Demo: https://www.idesignsmf.com/demo.html

Dzonny

Nicely done, as usual!  8)

Mick.


Antechinus

The user menu is very neatly done. :)

Mick.

Quote from: Antechinus on September 20, 2021, 03:46:20 PMThe user menu is very neatly done. :)
thanx bruh! I squeezed the new and replies in there lol and remove the avatar and name. I thought it was righteous hahahaha

Antechinus


Mick.

Quote from: Antechinus on September 20, 2021, 03:54:16 PMAre those FA icons?
Yuh. User, new and replies. ....and the social thingy ones.

Antechinus

They're not a bad system. I kinda got used to them when messing with phpBB for a change. Easy to change icons just with CSS tweaks (no template editing required). You can even put a gradient across them if you're feeling adventurous.

Mick.

Quote from: Antechinus on September 20, 2021, 04:02:29 PMThey're not a bad system. I kinda got used to them when messing with phpBB for a change. Easy to change icons just with CSS tweaks (no template editing required). You can even put a gradient across them if you're feeling adventurous.
Ooooooooooo I did not know that. Makes sense tho; if you can colorize it, well then. I didn't thought of that hehehe

Antechinus

Yup. The basics are...
.relevant_element {
    background: linear-gradient(120deg, #e033ff, #ffa629, #e033ff);
    -webkit-background-clip: text; /* fallback for Apple shiz */
    background-clip: text;
    color: #0000; /* transparent - essential */
}

Mick.

Checkout this little test... Nice one Ant!! ;)

<style>
.social-font-awesome i {
    font-size: 30em;
    background-image: linear-gradient( 68.3deg,  rgba(245,177,97,1) 0.4%, rgba(236,54,110,1) 100.2% );
    -webkit-background-clip: text; /* fallback for Apple shiz */
    background-clip: text;
    color: #0000; /* transparent - essential */
}
</style>

<div class="social-font-awesome"><i class="fas fa-biohazard"></i></div>

Demo: https://www.idesignsmf.com/index.php?page=testing_antechinus_crazy_doodle

Antechinus

Lol. Can't view that page. :P

Mick.


Antechinus

Yup, that's how it works. You can even play with text-shadow on it too, but you have to be careful because with the transparent color setting the text shadow can drown out the gradient.

However, try this for an example:
/* -------------------------------- */
/* Anchor around forum name/banner. */
#top {
    display: block;
    max-width: 100% !important;
    margin: 0 auto !important;
    font-family: roboto, sans-serif;
    text-shadow: 1px 1px 1px rgba(23,35,44,.3);
}
#top:hover, #top:focus, #top:active {
    text-decoration: none;
}
/* ------------------------------- */
/* Hide site default banner image. */
#top > img {
    display: none;
}
/* ---------------------------- */
/* Add pseudos for fake banner. */
#top::before {
    display: block;
    padding: 36px 8px 12px;
    background: linear-gradient(95deg,#a18768,#f3cd82,#ad8658);
    color: transparent;
    font-size: 2.125rem;
    font-weight: 700;
    -webkit-background-clip: text;
    background-clip: text;
    content: 'Simple Machines Forum';
}
/* Add pseudos for fake banner. */
#top::after {
    display: block;
    padding: 0 14px 7px;
    color: #8d887c;
    font-size: 1rem;
    font-weight: 300;
    content: 'Elegant, effective, powerful, free. It\'s that simple.';
}

That's the code I'm running live on this site, via Stylus, as part of my dark theme.

Mick.

Gotta love :before and :after  ;)

Antechinus

They are wonderful things, for all sorts of purposes. I even use them to make drop menus less twitchy, and stop the last drop butting up against the bottom of the screen in admin. IMO this is one of the best uses for them on desktop.

gecitli

http://www.webtiryaki.com
webmaster forumu
Free & Premium Responsive Themes for SMF.

Mick.


TwitchisMental

Good work on the theme it looks great.

Advertisement: