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.

How to Make a Census Widget

2 posters

Go down

Solved How to Make a Census Widget

Post by Zed is Not Dead September 18th 2015, 10:41 pm

Hello there, I was wondering if at all possible someone could help me code a census widget.

This is what I have so far:

Code:
<table class="census">
        
   <tbody>
      <tr>
            
         <td class="censustitle">
              Fairy Tail   
         </td>
            
         <td colspan="3">
                 
            <div style="padding-left: 3px; border-left: 0px solid #000000;">
                 0 
            </div>
               
         </td>
            
      </tr>
         
      <tr>
            
         <td class="censustitle">
              Blue Pegasus 
         </td>
            
         <td colspan="3">
                 
            <div style="padding-left: 3px; border-left: 0px solid #751947;">
                 0 
            </div>
               
         </td>
            
      </tr>
         
      <tr>
            
         <td class="censustitle">
              Lamia Scale 
         </td>
            
         <td colspan="3">
                 
            <div style="padding-left: 3px; border-left: 0px solid #FFFF00;;">
                 0 
            </div>
               
         </td>
            
      </tr>
         
      <tr>
            
         <td class="censustitle">
              Sabertooth 
         </td>
            
         <td colspan="3">
                 
            <div style="padding-left: 3px; border-left: 0px solid #00FFFF;">
                 0 
            </div>
               
         </td>
            
      </tr>
         
      <tr>
            
         <td class="censustitle">
              Light Bringer 
         </td>
            
         <td colspan="3">
                 
            <div style="padding-left: 3px; border-left: 0px solid #99FF33;">
                 0 
            </div>
               
         </td>
            
      </tr>
         
      <tr>
            
         <td class="censustitle">
              Sage Pillar 
         </td>
            
         <td colspan="3">
                 
            <div style="padding-left: 3px; border-left: 0px solid #CC3300;">
                 0 
            </div>
               
         </td>
            
      </tr>
      <tr>
         <td class="censustitle">
              Black Airs 
         </td>
            
         <td colspan="3">
                 
            <div style="padding-left: 3px; border-left: 0px solid #CC3300;">
                 0 
            </div>
               
         </td>
            
      </tr>
      <tr>
         <td class="censustitle">
              Dragon Heart 
         </td>
            
         <td colspan="3">
                 
            <div style="padding-left: 3px; border-left: 0px solid #CC3300;">
                 0 
            </div>
               
         </td>
            
      </tr>
      <tr>
         <td class="censustitle">
              Tartaros 
         </td>
            
         <td colspan="3">
                 
            <div style="padding-left: 3px; border-left: 0px solid #CC3300;">
                 0 
            </div>
               
         </td>
            
      </tr>
      <tr>
         <td class="censustitle">
              Behemoth 
         </td>
            
         <td colspan="3">
                 
            <div style="padding-left: 3px; border-left: 0px solid #CC3300;">
                 0 
            </div>
               
         </td>
            
      </tr>
      <tr>
         <td class="censustitle">
              Animus Sin 
         </td>
            
         <td colspan="3">
                 
            <div style="padding-left: 3px; border-left: 0px solid #CC3300;">
                 0 
            </div>
               
         </td>
            
      </tr>
         
      <tr>
            
         <td class="censustitle">
              Total 
         </td>
            
         <td class="censustotal">
              ♂ 0 
         </td>
            
         <td class="censustotal">
              ♀ 0 
         </td>
            
      </tr>
         
   </tbody>
</table>

This is how it looks on the widget when I use the code
How to Make a Census Widget ZBYDSo0

It looks good yes but I really would like it to update on it's own

Now I want each Group to be a different color bar, I want it to be stylized in this kinda manner

How to Make a Census Widget HVA0EqK

However I would like it to update automatically so it would have to be linked to the groups right? How do I do that and how do I get it to update automatically to tell which account is male and which one is female? I seen other sites do it, I coded this one myself however I have to manually put the numbers and that is a huge hassle and not even worth it


Last edited by Zed is Not Dead on September 19th 2015, 5:01 pm; edited 1 time in total
Zed is Not Dead
Zed is Not Dead
Forumember

Posts : 257
Reputation : 28
Language : English

http://naruto-ld.forumotion.com/

Back to top Go down

Solved Re: How to Make a Census Widget

Post by Ange Tuteur September 18th 2015, 10:49 pm

