Topic: Lifestyle [Responsive]

[Mick.]

Link to the 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/

[Deaks]

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

[Mick.]

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.

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.]

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.

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   

[Mick.]

Love your work, great looking theme Mick.

thank you!!

[Mick.]

nice one....other than all of the pink   

what? Pink is hot! Hahaha

[Mr.Truckman]

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

[Mick.]

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!

[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]

At the end should work.

[LVMuse]

Thanks!

[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.