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.

[LVMuse]

Okay, this is what I have:

Code Select Expand

@media (max-width: 350px) {
// show mobile image
#logo {
background: url(.../images/custom/lifestyle-mobile.png) no-repeat;
background-size: cover;
}
}

Not sure if I have everything in the right place, if I have too much info, or if the solution isn't working.

[aodio]

Hi Mick,

Can the colour be changed?

Cheers

[Mick.]

Hi Mick,

Can the colour be changed?

Cheers

Yes. What would you like to change?

[aodio]

Hi Mick,

Can the colour be changed?

Cheers

Yes. What would you like to change?

Well id like to change the colour scheme, are you able to instruct on doing that when the time comes?

[Mick.]

Hi Mick,

Can the colour be changed?

Cheers

Yes. What would you like to change?

Well id like to change the colour scheme, are you able to instruct on doing that when the time comes?

Everyone needs to learn how to make simple changes in their css files.  I use this plugin for Firefox browser https://addons.mozilla.org/en-US/firefox/addon/cssviewer-quantum/ it shows what classes are what and colors, etc. when clicking on an item on the web page. Very easy to use, I use it daily.

In the theme's css folder, find the index.css file, in here all colors can be changed.

Here are the basics. You can find pretty much everything at the bottom of the file.


Links

Code Select Expand


/* Normal, standard links. */
a:link, a:visited
{
color: #FF7E7E;
text-decoration: none;
}
a:hover
{
        color: #fc6262;
text-decoration: none;
cursor: pointer;
}

/* Links that open in a new window. */
a.new_win:link, a.new_win:visited
{
color: #FF7E7E;
text-decoration: none;
}
a.new_win:hover
{
        color: #fc6262;
text-decoration: none;
}


Header

Code Select Expand


#header {
background-color: #fff;
height: 110px;
}


Footer

Code Select Expand


#footer {
text-align: center;
background-color: #FFDFDD;
color: #FF7E7E;
padding: 15px;
font-size: 10px;
}


The forum title bars,well, that's an image. You can change the colors using photoshop and re upload it.

main_block.png and menu_gfx.png found in the theme's image folder (Themes/Lifestyle/images/theme/menu_gfx.png)

[aodio]

Hi Mick,

Can the colour be changed?

Cheers

Yes. What would you like to change?

Well id like to change the colour scheme, are you able to instruct on doing that when the time comes?

Everyone needs to learn how to make simple changes in their css files.  I use this plugin for Firefox browser https://addons.mozilla.org/en-US/firefox/addon/cssviewer-quantum/ it shows what classes are what and colors, etc. when clicking on an item on the web page. Very easy to use, I use it daily.

In the theme's css folder, find the index.css file, in here all colors can be changed.

Here are the basics. You can find pretty much everything at the bottom of the file.


Links

Code Select Expand


/* Normal, standard links. */
a:link, a:visited
{
color: #FF7E7E;
text-decoration: none;
}
a:hover
{
        color: #fc6262;
text-decoration: none;
cursor: pointer;
}

/* Links that open in a new window. */
a.new_win:link, a.new_win:visited
{
color: #FF7E7E;
text-decoration: none;
}
a.new_win:hover
{
        color: #fc6262;
text-decoration: none;
}


Header

Code Select Expand


#header {
background-color: #fff;
height: 110px;
}


Footer

Code Select Expand


#footer {
text-align: center;
background-color: #FFDFDD;
color: #FF7E7E;
padding: 15px;
font-size: 10px;
}


The forum title bars,well, that's an image. You can change the colors using photoshop and re upload it.

main_block.png and menu_gfx.png found in the theme's image folder (Themes/Lifestyle/images/theme/menu_gfx.png)

Cheers mate, thats awesome ... Could you explain how to widen the category section please 

Cheers

[Mick.]

Look for...
.wrapper {
}

..near the top. Use px or %

[aodio]

Look for...
.wrapper {
}

..near the top. Use px or %

Legend!.. appreciated mate 👊

[Mick.]

No problem