Hi @Zed is Not Dead,

What's the URL of your forum ? Getting the amount of members in groups will be easy, but getting the gender will be difficult because you need to send a request to each user. This will add up when you have a lengthy group memberlist, so I wouldn't recommend that.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to Make a Census Widget

Post by Zed is Not Dead September 18th 2015, 10:51 pm

ah I thought it be cool to tell the gender but if that is the case nvm, here is the link though, http://fairytailonline-rp.forumotion.com/
Zed is Not Dead
Zed is Not Dead
Forumember

Posts : 257
Reputation : 28
Language : English

http://naruto-ld.forumotion.com/

Back to top Go down

Solved Re: How to Make a Census Widget

Post by Ange Tuteur September 18th 2015, 11:59 pm

Thanks, I just needed to confirm what version I'll be programming the counter for. ^^

Yes it's a shame we don't have easy access to the necessary data. It'd be possible, yes, but in the past I've experienced problems when sending too many consecutive requests to profiles.

Anyway, I will try and get to this tomorrow. Have a good weekend. Smile
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to Make a Census Widget

Post by Zed is Not Dead September 19th 2015, 12:28 am

sweet I appreciate it!
Zed is Not Dead
Zed is Not Dead
Forumember

Posts : 257
Reputation : 28
Language : English

http://naruto-ld.forumotion.com/

Back to top Go down

Solved Re: How to Make a Census Widget

Post by Ange Tuteur September 19th 2015, 12:15 pm

@Zed is Not Dead,

Replace your HTML with this :
Code:
<table class="census">
       
  <tbody>
      <tr>
           
        <td class="censustitle">
              Fairy Tail   
        </td>
           
        <td colspan="3">
                 
            <div id="censusFairyTail" style="padding-left: 3px; border-left: 0px solid #000000;">
                0 
            </div>
               
        </td>
           
      </tr>
         
      <tr>
           
        <td class="censustitle">
              Blue Pegasus 
        </td>
           
        <td colspan="3">
                 
            <div id="censusBluePegasus" style="padding-left: 3px; border-left: 0px solid #751947;">
                0 
            </div>
               
        </td>
           
      </tr>
         
      <tr>
           
        <td class="censustitle">
              Lamia Scale 
        </td>
           
        <td colspan="3">
                 
            <div id="censusLamiaScale" style="padding-left: 3px; border-left: 0px solid #FFFF00;;">
                0 
            </div>
               
        </td>
           
      </tr>
         
      <tr>
           
        <td class="censustitle">
              Sabertooth 
        </td>
           
        <td colspan="3">
                 
            <div id="censusSabertooth" style="padding-left: 3px; border-left: 0px solid #00FFFF;">
                0 
            </div>
               
        </td>
           
      </tr>
         
      <tr>
           
        <td class="censustitle">
              Light Bringer 
        </td>
           
        <td colspan="3">
                 
            <div id="censusLightBringer" style="padding-left: 3px; border-left: 0px solid #99FF33;">
                0 
            </div>
               
        </td>
           
      </tr>
         
      <tr>
           
        <td class="censustitle">
              Sage Pillar 
        </td>
           
        <td colspan="3">
                 
            <div id="censusSagePillar" style="padding-left: 3px; border-left: 0px solid #CC3300;">
                0 
            </div>
               
        </td>
           
      </tr>
      <tr>
        <td class="censustitle">
              Black Airs 
        </td>
           
        <td colspan="3">
                 
            <div id="censusBlackAirs" style="padding-left: 3px; border-left: 0px solid #CC3300;">
                0 
            </div>
               
        </td>
           
      </tr>
      <tr>
        <td class="censustitle">
              Dragon Heart 
        </td>
           
        <td colspan="3">
                 
            <div id="censusDragonHeart" style="padding-left: 3px; border-left: 0px solid #CC3300;">
                0 
            </div>
               
        </td>
           
      </tr>
      <tr>
        <td class="censustitle">
              Tartaros 
        </td>
           
        <td colspan="3">
                 
            <div id="censusTartaros" style="padding-left: 3px; border-left: 0px solid #CC3300;">
                0 
            </div>
               
        </td>
           
      </tr>
      <tr>
        <td class="censustitle">
              Behemoth 
        </td>
           
        <td colspan="3">
                 
            <div id="censusBehemoth" style="padding-left: 3px; border-left: 0px solid #CC3300;">
                0 
            </div>
               
        </td>
           
      </tr>
      <tr>
        <td class="censustitle">
              Animus Sin 
        </td>
           
        <td colspan="3">
                 
            <div id="censusAnimusSin" style="padding-left: 3px; border-left: 0px solid #CC3300;">
                0 
            </div>
               
        </td>
           
      </tr>
         
      <tr>
           
        <td class="censustitle">
              Total 
        </td>
           
        <td class="censustotal">
              ♂ 0 
        </td>
           
        <td class="censustotal">
              ♀ 0 
        </td>
           
      </tr>
         
  </tbody>
