Background image for premium users

F

fyndler

Member
Hey there people, could anyone help me with how to make a background image for those who a premium?

Right now i have a background color for all my premium members, but i think it would look alot more modern with a background image instead. Any ideas how i could make this work?

Thanks
 
Mark

Mark

Administrator
Staff member
yes, in your custom.css just add a background image to your div that wraps around each of your premium members.

so in our default theme, we have start with this tag:

Code: 
<div class="rankbox premium">
so in our custom.css we could add this example with many options:
Code: 
.premium {
background-image: url("path/to/some-image.jpg"); /* The  image used */
background-color: #cccccc; /* Used if the image is  unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
Your custom theme will have its own tags probably, just look at where the background color is set and instead assign an image to it.
 
F

fyndler

Member
Mark said:
yes, in your custom.css just add a background image to your div that wraps around each of your premium members.

so in our default theme, we have start with this tag:

Code: 
<div class="rankbox premium">
so in our custom.css we could add this example with many options:
Code: 
.premium {
background-image: url("path/to/some-image.jpg"); /* The  image used */
background-color: #cccccc; /* Used if the image is  unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
Your custom theme will have its own tags probably, just look at where the background color is set and instead assign an image to it.
Click to expand...
Thanks for the heads up, my theme background color i have now is coded in to the html file directly. So having quite a hard time to get it work lol

Code: 
<table bgcolor="#C5DAEB" style="padding: 10px 0 0 0;">
    <tr>
        <td class="rank" width="25">
            {$rank}
            <br />
            <a href="{$list_url}/index.php?a=stats&amp;u={$username}" class="table_top">{$lng->table_stats}</a>
        </td>
        <td class="rank_title" width="550">
            <a href="{$url}" onclick="out(this,'{$username}');"><img src="{$banner_url}" alt="{$title}" style="border: 0px none ; width: 468px; height: 60px;"></a>
        </td>
        <td align="center">
            <center><img src="http://www.servertop100.com/images/premium_badge.jpg" alt="" border="0" /></center>
        </td>
    </tr>
</table>

<table bgcolor="#C5DAEB" style="padding: 0 0 10px 0;">
    <tr>
        <td width="25"></td>
        <td class="rank_title" width="500" valign="top">
            <a href="{$url}" onclick="out(this,'{$username}');">{$title}</a><br />
            {$description}
        </td>
        <td align="center" width="50">
            <span style="font-size: 10pt; color: #333333;">
                <b>IN</b><br />
                <font color="#32B067" style="font-size: 14pt;">{$unq_in_0_monthly}</font>
            </span>
            <br /><br />
        </td>
        <td align="center" width="70">
            <span style="font-size: 10pt; color: #333333;">
                <b>OUT</b><br />
                <font color="#1673BB" style="font-size: 14pt;">{$unq_out_0_monthly}</font>
            </span>
            <br /><br />
        </td>
    </tr >
</table>

<table bgcolor="black" align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td class='table_rannks'></td>
    </tr>
</table>
 
Mark

Mark

Administrator
Staff member
in your template:

change this:
<table bgcolor="#C5DAEB" style="padding: 10px 0 0 0;">
to
<table style="padding: 10px 0 0 0;
background-image: url('path/to/some-image.jpg');">


OR use CSS:

<table class="myrankingtable">

then in custom.css:
Code: 
.myrankingtable{
background-image: url("path/to/some-image.jpg"); /* The  image used */
background-color: #cccccc; /* Used if the image is  unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
 
Last edited:
F

fyndler

Member
I tried to use the code you posted, really weird. The image won´t load but yet when i look at the url to the image it´s the right one :/
 
Mark

Mark

Administrator
Staff member
You have it working here:

1610995990488.png



<table style="padding: 10px 0 0 0;
background-image: url('path/to/some-image.jpg')">
 
Mark

Mark

Administrator
Staff member
make sure you dont have "top left no-repeat" on your "background-image" property.
 
F

fyndler

Member
Mark said:
make sure you dont have "top left no-repeat" on your "background-image" property.
Click to expand...
If you can have a look i have a small problem. The image don´t go over the whole area, and for some reason the upper area is the image and the buttom area is the blue color i used before for premium users :/

If i would use the css where in the code do i put the <table class="myrankingtable"> A little unsure about this. Thanks
 
Last edited:
Mark

Mark

Administrator
Staff member
this is custom code so you need to start undoing some of your other CSS.

you have this which is setting your background color and some padding:

Code: 
<table bgcolor="#C5DAEB" style="padding: 10px 0 0 0;">
I would replace that with
Code: 
<table class="myrankingtable">
and add your styles to custom.css (or wherever you are storing your CSS in your custom theme)

Then you will want to look in your CSS (and HTML templates for the ranking tables) and find/remove all instances of where you are setting that background color C5DAEB so you can have 1 place where the background is set. At the moment your code is setting backrounds in several places and that is causing you problems. Get rid of it all, no need to repeat the same thing so often.
 
F

fyndler

Member
Mark said:
this is custom code so you need to start undoing some of your other CSS.

you have this which is setting your background color and some padding:

Code: 
<table bgcolor="#C5DAEB" style="padding: 10px 0 0 0;">
I would replace that with
Code: 
<table class="myrankingtable">
and add your styles to custom.css (or wherever you are storing your CSS in your custom theme)

Then you will want to look in your CSS (and HTML templates for the ranking tables) and find/remove all instances of where you are setting that background color C5DAEB so you can have 1 place where the background is set. At the moment your code is setting backrounds in several places and that is causing you problems. Get rid of it all, no need to repeat the same thing so often.
Click to expand...
Thanks for the clearup. So i think this should be right? But i guess i have to link to css aswell? Not sure if i remember correct

Code: 
<table class="myrankingtable">
    <tr>
        <td class="rank" width="25">
            {$rank}
            <br />
            <a href="{$list_url}/index.php?a=stats&amp;u={$username}" class="table_top">{$lng->table_stats}</a>
        </td>
        <td class="rank_title" width="550">
            <a href="{$url}" onclick="out(this,'{$username}');"><img src="{$banner_url}" alt="{$title}" style="border: 0px none ; width: 468px; height: 60px;"></a>
        </td>

    </tr>
</table>

<table class="myrankingtable">
    <tr>
        <td width="25"></td>
        <td class="rank_title" width="500" valign="top">
            <a href="{$url}" onclick="out(this,'{$username}');">{$title}</a><br />
            {$description}
        </td>
        <td align="center" width="50">
            <span style="font-size: 10pt; color: #333333;">
                <b>IN</b><br />
                <font color="#32B067" style="font-size: 14pt;">{$unq_in_0_monthly}</font>
            </span>
            <br /><br />
        </td>
        <td align="center" width="70">
            <span style="font-size: 10pt; color: #333333;">
                <b>OUT</b><br />
                <font color="#1673BB" style="font-size: 14pt;">{$unq_out_0_monthly}</font>
            </span>
            <br /><br />
        </td>
    </tr >
</table>

<table bgcolor="black" align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td class='table_rannks'></td>
    </tr>
</table>
 
Mark

Mark

Administrator
Staff member
Well you can see that you have 3 <table> tags. It depends how you want your background image to work. If you want 1 background to fill everything you need to make those 1 big table OR remove all of your table backgrounds and wrap all 3 tables in a <div class="myrankingtable">
Code: 
<div class="myrankingtable">
<table>
    <tr>
        <td class="rank" width="25">
            {$rank}
            <br />
            <a href="{$list_url}/index.php?a=stats&amp;u={$username}" class="table_top">{$lng->table_stats}</a>
        </td>
        <td class="rank_title" width="550">
            <a href="{$url}" onclick="out(this,'{$username}');"><img src="{$banner_url}" alt="{$title}" style="border: 0px none ; width: 468px; height: 60px;"></a>
        </td>

    </tr>
</table>

<table>
    <tr>
        <td width="25"></td>
        <td class="rank_title" width="500" valign="top">
            <a href="{$url}" onclick="out(this,'{$username}');">{$title}</a><br />
            {$description}
        </td>
        <td align="center" width="50">
            <span style="font-size: 10pt; color: #333333;">
                <b>IN</b><br />
                <font color="#32B067" style="font-size: 14pt;">{$unq_in_0_monthly}</font>
            </span>
            <br /><br />
        </td>
        <td align="center" width="70">
            <span style="font-size: 10pt; color: #333333;">
                <b>OUT</b><br />
                <font color="#1673BB" style="font-size: 14pt;">{$unq_out_0_monthly}</font>
            </span>
            <br /><br />
        </td>
    </tr >
</table>

<table bgcolor="black" align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td class='table_rannks'></td>
    </tr>
</table>
</div>
But now you know how to assign a background image using HTML/CSS its up to you to get it working how you want it. This is a custom skin so this its code you have implemented (we haven't used tables for layout in almost 20 years :) )

In our default bootstrap theme, this is much easier.
 
Last edited:
F

fyndler

Member
Mark said:
Well you can see that you have 3 <table> tags. It depends how you want your background image to work. If you want 1 background to fill everything you need to make those 1 big table OR remove all of your table backgrounds and wrap all 3 tables in a <div class="myrankingtable">
Code: 
<div class="myrankingtable">
<table>
    <tr>
        <td class="rank" width="25">
            {$rank}
            <br />
            <a href="{$list_url}/index.php?a=stats&amp;u={$username}" class="table_top">{$lng->table_stats}</a>
        </td>
        <td class="rank_title" width="550">
            <a href="{$url}" onclick="out(this,'{$username}');"><img src="{$banner_url}" alt="{$title}" style="border: 0px none ; width: 468px; height: 60px;"></a>
        </td>

    </tr>
</table>

<table>
    <tr>
        <td width="25"></td>
        <td class="rank_title" width="500" valign="top">
            <a href="{$url}" onclick="out(this,'{$username}');">{$title}</a><br />
            {$description}
        </td>
        <td align="center" width="50">
            <span style="font-size: 10pt; color: #333333;">
                <b>IN</b><br />
                <font color="#32B067" style="font-size: 14pt;">{$unq_in_0_monthly}</font>
            </span>
            <br /><br />
        </td>
        <td align="center" width="70">
            <span style="font-size: 10pt; color: #333333;">
                <b>OUT</b><br />
                <font color="#1673BB" style="font-size: 14pt;">{$unq_out_0_monthly}</font>
            </span>
            <br /><br />
        </td>
    </tr >
</table>

<table bgcolor="black" align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td class='table_rannks'></td>
    </tr>
</table>
</div>
But now you know how to assign a background image using HTML/CSS its up to you to get it working how you want it. This is a custom skin so this its code you have implemented (we haven't used tables for layout in almost 20 years :) )

In our default bootstrap theme, this is much easier.
Click to expand...
I can see i have the three table tags, i´m really new to this html/css coding. So it´s reawlly hard sometimes, and i appoligise for that. I´m not sure how to make one big table i guess that would be the easiest right? It seems it does not even load the css at all atm :/
 
Last edited by a moderator:
Mark

Mark

Administrator
Staff member
The easiest would be to use the code I posted above, wrapping the div around all 3 tables.
 
F

fyndler

Member
Mark said:
The easiest would be to use the code I posted above, wrapping the div around all 3 tables.
Click to expand...
Okey, something like this?

Code: 
<div class="myrankingtable">
<table>
    <tr>
        <td class="rank" width="25">
            {$rank}
            <br />
            <a href="{$list_url}/index.php?a=stats&amp;u={$username}" class="table_top">{$lng->table_stats}</a>
        </td>
        <td class="rank_title" width="550">
            <a href="{$url}" onclick="out(this,'{$username}');"><img src="{$banner_url}" alt="{$title}" style="border: 0px none ; width: 468px; height: 60px;"></a>
        </td>

    </tr>
</table>

<div class="myrankingtable">
<table>
    <tr>
        <td width="25"></td>
        <td class="rank_title" width="500" valign="top">
            <a href="{$url}" onclick="out(this,'{$username}');">{$title}</a><br />
            {$description}
        </td>
        <td align="center" width="50">
            <span style="font-size: 10pt; color: #333333;">
                <b>IN</b><br />
                <font color="#32B067" style="font-size: 14pt;">{$unq_in_0_monthly}</font>
            </span>
            <br /><br />
        </td>
        <td align="center" width="70">
            <span style="font-size: 10pt; color: #333333;">
                <b>OUT</b><br />
                <font color="#1673BB" style="font-size: 14pt;">{$unq_out_0_monthly}</font>
            </span>
            <br /><br />
        </td>
    </tr >
</table>

<div class="myrankingtable">
<table bgcolor="black" align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td class='table_rannks'></td>
    </tr>
</table>
</div>
 
Mark

Mark

Administrator
Staff member
no, I already posted the exact code above. Here you have just added 3 divs in addition to yoru 3 tables. Look at my code above, 1 div wrapped around all 3 tables.
 
F

fyndler

Member
Mark said:
no, I already posted the exact code above. Here you have just added 3 divs in addition to yoru 3 tables. Look at my code above, 1 div wrapped around all 3 tables.
Click to expand...
Okey sorry, somehow that does not work anyway :/ I won´t load anything from the css it seems
 
F

fyndler

Member
I got this in my screen.css

Code: 
.myrankingtable{
background-image: url("images/premium_bg.gif"); /* The  image used */
background-color: #cccccc; /* Used if the image is  unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
 
Mark

Mark

Administrator
Staff member
yes, I can see it working, its just your code has other issues. As I said in your other thread, I recommend you run the default theme until you can get this theme updated. Its just very old, custom made and is missing many important templates and tags.
 

Attachments

You must log in or register to reply here.
Top