My casual, random and whatnot design doubts

Rhino.Freak Mon 07 Apr 2014, 06:51

Ange Tuteur Wed 30 Apr 2014, 10:16

Rhino.Freak Thu 01 May 2014, 02:20

Ange Tuteur Thu 01 May 2014, 12:05

Rhino.Freak Fri 02 May 2014, 01:55

Ange Tuteur Fri 02 May 2014, 11:56

Rhino.Freak Sat 03 May 2014, 03:06

Right! I knew there was an option for it..
And I wanted to change text styles inside categories n forums tables, like forum description, no. of posts and topics etc.. how? im looking for a common selector of it all.. I highlighted em here..


I also want to place the "profile" "pm" "website" etc..
THERE.. how to?


Edit : uhmm.. Please check any topic on my test forum http://freetest.forumotion.com/t1-
please see the buttons (preview send), I want to ask how can I center the text in it vertically? Its too down low..

Ange Tuteur Mon 05 May 2014, 04:29

1. You should be able to select all the dd elements in the forabg by using the dd tag. Make sure to write .forabg .row to select the row elements and not the header elements. If you want to do this for topics use .forumbg instead of .forabg.

Code:

.forabg .row dd {
    font-family:papyrus, sans-serif;
    color:violet;
}

2. I would wait on this for now

3. For the buttons, did you increase their height ? I usually like to use padding to center my text in a element that acts as a button.

Ex :

Code:

.button1, .button2 { padding:3px 6px; }

Just like bg position, except with a shorthand version of setting the padding.
padding:y x;

y : vertical axis
x : horizontal axis

Now with this when setting Y we're setting 3px on the top and bottom, so that is a total of 6px. With X we're setting 6px on the left and right, gives us a total of 12px.

Rhino.Freak Mon 05 May 2014, 10:27

for 1 and 3, THANK YOU! works awesome
for 2, okay I will wait

quick question: the Main Font Size in ACP > Display > Colors gets affected to everywhere??

also, is there any way I can mark all my profile field titles by some class and style by it?
I tried div and span but it didn't work.. help.  

edit: hmph..I'm using the text online offline indicator tutorial made by you.. but I want it to be nicely fit in my profile while it isn't   
How can i increase spacing between profile fields?
sorry but I'll make sure these are last things I need help with..its just I tried very hard but..  

Ange Tuteur Mon 05 May 2014, 22:08

Here is an example from the DOM :


Our main parent is .postprofile, we'll forget about the ID and DIV tag name. Next we skip the two parents of label and just write .postprofile .label. This should be enough for styling the field titles however, if they're colored you need to select a span tag inside label. Your resulting selector should be .postprofile .label span, for color you'll need to use important.

Code:

.postprofile .label span { color:red !important; }

In your profiles there is a dd tag which contains a break tag.

Rhino.Freak Mon 05 May 2014, 22:49

oh thanks ! :Dthat was helpful!
Firefox browser tools are much more better than Chromes..!!

Regarding that dd with break tag, how do I get rid of it?
There's one little thing more


I was trying to center the text inside it, but couldn't .. I tried to play around with margin and padding stuff through my browser tools but neither helped.. its dd select ..
That got fixed un-expectedly

Ange Tuteur Tue 06 May 2014, 18:37

Rhino.Freak Wed 07 May 2014, 03:44

I was talking about centering vertically.. but its done anyways

I actually want to make that "ONLINE" "OFFLINE" text a bit for to the right.. however I am failing to do so with text-indent thing..  

I was lurking around on support forum, and finally found a thread where you created the rep.bar for first time.. I found the one of exactly how I want it, however it is for punBB and so it doesn't work..
can you convert this one part to Phpbb3/Invision (assuming both have same thing) instead?
I tried but couldn't..

Code:


    $('.user').each(function() {
       var reg = new RegExp ('.*'+repName+': (\\d+).*');
       var rep = Number($(this).text().replace(reg,'$1'));
       $(this).find('.label:contains('+repName+')').before('<div id="repu">');
       var reg2 = new RegExp ('<span class="label">'+repName+': </span>\\d+<br>');
       $(this).html($(this).html().replace(reg2,''));
       if (rep >= repLv["lv1"]) { $(this).find('#repu').html('Reputation: '+rep+'<br>'+repLvName.lv1) }
       if (rep >= repLv["lv2"]) { $(this).find('#repu').html('Reputation: '+rep+'<br>'+repLvName.lv2) }
       if (rep >= repLv["lv3"]) { $(this).find('#repu').html('Reputation: '+rep+'<br>'+repLvName.lv3) }
       if (rep >= repLv["lv4"]) { $(this).find('#repu').html('Reputation: '+rep+'<br>'+repLvName.lv4) }
       if (rep >= repLv["lv5"]) { $(this).find('#repu').html('Reputation: '+rep+'<br>'+repLvName.lv5) }
       if (rep >= repLv["lv6"]) { $(this).find('#repu').html('Reputation: '+rep+'<br>'+repLvName.lv6) }
       if (rep >= repLv["lv7"]) { $(this).find('#repu').html('Reputation: '+rep+'<br>'+repLvName.lv7) }
       if (rep >= repLv["lv8"]) { $(this).find('#repu').html('Reputation: '+rep+'<br>'+repLvName.lv8) }
    });
});

Ange Tuteur Wed 07 May 2014, 05:49

Rhino.Freak Wed 07 May 2014, 07:05

Ange Tuteur Wed 07 May 2014, 07:16

.user_status is the class given to both tables.

Humm..see if this works, it places it under.

Code:

$(document).ready(function() {
  
  var version = 'phpbb3';
  
  var settings = {
      repName : 'Rep',
      repStyle : 'block',
      repImage : 'http://i57.servimg.com/u/f57/18/21/41/30/star12.png'
    };
  
  var repLv = {
      lv1 : 1,
      lv2 : 5,
      lv3 : 10,
      lv4 : 20,
      lv5 : 40,
      lv6 : 65,
      lv7 : 80,
      lv8 : 100
    };
  
    if (settings.repStyle.toLowerCase() == 'block') { var repBlock = '<span id="rLv" class="repuBlock">' }
    else if (settings.repStyle.toLowerCase() == 'image') { var repBlock = '<img id="rLv" src="'+settings.repImage+'"/>' }
    else { var repBlock = '<span id="rLv" class="repuBlock">' }
    
    var ver = { phpbb2 : version.toLowerCase() == 'phpbb2', phpbb3 : version.toLowerCase() == 'phpbb3', punbb : version.toLowerCase() == 'punbb', invision : version.toLowerCase() == 'invision' };
    var reg = new RegExp('.*'+settings.repName+':\\s+(\\d+).*');
    var replace = new RegExp('(<span class="label"><span style="color:#[0-9a-f]+;">' + settings.repName + '</span>:\\s</span>\\s\\d+<br>)','i');
 
  if (ver.phpbb3) {
      $('.postprofile').each(function() {
          var rep = Number($(this).text().replace(reg,'$1'));
          $(this).html($(this).html().replace(replace,'$1<div id="repu"></div>'));
          if (rep >= repLv.lv1) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv2 }
          if (rep >= repLv.lv2) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv3 }
          if (rep >= repLv.lv3) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv4 }
          if (rep >= repLv.lv4) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv5 }
          if (rep >= repLv.lv5) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv6 }
          if (rep >= repLv.lv6) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv7 }
          if (rep >= repLv.lv7) { $(this).find('#repu').append(repBlock); var next = rep + '/' + repLv.lv8 }
          if (rep >= repLv.lv8) { $(this).find('#repu').append(repBlock); var next = 'MAX' }
          $(this).find('#repu').attr('title','Reputation level ' + $(this).find('#rLv').length + '\nNext : (' + next + ')');
      });
    }
});

Had it lying around in my new files.

Rhino.Freak Wed 07 May 2014, 08:31

Ange Tuteur Wed 07 May 2014, 17:07

Rhino.Freak Wed 07 May 2014, 23:37

Thanks!!!! +1 +1
though you misunderstood me, I meant that on rep 0, it should show newbie and on rep 100, good.. like that
I'll tweak it now, thanks so much

Ange Tuteur Thu 08 May 2014, 02:05

Ooooh looks like I did !

I read it as "Zero out of One Hundred"

You're welcome though

Rhino.Freak Sat 10 May 2014, 02:50

My basic skin designing for forum #2 is almost done..now remains the gfxing by photoshop, thnx for all help


edit: there's a new problem now, in the #fa_ticker_container I believe, when I look at it from my console, it has width: 100% !important; line, which is default since its not in my CSS sheet, how do I get rid of it? coz it makes the whole thing overflow on the right side, while when I uncheck it from my console then it works perfectly like I want it to be, I even tried to put width: auto !important; in my CSS but it still didn't work ... help!

Ange Tuteur Wed 21 May 2014, 19:42

Rhino.Freak Fri 23 May 2014, 10:09

didn't work
need help!

ooh ps: a small question.. how do I vote for a post without the buttons? by using the links? please tell me

Ange Tuteur Fri 06 Jun 2014, 00:10

Rhino.Freak Fri 06 Jun 2014, 04:41

That worked

and by voting I meant, reputation.. like +1 or -1..

Ange Tuteur Sat 07 Jun 2014, 08:52

Sponsored content