</table>

<script type="text/javascript">//<![CDATA[
function getGroupCount(id, callback) {
  var count = 0, pages, storage = window.localStorage;

  if (storage && storage['group_count_' + id] && storage['group_count_' + id + '_exp'] > +new Date - 1*60*60*1000) callback(storage['group_count_' + id]);
  else jQuery.get('/g' + id + '-?change_version=prosilver', function(d) {
    count = jQuery('.forumbg-table a[href^="/u"]', d).length;
    pages = jQuery('.pagination span a:not(.pag-img):last', d);


    if (pages[0]) {
      pages = +jQuery(pages).text();
      count = count * pages;
    }

    if (storage) {
      storage['group_count_' + id] = count;
      storage['group_count_' + id + '_exp'] = +new Date;
    }

    callback(count);
  });
  'par ange tuteur';
};
 
/* Fairy Tail */
getGroupCount(1, function(count) {
  var node = document.getElementById('censusFairyTail');
  node.innerHTML = '<span class="memberCount">' + count + '</span>';
  node.style.width = count * 2 + 'px';
});
 
/* Blue Pegasus */
getGroupCount(1, function(count) {
  var node = document.getElementById('censusBluePegasus');
  node.innerHTML = '<span class="memberCount">' + count + '</span>';
  node.style.width = count * 2 + 'px';
});

/* Lamia Scale */
getGroupCount(1, function(count) {
  var node = document.getElementById('censusLamiaScale');
  node.innerHTML = '<span class="memberCount">' + count + '</span>';
  node.style.width = count * 2 + 'px';
});

/* Sabertooth */
getGroupCount(1, function(count) {
  var node = document.getElementById('censusSabertooth');
  node.innerHTML = '<span class="memberCount">' + count + '</span>';
  node.style.width = count * 2 + 'px';
});
 
/* Light Bringer */
getGroupCount(1, function(count) {
  var node = document.getElementById('censusLightBringer');
  node.innerHTML = '<span class="memberCount">' + count + '</span>';
  node.style.width = count * 2 + 'px';
});
 
/* Sage Pillar */
getGroupCount(1, function(count) {
  var node = document.getElementById('censusSagePillar');
  node.innerHTML = '<span class="memberCount">' + count + '</span>';
  node.style.width = count * 2 + 'px';
});
 
/* Black Airs */
getGroupCount(1, function(count) {
  var node = document.getElementById('censusBlackAirs');
  node.innerHTML = '<span class="memberCount">' + count + '</span>';
  node.style.width = count * 2 + 'px';
});
 
/* Dragon Heart */
getGroupCount(1, function(count) {
  var node = document.getElementById('censusDragonHeart');
  node.innerHTML = '<span class="memberCount">' + count + '</span>';
  node.style.width = count * 2 + 'px';
});
 
/* Tartaros */
getGroupCount(1, function(count) {
  var node = document.getElementById('censusTartaros');
  node.innerHTML = '<span class="memberCount">' + count + '</span>';
  node.style.width = count * 2 + 'px';
});
 
/* Behemoth */
getGroupCount(1, function(count) {
  var node = document.getElementById('censusBehemoth');
  node.innerHTML = '<span class="memberCount">' + count + '</span>';
  node.style.width = count * 2 + 'px';
});
 
/* Animus Sin */
getGroupCount(1, function(count) {
  var node = document.getElementById('censusAnimusSin');
  node.innerHTML = '<span class="memberCount">' + count + '</span>';
  node.style.width = count * 2 + 'px';
});
 
//]]></script>

I added some ids for JS manipulation + a script at the bottom for getting the group count. At the very bottom you'll see things like this :
Code:
/* Fairy Tail */
getGroupCount(1, function(count) {
  document.getElementById('censusFairyTail').innerHTML = count;
});

At the moment, you should just focus on changing the number ; 1. Change this number to the id of the group you want the member count from. The id can be found via the address bar while viewing the group :
How to Make a Census Widget Captur57

Also, just to let you know, the data returned will be cached for 1 hour. So if you make changes to a group and the count doesn't change, this is why.

If any questions, let me know. Smile


Last edited by Ange Tuteur on September 21st 2015, 11:13 am; edited 1 time in total
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to Make a Census Widget

Post by Zed is Not Dead September 19th 2015, 3:07 pm

Okay so just so I get this clear the information won't updated until one hour? that works do I post that whole code in the widget? if so I did this and nothing happened it still looks the same also did you code it so colored bars will show for the individual groups?
Zed is Not Dead
Zed is Not Dead
Forumember

Posts : 257
Reputation : 28
Language : English

http://naruto-ld.forumotion.com/

Back to top Go down

Solved Re: How to Make a Census Widget

Post by Ange Tuteur September 19th 2015, 3:23 pm

Whoops that's the problem, you placed it in the widgets. Try replace it with this instead :
Code:
<table class="census">
       
  <tbody>
      <tr>
           
        <td class="censustitle">
              Fairy Tail   
        </td>
           
        <td colspan="3">
                 
            <div id="censusFairyTail" style="padding-left: 3px; border-left: 0px solid #000000;">
                0 
            </div>
               
        </td>
           
      </tr>
         
      <tr>
           
        <td class="censustitle">
              Blue Pegasus 
        </td>
           
        <td colspan="3">
                 
            <div id="censusBluePegasus" style="padding-left: 3px; border-left: 0px solid #751947;">
                0 
            </div>
               
        </td>
           
      </tr>
         
      <tr>
           
        <td class="censustitle">
              Lamia Scale 
        </td>
           
        <td colspan="3">
                 
            <div id="censusLamiaScale" style="padding-left: 3px; border-left: 0px solid #FFFF00;;">
                0 
            </div>
               
        </td>
           
      </tr>
         
      <tr>
           
        <td class="censustitle">
              Sabertooth 
        </td>
           
        <td colspan="3">
                 
            <div id="censusSabertooth" style="padding-left: 3px; border-left: 0px solid #00FFFF;">
                0 
            </div>
               
        </td>
           
      </tr>
         
      <tr>
           
        <td class="censustitle">
              Light Bringer 
        </td>
           
        <td colspan="3">
                 
            <div id="censusLightBringer" style="padding-left: 3px; border-left: 0px solid #99FF33;">
                0 
            </div>
               
        </td>
           
      </tr>
         
      <tr>
           
        <td class="censustitle">
              Sage Pillar 
        </td>
           
        <td colspan="3">
                 
            <div id="censusSagePillar" style="padding-left: 3px; border-left: 0px solid #CC3300;">
                0 
            </div>
               
        </td>
           
      </tr>
      <tr>
        <td class="censustitle">
              Black Airs 
        </td>
           
        <td colspan="3">
                 
            <div id="censusBlackAirs" style="padding-left: 3px; border-left: 0px solid #CC3300;">
                0 
            </div>
               
        </td>
           
      </tr>
      <tr>
        <td class="censustitle">
              Dragon Heart 
        </td>
           
        <td colspan="3">
                 
            <div id="censusDragonHeart" style="padding-left: 3px; border-left: 0px solid #CC3300;">
                0 
            </div>
               
        </td>
           
      </tr>
      <tr>
        <td class="censustitle">
              Tartaros 
        </td>
           
        <td colspan="3">
                 
            <div id="censusTartaros" style="padding-left: 3px; border-left: 0px solid #CC3300;">
                0 
            </div>
               
        </td>
           
      </tr>
      <tr>
        <td class="censustitle">
              Behemoth 
        </td>
           
        <td colspan="3">
                 
            <div id="censusBehemoth" style="padding-left: 3px; border-left: 0px solid #CC3300;">
                0 
            </div>
               
        </td>
           
      </tr>
      <tr>
        <td class="censustitle">
              Animus Sin 
        </td>
           
        <td colspan="3">
                 
            <div id="censusAnimusSin" style="padding-left: 3px; border-left: 0px solid #CC3300;">
                0 
            </div>
               
        </td>
           
      </tr>
         
      <tr>
           
        <td class="censustitle">
              Total 
        </td>
           
        <td class="censustotal">
              ♂ 0 
        </td>
           
        <td class="censustotal">
              ♀ 0 
        </td>
           
      </tr>
         
  </tbody>
</table>

<script type="text/javascript">//<![CDATA[
function getGroupCount(id, callback) {
  var count = 0, pages, storage = window.localStorage;

  if (storage && storage['group_count_' + id] && storage['group_count_' + id + '_exp'] > +new Date - 1*60*60*1000) callback(storage['group_count_' + id]);
  else jQuery.get('/g' + id + '-?change_version=prosilver', function(d) {
    count = jQuery('.forumbg-table a[href^="/u"]', d).length;
    pages = jQuery('.pagination span a:not(.pag-img):last', d);


    if (pages[0]) {
      pages = +jQuery(pages).text();
      count = count * pages;
    }

    if (storage) {
      storage['group_count_' + id] = count;
      storage['group_count_' + id + '_exp'] = +new Date;
    }

    callback(count);
  });
  'par ange tuteur';
};
 
/* Fairy Tail */
getGroupCount(1, function(count) {
  var node = document.getElementById('censusFairyTail');
  node.innerHTML = '<span class="memberCount">' + count + '</span>';
  node.style.width = count * 2 + 'px';
});
 
/* Blue Pegasus */
getGroupCount(1, function(count) {
  var node = document.getElementById('censusBluePegasus');
  node.innerHTML = '<span class="memberCount">' + count + '</span>';
  node.style.width = count * 2 + 'px';
});

/* Lamia Scale */
getGroupCount(1, function(count) {
  var node = document.getElementById('censusLamiaScale');
  node.innerHTML = '<span class="memberCount">' + count + '</span>';
  node.style.width = count * 2 + 'px';
});

/* Sabertooth */
getGroupCount(1, function(count) {
  var node = document.getElementById('censusSabertooth');
  node.innerHTML = '<span class="memberCount">' + count + '</span>';
  node.style.width = count * 2 + 'px';
});
 
/* Light Bringer */
getGroupCount(1, function(count) {
  var node = document.getElementById('censusLightBringer');
  node.innerHTML = '<span class="memberCount">' + count + '</span>';
  node.style.width = count * 2 + 'px';
});
 
/* Sage Pillar */
getGroupCount(1, function(count) {
  var node = document.getElementById('censusSagePillar');
  node.innerHTML = '<span class="memberCount">' + count + '</span>';
  node.style.width = count * 2 + 'px';
});
 
/* Black Airs */
getGroupCount(1, function(count) {
  var node = document.getElementById('censusBlackAirs');
  node.innerHTML = '<span class="memberCount">' + count + '</span>';
  node.style.width = count * 2 + 'px';
});
 
/* Dragon Heart */
getGroupCount(1, function(count) {
  var node = document.getElementById('censusDragonHeart');
  node.innerHTML = '<span class="memberCount">' + count + '</span>';
  node.style.width = count * 2 + 'px';
});
 
/* Tartaros */
getGroupCount(1, function(count) {
  var node = document.getElementById('censusTartaros');
  node.innerHTML = '<span class="memberCount">' + count + '</span>';
  node.style.width = count * 2 + 'px';
});
 
/* Behemoth */
getGroupCount(1, function(count) {
  var node = document.getElementById('censusBehemoth');
  node.innerHTML = '<span class="memberCount">' + count + '</span>';
  node.style.width = count * 2 + 'px';
});
 
/* Animus Sin */
getGroupCount(1, function(count) {
  var node = document.getElementById('censusAnimusSin');
  node.innerHTML = '<span class="memberCount">' + count + '</span>';
  node.style.width = count * 2 + 'px';
});
 
//]]></script>
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to Make a Census Widget

Post by Zed is Not Dead September 19th 2015, 3:45 pm

IT WORKS! but unfortunately it still doesn't have the colored bars like I asked it still looks like this

How to Make a Census Widget 8YVDyMI

but least the numbers updated instantly, but it be even better if we could get the colored bars in there. you can give random colors I will recode it to the colors I choose but I would like the colored bars specifically in this style.

How to Make a Census Widget HVA0EqK
Zed is Not Dead
Zed is Not Dead
Forumember

Posts : 257
Reputation : 28
Language : English

http://naruto-ld.forumotion.com/

Back to top Go down

Solved Re: How to Make a Census Widget

Post by Ange Tuteur September 19th 2015, 4:02 pm

Here, add these rules to your stylesheet :
Code:
.memberCount {
  background:#666;
  border-radius:0 3px 3px 0;
  text-align:center;
  position:absolute;
  height:14px;
  right:-14px;
  width:14px;
}

#censusFairyTail {
  background:#CC6;
  border-radius:3px 0 0 3px;
  position:relative;
  height:14px;
}

#censusBluePegasus {
  background:#6CC;
  border-radius:3px 0 0 3px;
  position:relative;
  height:14px;
}

#censusLamiaScale {
  background:#6C6;
  border-radius:3px 0 0 3px;
  position:relative;
  height:14px;
}

#censusSabertooth {
  background:#C66;
  border-radius:3px 0 0 3px;
  position:relative;
  height:14px;
}

#censusLightBringer {
  background:#CCC;
  border-radius:3px 0 0 3px;
  position:relative;
  height:14px;
}

#censusSagePillar {
  background:#66C;
  border-radius:3px 0 0 3px;
  position:relative;
  height:14px;
}

#censusBlackAirs {
  background:#333;
  border-radius:3px 0 0 3px;
  position:relative;
  height:14px;
}

#censusDragonHeart {
  background:#633;
  border-radius:3px 0 0 3px;
  position:relative;
  height:14px;
}

#censusTartaros {
  background:#636;
  border-radius:3px 0 0 3px;
  position:relative;
  height:14px;
}

#censusBehemoth {
  background:#C33;
  border-radius:3px 0 0 3px;
  position:relative;
  height:14px;
}

#censusAnimusSin {
  background:#663;
  border-radius:3px 0 0 3px;
  position:relative;
  height:14px;
}

They should color each bar. You can modify the colors as needed. Smile
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to Make a Census Widget

Post by Zed is Not Dead September 19th 2015, 4:08 pm

You are awesome, one last thing I want to add a background image to the overall census, how would I go about doing that?
Zed is Not Dead
Zed is Not Dead
Forumember

Posts : 257
Reputation : 28
Language : English

http://naruto-ld.forumotion.com/

Back to top Go down

Solved Re: How to Make a Census Widget

Post by Ange Tuteur September 19th 2015, 4:12 pm

It looks like you gave the table a class, so you should be able to do this :
Code:
.census {
  background:url('IMAGE') no-repeat 0 0;
}
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to Make a Census Widget

Post by Zed is Not Dead September 19th 2015, 4:24 pm

Slight issue this is what it looks like

How to Make a Census Widget JL5i40l

This is the image I am trying to put it ontop of

How to Make a Census Widget J0oGGOn

And when I use this code

Code:
.census {
  background:url('http://i.imgur.com/J0oGGOn.jpg') no-repeat 0 0;
  height:225px;
  width:290px;
}

this is what happens

How to Make a Census Widget LNiWpeU

I want this to happen:
How to Make a Census Widget MyMIh44
{THIS IS AN IMAGE I MADE IN PHOTOSHOP TO HELP GIVE A BETTER LOOK OF WHAT I WANT}
Zed is Not Dead
Zed is Not Dead
Forumember

Posts : 257
Reputation : 28
Language : English

http://naruto-ld.forumotion.com/

Back to top Go down

Solved Re: How to Make a Census Widget

Post by Ange Tuteur September 19th 2015, 4:37 pm

Try this :
Code:
.census {
  background:url('http://i.imgur.com/J0oGGOn.jpg') no-repeat 0 0;
  height:225px;
  width:273px;
  padding-top:45px;
}

.census td { width:50% }
.censustitle {
  text-align:right;
  padding-right:3px;
}

Although you might need to increase the height of the image just a tad.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to Make a Census Widget

Post by Zed is Not Dead September 19th 2015, 4:54 pm

Worked Thank you, you can archive now
Zed is Not Dead
Zed is Not Dead
Forumember

Posts : 257
Reputation : 28
Language : English

http://naruto-ld.forumotion.com/

Back to top Go down

Solved Re: How to Make a Census Widget

Post by Ange Tuteur September 19th 2015, 5:01 pm

You're welcome ^^

Topic archived

Have a great weekend. Mr. Green
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Back to top

- Similar topics

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