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

Lifestyle [Responsive]

Started by Mick., July 06, 2020, 03:06:46 PM

Previous topic - Next topic

Mick.

Link to the theme


"Lifestyle SMF Theme"
Lifestyle is a clean and crisp, responsive theme for SMF 2.0  It has the big four social media buttons as well as a Hero image with button and description. Our style is clean, flat and professional. When you see our design out there, you'll know where it came from, idesignSMF.com This theme is free for personal and commercial use. You are allowed to use it in your projects, change it and adapt for your purposes. You are not allowed to remove the authorship and link to idesignsSMF.com


**Demo

**download









In theme Hero image by: https://unsplash.com/

Horme Gaming

an amazing theme as always :)  Personally not fan of the colours but thats just me

Mick.

Quote from: Deaks on July 07, 2020, 03:32:17 PM
an amazing theme as always :)  Personally not fan of the colours but thats just me
Ty bro ;)

Antechinus

I happened to hit this first topic this morning, without adequate coffee levels and with my brain adjusted for a dark theme.

Warning: Do not do that. This theme is seriously scary if caffeine levels are low and brain is wanting soothing darkness. :D

However, having got myself up to speed later in the day, and with brain adjusted to deal with sunshine, it's actually pretty damned good. :)

Mick.

Quote from: Antechinus on July 08, 2020, 12:14:15 AM
I happened to hit this first topic this morning, without adequate coffee levels and with my brain adjusted for a dark theme.

Warning: Do not do that. This theme is seriously scary if caffeine levels are low and brain is wanting soothing darkness. :D

However, having got myself up to speed later in the day, and with brain adjusted to deal with sunshine, it's actually pretty damned good. :)
it can be scary at times lol. Thanx bro

Wellwisher

Love your work, great looking theme Mick.

shadav

nice one....other than all of the pink  :P  :laugh:

Mick.


Mick.

Quote from: shadav on July 08, 2020, 01:55:12 PM
nice one....other than all of the pink  :P  :laugh:
what? Pink is hot! Hahaha

Mr.Truckman

hello, I want to change the wallpaper, how do I do it?

Mick.

Quote from: Mr.Truckman on August 28, 2020, 09:39:07 AM
hello, I want to change the wallpaper, how do I do it?


In thee theme css file near the bottom, find:

.hero {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   text-align: center;
   width: 100%;
   height: 50vh;
   overflow: hidden;
   background-size: cover;
   background: linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 37%, rgba(0,0,0,0.65) 100%), url(https://images.unsplash.com/photo-1491956142110-8a4226a12077?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80) no-repeat center center scroll;
}


Replace this bit with your own image url.

https://images.unsplash.com/photo-1491956142110-8a4226a12077?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80

Then clear browser cache

-Rock Lee-

I have time jumps again ::), because I remember commenting, the design was great I liked it and I was going to test it on a test site. Great job @Mick!


Regards!
¡Regresando como cual Fenix! ~ Bomber Code © 2020
Ayudas - Aportes - Tutoriales - Y mucho mas!!!

LVMuse

Hi Mick! First, it's been 15 years since I set up a forum and I was pleasantly surprised to find your Lifestyle theme! Man, talk about fresh! I love it. Great job. It really stands out from everyone else.

My question is, what do I need to do to make the customizable "lifestyle.png" responsive? I changed the size on the regular desktop view and it looks really good, but I can't get it to shrink or show a smaller version when it reduces down to for a mobile device. I thought putting in a link to a background image might work and it did nothing. Any advice?

Thanks again, and keep up the good work!

barnaby jonez

You could probably just make media queries for specific viewports (mobile/template) then update the background-image CSS to show a different image instead.

@media (max-width: 600px) {
// show mobile image
.hero{
background-url: your image url here;
}
}

something like that.

LVMuse

I'll give that a shot. Thanks!

LVMuse

And where would that go in the css?

Antechinus



LVMuse

Nope, didn't work. It's not the hero image, that one is fine, it's the logo. Tried putting in #logo where .hero was and still no luck.

Mick.

It is a "cover" image. Meaning that the image will not shrink.....only the frame shrinks while the image stays centered. I've not tried @media when using background-size: cover;

Try it and see if it works out for ya.

Advertisement: