The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Different background in mobile version

View previous topic View next topic Go down

In progress Different background in mobile version

Post by Mickkej on Sun Feb 22, 2015 2:07 pm

I'm the administrator of a forum and I recently changed the background of the site from one image to a mer advanced one. The users seem to like it but the problem is that the image might be a little to heavy for handheld devices such as mobile phones. It takes time to load it. I've already decreased image-size as much as possible so please, no tips about that.
What I want to ask is if there is a way to load a different image for the mobile version that is more simple or maybe just a plain background color?

I use PHPBB3 and have access to all the templates as well as the stylesheet but I don't know how to do it. Not very good at this.

Here is the code from the CSS:
CSS:
#search{
display:none;
}

#wrap {

background-repeat: repeat-x;
background: -webkit-gradient(linear, 0%, 0%, 0%, 100%, from(rgba(42,42,42,0.5)), to(rgba(0,0,0,0.5)));
background: -webkit-linear-gradient(top, rgba(42,42,42,1), rgba(0,0,0,1));
background: -moz-linear-gradient(top, rgba(42,42,42,1), rgba(0,0,0,1));
background: -ms-linear-gradient(top, rgba(42,42,42,1), rgba(0,0,0,1));
background: -o-linear-gradient(top, rgba(42,42,42,1), rgba(0,0,0,1));

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;

}

body {
background-color: #202020;
background-size: 100% auto;
background-repeat: repeat-y;
background-attachment: scroll;
background-position: 0% 0%;
}


.headerbar {
background-image: url(http://i.imgur.com/V1l7M5a.png?1);
background-size: 96% 95%;
background-position: center;
background-repeat: no-repeat;
}

.spoiler {
text-decoration: none;
color: #494949;
}


.inputbox {

border: 1px solid #BCBCBC;
color: #ffffff;
padding: 2px;
cursor: text;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;

}
#text_editor_controls a.button2,#text_editor_controls input.button2,#text_editor_controls button.button2{
background-image: url(http://illiweb.com/fa/prosilver/bg_button.gif);
color: black;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3px;}

.inputbox:hover {

border: 1px solid #BCBCBC;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
border-color: #111112;
-moz-box-shadow : 0 0 9px #fff;
-webkit-box-shadow : 0 0 9px #fff;
}
input.button1, input.button2, button.button2 {
font-size: 1em;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
fieldset dl {
padding: 4px 0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
fieldset.fields1 dt {
width: 10em;
border-right-width: 0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
fieldset.submit-buttons {
text-align: center;
vertical-align: middle;
margin: 5px 0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}

.navbar {
clear: both;
background-image: url('http://i21.servimg.com/u/f21/14/21/31/20/gradie16.png');
padding:0px 10px;
border: 0px solid #101010;
background-repeat: repeat-x;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
background-color: #111112;
-webkit-transition: background-color 0.2s linear;
-moz-transition: background-color 0.2s linear;
-o-transition: background-color 0.2s linear;

}
dl.codebox {
padding: 3px;
background-color: #FFFFFF;
border: 1px solid #C9D2D8;
font-size: 1em;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
border: 1px solid #101010;
}
.forabg {
margin-bottom: 4px;
clear: both;
border: 2px solid #;
padding: 0px 5px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
border: 1px solid #101010;
background-image: url('http://i21.servimg.com/u/f21/14/21/31/20/gradie16.png');


}
.forumbg {
background-color: #111112;
background-image: url('http://i21.servimg.com/u/f21/14/21/31/20/gradie16.png');


border: 2px solid #;
padding: 0px 5px;
margin-bottom: 4px;
clear: both;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
border: 1px solid #101010;


}
.panel {
margin-bottom: 4px;
padding: 0px 10px;
background-image: url('http://i21.servimg.com/u/f21/14/21/31/20/gradie16.png');
border: 1px solid #101010;
background-repeat: repeat-x;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
background-color: #111112;
border: 1px solid #101010;
}
.post {
padding: 0 10px;
margin-bottom: 4px;
background-repeat: no-repeat;
background-position: 100% 0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
background-color: #111112;


}
.postprofile {
color: #ffffff;
margin: 5px 0 0px 0;
min-height: 70px;
border-right-style: solid;
border-right-width: 1px;
border-color: transparent;
width: 22%;
float: left;
display: inline;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
#cp-main {
float: left;
width: 98%;
margin-left: 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
#cp-main .panel {

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
#cp-main table.table1 {
margin-bottom: 1em;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
#ucp-main table.table1 {
padding: 2px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
#tabs {
line-height: normal;
margin: 20px 0 -1px 7px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;

/*min-width: 570px;
*/
}
#smiley-box {

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}

ul.profile-icons {
margin-top: 10px;
list-style: none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
#message-box textarea {

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
.module {
background-image: url('http://i21.servimg.com/u/f21/14/21/31/20/gradie16.png');
border: 1px solid #101010;
background-repeat: repeat-x;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
background-color: #111112;

}

.signature {

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
border-color: #111112;
-moz-box-shadow : 0 0 9px #fff;
-webkit-box-shadow : 0 0 9px #fff;
}
body.chatbox {
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-khtml-border-radius: 0px;
border-radius: 0px;
}

Mickkej
New Member

Posts : 3
Reputation : 1
Language : swedish

Back to top Go down

In progress Re: Different background in mobile version

Post by Ange Tuteur on Sun Feb 22, 2015 11:55 pm

Hello @Mickkej,

For phpbb3 you can make use of the difference in IDs on mobile and classic. Use the following rules to apply a background :
( display > colors > css stylesheet )

For mobile :
Code:
body { background-image:url(YOUR_IMG) }

For classic :
Code:
body#phpbb { background-image:url(YOUR_IMG) }

Replace YOUR_IMG by the URL of your image.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Different background in mobile version

Post by Mickkej on Tue Feb 24, 2015 6:23 pm

Thank you for your reply but that doesn't work. It does nothing to the background when I use my mobile.
I'm not quite sure I am using your codes correctly. I did paste them into my CSS but nothing happened.
How is the site suppose to recognize when you are using a mobile? Most codes I've seen they have something like "mobil, max-width 480" in the beginning.
Would pasting the codes into my CSS be all I have to do? Or do I need to make some changes in one of my templates?

Mickkej
New Member

Posts : 3
Reputation : 1
Language : swedish

Back to top Go down

In progress Re: Different background in mobile version

Post by Ange Tuteur on Wed Feb 25, 2015 6:46 am

Did you set them in the following order ?
Code:
body { background-image:url(YOUR_IMG) } /* mobile */
body#phpbb { background-image:url(YOUR_IMG) } /* classic */

#phpbb should be after the first body rule. If you do, then you might need to set the page body background color transparent. Try adding this rule as well :
Code:
#page-body { background:none }

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Different background in mobile version

Post by Mickkej on Sun Mar 08, 2015 10:13 am

Sorry, I've been away and have not had time to test your suggestion.

Unfortunately it still doesn't work. I try to add a different pic to the mobile version but nothing happens. I'm also not sure were to post the
Code:
#page-body { background:none }
because I don't have that in my CSS. I posted the CSS in the original post if someone want's to take a look and modify it.

Mickkej
New Member

Posts : 3
Reputation : 1
Language : swedish

Back to top Go down

In progress Re: Different background in mobile version

Post by Ange Tuteur on Mon Mar 09, 2015 12:41 am

Replace your CSS with this :
Code:
body {
background-image:url(YOUR_IMG); /* mobile bg */
background-color: #202020;
background-size: 100% auto;
background-repeat: repeat-y;
background-attachment: scroll;
background-position: 0% 0%;
}

body#phpbb { background-image:url(YOUR_IMG) } /* classic bg */

#page-body { background:none }

#search{
display:none;
}

#wrap {

background-repeat: repeat-x;
background: -webkit-gradient(linear, 0%, 0%, 0%, 100%, from(rgba(42,42,42,0.5)), to(rgba(0,0,0,0.5)));
background: -webkit-linear-gradient(top, rgba(42,42,42,1), rgba(0,0,0,1));
background: -moz-linear-gradient(top, rgba(42,42,42,1), rgba(0,0,0,1));
background: -ms-linear-gradient(top, rgba(42,42,42,1), rgba(0,0,0,1));
background: -o-linear-gradient(top, rgba(42,42,42,1), rgba(0,0,0,1));
 
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px; 

}


.headerbar {
background-image: url(http://i.imgur.com/V1l7M5a.png?1);
background-size: 96% 95%;
background-position: center;
background-repeat: no-repeat;
}

.spoiler {
text-decoration: none;
color: #494949;
}


.inputbox {
 
    border: 1px solid #BCBCBC;
    color: #ffffff;
    padding: 2px;
    cursor: text;
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;

    }
#text_editor_controls a.button2,#text_editor_controls input.button2,#text_editor_controls button.button2{
background-image: url(http://illiweb.com/fa/prosilver/bg_button.gif);
color: black;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3px;}

.inputbox:hover {

    border: 1px solid #BCBCBC;
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
border-color: #111112;
-moz-box-shadow : 0 0 9px #fff;
-webkit-box-shadow : 0 0 9px #fff;
    }
input.button1, input.button2, button.button2 {
    font-size: 1em;
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    }
fieldset dl {
    padding: 4px 0;
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    }
fieldset.fields1 dt {
    width: 10em;
    border-right-width: 0;
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    }
fieldset.submit-buttons {
    text-align: center;
    vertical-align: middle;
    margin: 5px 0;
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    }

.navbar {
    clear: both;
    background-image: url('http://i21.servimg.com/u/f21/14/21/31/20/gradie16.png');
    padding:0px 10px;
border: 0px solid #101010;
background-repeat: repeat-x;
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
background-color: #111112;
-webkit-transition: background-color 0.2s linear;
    -moz-transition: background-color 0.2s linear;
    -o-transition: background-color 0.2s linear;

    }
dl.codebox {
    padding: 3px;
    background-color: #FFFFFF;
    border: 1px solid #C9D2D8;
    font-size: 1em;
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
border: 1px solid #101010;
    }
.forabg {
    margin-bottom: 4px;
    clear: both;
    border: 2px solid #;
    padding: 0px 5px;
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
border: 1px solid #101010;
background-image: url('http://i21.servimg.com/u/f21/14/21/31/20/gradie16.png');


    }
.forumbg {
    background-color: #111112;
background-image: url('http://i21.servimg.com/u/f21/14/21/31/20/gradie16.png');


    border: 2px solid #;
    padding: 0px 5px;
    margin-bottom: 4px;
    clear: both;
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
border: 1px solid #101010;


    }
.panel {
    margin-bottom: 4px;
    padding: 0px 10px;
    background-image: url('http://i21.servimg.com/u/f21/14/21/31/20/gradie16.png');
border: 1px solid #101010; 
background-repeat: repeat-x;
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
background-color: #111112;
border: 1px solid #101010;
    }
.post {
    padding: 0 10px;
    margin-bottom: 4px;
    background-repeat: no-repeat;
    background-position: 100% 0;
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
background-color: #111112;


    }
.postprofile {
    color: #ffffff;
    margin: 5px 0 0px 0;
    min-height: 70px;
    border-right-style: solid;
    border-right-width: 1px;
    border-color: transparent;
    width: 22%;
    float: left;
    display: inline;
    position: relative;
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    }
#cp-main {
    float: left;
    width: 98%;
    margin-left: 20px;
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    }
#cp-main .panel {
 
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    }
#cp-main table.table1 {
    margin-bottom: 1em;
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    }
#ucp-main table.table1 {
    padding: 2px;
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    }
#tabs {
    line-height: normal;
    margin: 20px 0 -1px 7px;
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
 
