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.

How to Make a Census Widget

View previous topic View next topic Go down

Solved How to Make a Census Widget

Post by Zed is Not Dead on 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


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



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
Forumember

Posts : 230
Reputation : 27
Language : English

http://fairytailonline-rp.forumotion.com/

Back to top Go down

Solved Re: How to Make a Census Widget

Post by Ange Tuteur on 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
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to Make a Census Widget

Post by Zed is Not Dead on 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
Forumember

Posts : 230
Reputation : 27
Language : English

http://fairytailonline-rp.forumotion.com/

Back to top Go down

Solved Re: How to Make a Census Widget

Post by Ange Tuteur on 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
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to Make a Census Widget

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

sweet I appreciate it!

Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

http://fairytailonline-rp.forumotion.com/

Back to top Go down

Solved Re: How to Make a Census Widget

Post by Ange Tuteur on 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 :


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
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to Make a Census Widget

Post by Zed is Not Dead on 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
Forumember

Posts : 230
Reputation : 27
Language : English

http://fairytailonline-rp.forumotion.com/

Back to top Go down

Solved Re: How to Make a Census Widget

Post by Ange Tuteur on 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
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to Make a Census Widget

Post by Zed is Not Dead on 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



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.


Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

http://fairytailonline-rp.forumotion.com/

Back to top Go down

Solved Re: How to Make a Census Widget

Post by Ange Tuteur on 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
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to Make a Census Widget

Post by Zed is Not Dead on 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
Forumember

Posts : 230
Reputation : 27
Language : English

http://fairytailonline-rp.forumotion.com/

Back to top Go down

Solved Re: How to Make a Census Widget

Post by Ange Tuteur on 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
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to Make a Census Widget

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

Slight issue this is what it looks like



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



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



I want this to happen:

{THIS IS AN IMAGE I MADE IN PHOTOSHOP TO HELP GIVE A BETTER LOOK OF WHAT I WANT}

Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

http://fairytailonline-rp.forumotion.com/

Back to top Go down

Solved Re: How to Make a Census Widget

Post by Ange Tuteur on 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
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to Make a Census Widget

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

Worked Thank you, you can archive now

Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

http://fairytailonline-rp.forumotion.com/

Back to top Go down

Solved Re: How to Make a Census Widget

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

You're welcome ^^

Topic archived

Have a great weekend. Mr. Green

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
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