The forum of the forums

Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums
3 posters

    Different background in mobile version

    Mickkej
    avatar
    Mickkej
    New Member


    Posts : 3
    Reputation : 1
    Language : swedish
    • Post n°1

    In progress Different background in mobile version

    Post by Mickkej February 22nd 2015, 3: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:
    • Back to top
    Ange Tuteur
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania
    • Post n°2

    In progress Re: Different background in mobile version

    Post by Ange Tuteur February 23rd 2015, 12:55 am

    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.
    • Back to top
    Mickkej
    avatar
    Mickkej
    New Member


    Posts : 3
    Reputation : 1
    Language : swedish
    • Post n°3

    In progress Re: Different background in mobile version

    Post by Mickkej February 24th 2015, 7: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?
    • Back to top
    Ange Tuteur
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania
    • Post n°4

    In progress Re: Different background in mobile version

    Post by Ange Tuteur February 25th 2015, 7: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 }
    • Back to top
    Mickkej
    avatar
    Mickkej
    New Member


    Posts : 3
    Reputation : 1
    Language : swedish
    • Post n°5

    In progress Re: Different background in mobile version

    Post by Mickkej March 8th 2015, 11: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.
    • Back to top
    Ange Tuteur
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania
    • Post n°6

    In progress Re: Different background in mobile version

    Post by Ange Tuteur March 9th 2015, 1: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://2img.net/i/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.
    • Back to top
    kwehcat
    avatar
    kwehcat
    New Member


    Posts : 1
    Reputation : 1
    Language : English
    • Post n°7

    In progress Mobile Style

    Post by kwehcat March 15th 2015, 11: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!
    • Back to top
    Ange Tuteur
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania
    • Post n°8

    In progress Re: Different background in mobile version

    Post by Ange Tuteur March 16th 2015, 12:35 am

    @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.
    • Back to top

      Current date/time is September 23rd 2024, 1:30 am