/*min-width: 570px;
    */
}
#smiley-box {
 
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    }

ul.profile-icons {
    margin-top: 10px;
    list-style: none;
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    }
#message-box textarea {
 
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    }
.module {
    background-image: url('http://i21.servimg.com/u/f21/14/21/31/20/gradie16.png');
border: 1px solid #101010; 
background-repeat: repeat-x;
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
background-color: #111112;

    }

.signature {
 
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
border-color: #111112;
-moz-box-shadow : 0 0 9px #fff;
-webkit-box-shadow : 0 0 9px #fff;
    }
body.chatbox {
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    -khtml-border-radius: 0px;
    border-radius: 0px;
    }

I placed what you need to modify at the top. Replace YOUR_IMG by the URLs of your images.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Mobile Style

Post by kwehcat on Sun Mar 15, 2015 10:32 pm

I can't remember if external css sheets are usable, but the following code is what I use when styling a website:
<link rel="stylesheet" href="link.css" type="text/css" media="handheld" />

the media="handheld" should be exchanged for media="screen" for the full sized website.
I hope that helps!

kwehcat
New Member

Posts : 1
Reputation : 1
Language : English

Back to top Go down

In progress Re: Different background in mobile version

Post by Ange Tuteur on Sun Mar 15, 2015 11:35 pm

@kwehcat you can also use that method since we have access to the templates. You'd put that within the overall_header template with a reference to where your external sheet is located. I'm not sure if the last response I gave solved their problem. If not, I've got another solution by using _userdata.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum