News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

Lifestyle [Responsive]

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

Previous topic - Next topic

LVMuse

Okay, this is what I have:

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

Quote from: Olli_Bonatti on December 31, 2020, 06:46:06 PM
Hi Mick,

Can the colour be changed?

Cheers
Yes. What would you like to change?

aodio

Quote from: Mick. on December 31, 2020, 06:52:17 PM
Quote from: Olli_Bonatti on December 31, 2020, 06:46:06 PM
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.

Quote from: Olli_Bonatti on January 02, 2021, 07:11:09 AM
Quote from: Mick. on December 31, 2020, 06:52:17 PM
Quote from: Olli_Bonatti on December 31, 2020, 06:46:06 PM
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

/* 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

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


Footer

#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

Quote from: Mick. on January 02, 2021, 07:44:36 AM
Quote from: Olli_Bonatti on January 02, 2021, 07:11:09 AM
Quote from: Mick. on December 31, 2020, 06:52:17 PM
Quote from: Olli_Bonatti on December 31, 2020, 06:46:06 PM
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

/* 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

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


Footer

#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

Quote from: Mick. on January 02, 2021, 08:13:14 AM
Look for...
.wrapper {
}

..near the top. Use px or %

Legend!.. appreciated mate 👊

Mick.


Advertisement: