Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Topic started by: pepa on January 19, 2018, 09:38:46 PM

Title: Change font size of custom text above signature
Post by: pepa on January 19, 2018, 09:38:46 PM
I need to display some user info just above their signature - Location, Suburb e.g. Brisbane, Toowong

Text display OK but it would look a lot better if it was a little smaller.  I tried editing in Index.css the following:
.custom_fields_above_signature
{
   width: 98%;
   clear: right;
   padding: 1em 0 3px 0;
   border-top: 1px solid #aaa;
   line-height: 1.4em;
   font-size: 0.85em;
}


In particular reducing the font-size, but it has no effect.  Anyone know where I need to edit this?  I'm using 2.0.15, default theme with Responsive Curve.
Title: Re: Change font size of custom text above signature
Post by: Sir Osis of Liver on January 19, 2018, 11:18:35 PM
Font size in poster info is defined here -

index.css



/* Default font sizes: small (8pt), normal (10pt), and large (14pt). */
.smalltext, tr.smalltext th
{
font-size: 0.85em;
font-family: verdana, sans-serif;
}



and called here -

index.template.php



// Show a link to the member's profile.
echo '
', $message['member']['link'], '
</h4>
<ul class="reset smalltext" id="msg_', $message['id'], '_extra_info">';



This affects all text in poster block.  You would have to apply your custom class just to the bits you want smaller.

Title: Re: Change font size of custom text above signature
Post by: pepa on January 19, 2018, 11:50:39 PM
Quote from: Sir Osis of Liver on January 19, 2018, 11:18:35 PM
Font size in poster info is defined here -

index.css



/* Default font sizes: small (8pt), normal (10pt), and large (14pt). */
.smalltext, tr.smalltext th
{
font-size: 0.85em;
font-family: verdana, sans-serif;
}



and called here -

index.template.php



// Show a link to the member's profile.
echo '
', $message['member']['link'], '
</h4>
<ul class="reset smalltext" id="msg_', $message['id'], '_extra_info">';



This affects all text in poster block.  You would have to apply your custom class just to the bits you want smaller.

Not completely sure if that's what I mean?  The text I'm referring to is displayed in display.template.php by this code:

// Are there any custom profile fields for above the signature?
if (!empty($message['member']['custom_fields']))
{
foreach ($message['member']['custom_fields'] as $custom)
if (empty($custom['placement']) || empty($custom['value']))
echo
$custom['value'], '&nbsp &nbsp';
}


Does that apply to what you have described above?
Title: Re: Change font size of custom text above signature
Post by: Gwenwyfar on January 20, 2018, 10:23:48 AM
.smalltext, tr.smalltext th will change many places in the entire theme, not sure if it will also apply to the custom signature fields.

Have you refreshed your cache since you made your changes on .custom_fields_above_signature?
Title: Re: Change font size of custom text above signature
Post by: pepa on January 20, 2018, 08:31:11 PM
Quote from: Gwenwyfar on January 20, 2018, 10:23:48 AM
.smalltext, tr.smalltext th will change many places in the entire theme, not sure if it will also apply to the custom signature fields.

Have you refreshed your cache since you made your changes on .custom_fields_above_signature?

Yes .. thanks for your suggestion Gwenwyfar, however, I've done that a few times and it makes no difference.
Title: Re: Change font size of custom text above signature
Post by: Sir Osis of Liver on January 20, 2018, 10:19:10 PM
The code I posted last night is, of course, in Display.template.php, not index.template.php.  (Sir Osis is getting a bit too old for multi-tasking. :P)  Where exactly did you place the new class?
Title: Re: Change font size of custom text above signature
Post by: pepa on January 20, 2018, 11:22:16 PM
Quote from: Sir Osis of Liver on January 20, 2018, 10:19:10 PM
The code I posted last night is, of course, in Display.template.php, not index.template.php.  (Sir Osis is getting a bit too old for multi-tasking. :P)  Where exactly did you place the new class?

Too old ... lol, you and me both.  I haven't done any serious coding for at least 10 years and now I'm setting up this forum as a volunteer for a not for profit group!

Anyway, what I have tried doing today is calling the class .custom_fields_above_signature (from index.css) in display.template.php. So I changed the font size (in index.css) from 0.85em to 0.65em ... looks better but there are two problems.

1.  The text is displayed with a top and bottom border, probably because I called the class by wrapping it in a div and looks like divs are defined elsewhere with a top and bottom border.  There is a top border in the class .custom_fields_above_signature but removing that makes no difference.

2.  I want the text displayed inline but it displays as a list.

Hope that's clear?
Title: Re: Change font size of custom text above signature
Post by: Sir Osis of Liver on January 20, 2018, 11:37:09 PM
Can I see it?
Title: Re: Change font size of custom text above signature
Post by: Sir Osis of Liver on January 20, 2018, 11:48:09 PM
I think you're making this more complicated than it needs to be.  If you just want to reduce font size of specific fields in poster info, make a css class like this -



.poster_custom
{
font-size: .65em;
}



and plug it into the field you want to change -



// Show their personal text?
if (!empty($settings['show_blurb']) && $message['member']['blurb'] != '')
echo '
<li class="poster_custom">', $message['member']['blurb'], '</li>';



That will reduce font-size of personal text only.  You can apply it to any of the other fields same way.
Title: Re: Change font size of custom text above signature
Post by: pepa on January 21, 2018, 12:19:15 AM
Quote from: Sir Osis of Liver on January 20, 2018, 11:48:09 PM
I think you're making this more complicated than it needs to be.  If you just want to reduce font size of specific fields in poster info, make a css class like this -



.poster_custom
{
font-size: .65em;
}



and plug it into the field you want to change -



// Show their personal text?
if (!empty($settings['show_blurb']) && $message['member']['blurb'] != '')
echo '
<li class="poster_custom">', $message['member']['blurb'], '</li>';



That will reduce font-size of personal text only.  You can apply it to any of the other fields same way.

What I did was in display.template.php I used:

// Are there any custom profile fields for above the signature?
            if (!empty($message['member']['custom_fields']))
         {
            foreach ($message['member']['custom_fields'] as $custom)
               if (empty($custom['placement']) || empty($custom['value']))
                  echo '
                        <div class ="custom_fields_above_signature">', $custom['value'], '&nbsp &nbsp </div>';
         }


and I altered the font size in index.css (and also removed the top border) so:

.custom_fields_above_signature
{
   width: 98%;
   clear: right;
   line-height: 1.4em;
   font-size: 0.65em;
}


End result changed the font size but with the 2 problems I mentioned above.

I'll have a play with your code but not sure I entirely have my head around it as I want it in the "custom text above the signature not in the poster block.
Title: Re: Change font size of custom text above signature
Post by: Gwenwyfar on January 21, 2018, 06:40:20 AM
Added some fields here for testing...

No need to change anything in Display.template.php, just add the font size change to .custom_fields_above_signature (that you already did). If you want the fields to display inline use


.custom_fields_above_signature li {
display: inline-block; }

.custom_fields_above_signature li + li {
margin-left: 14px; }


There is a border above the signature and one above .custom_fields_above_signature here:

.signature, .custom_fields_above_signature {
    border-top: 1px #ccc solid;


I'd just remove the one above .signature if you don't want it, otherwise there will be no distinction from the posts to the signature.
Title: Re: Change font size of custom text above signature
Post by: Sir Osis of Liver on January 21, 2018, 03:29:26 PM
Hmm, I've been working with Curve display template, it's a bit different from Responsive Curve.  Just installed it, doesn't load correctly, no css.  Will have to tinker with it soon as I get a minute.
Title: Re: Change font size of custom text above signature
Post by: Gwenwyfar on January 21, 2018, 03:36:37 PM
Responsive Curve doesn't change anything in the main css nor Display.template.
Title: Re: Change font size of custom text above signature
Post by: Sir Osis of Liver on January 21, 2018, 03:57:21 PM
Haven't been paying attention, was looking in the wrong place. :P  Your suggestion should work fine.
Title: Re: Change font size of custom text above signature
Post by: pepa on January 21, 2018, 09:10:53 PM
Quote from: Gwenwyfar on January 21, 2018, 06:40:20 AM
Added some fields here for testing...

No need to change anything in Display.template.php, just add the font size change to .custom_fields_above_signature (that you already did). If you want the fields to display inline use


.custom_fields_above_signature li {
display: inline-block; }

.custom_fields_above_signature li + li {
margin-left: 14px; }


There is a border above the signature and one above .custom_fields_above_signature here:

.signature, .custom_fields_above_signature {
    border-top: 1px #ccc solid;


I'd just remove the one above .signature if you don't want it, otherwise there will be no distinction from the posts to the signature.

Hi Gwenwyfar, thanks for your efforts but unfortunately it makes no difference.  If I revert to the standard code in display.template.php and use your suggestions just for alterations in index.css then nothing is displayed above the signature at all?

Title: Re: Change font size of custom text above signature
Post by: Gwenwyfar on January 22, 2018, 04:54:06 AM
That is a standard class that comes with the theme, it is always there in Curve, unless you had already altered it before with a mod or otherwise.

This is how the default file looks like:


// Are there any custom profile fields for above the signature?
      if (!empty($message['member']['custom_fields']))
      {
         $shown = false;
         foreach ($message['member']['custom_fields'] as $custom)
         {
            if ($custom['placement'] != 2 || empty($custom['value']))
               continue;
            if (empty($shown))
            {
               $shown = true;
               echo '
                     <div class="custom_fields_above_signature">
                        <ul class="reset nolist">';
            }
            echo '
                           <li>', $custom['value'], '</li>';
         }
         if ($shown)
            echo '
                        </ul>
                     </div>';
      }
Title: Re: Change font size of custom text above signature
Post by: pepa on January 22, 2018, 05:21:07 AM
Quote from: Gwenwyfar on January 22, 2018, 04:54:06 AM
That is a standard class that comes with the theme, it is always there in Curve, unless you had already altered it before with a mod or otherwise.

This is how the default file looks like:


// Are there any custom profile fields for above the signature?
      if (!empty($message['member']['custom_fields']))
      {
         $shown = false;
         foreach ($message['member']['custom_fields'] as $custom)
         {
            if ($custom['placement'] != 2 || empty($custom['value']))
               continue;
            if (empty($shown))
            {
               $shown = true;
               echo '
                     <div class="custom_fields_above_signature">
                        <ul class="reset nolist">';
            }
            echo '
                           <li>', $custom['value'], '</li>';
         }
         if ($shown)
            echo '
                        </ul>
                     </div>';
      }


Yes, agreed ... and if I reinsert that code into display.template.php and your other code into index.css then nothing at all is displayed above the signature.
Title: Re: Change font size of custom text above signature
Post by: Gwenwyfar on January 22, 2018, 05:46:51 AM
I'm not sure if this is a general issue but it took a few minutes/refreshes to show for me. Maybe it is cached differently (odd but all else was getting updated normally...).

There should be nothing wrong with either code otherwise, works just fine in my test install to do what you want.
Title: Re: Change font size of custom text above signature
Post by: pepa on January 22, 2018, 06:05:44 AM
Quote from: Gwenwyfar on January 22, 2018, 05:46:51 AM
I'm not sure if this is a general issue but it took a few minutes/refreshes to show for me. Maybe it is cached differently (odd but all else was getting updated normally...).

There should be nothing wrong with either code otherwise, works just fine in my test install to do what you want.

Yep, not sure what's happening here.  I'm also using this code (thanks to Sir Osis) to display the custom profile fields in the poster block:

// Any custom fields for standard placement?
if (!empty($message['member']['custom_fields']))
{
foreach ($message['member']['custom_fields'] as $custom)
if (empty($custom['placement']) || empty($custom['value']))
echo '
<li class="custom">', $custom['value'], '</li>';
}


It was working perfectly but now it only displays the first two custom fields?

Just realised the above code was working perfectly in Redsy theme but now misbehaving since I changed to default theme with responsive curve.
Title: Re: Change font size of custom text above signature
Post by: Sir Osis of Liver on January 22, 2018, 12:15:59 PM
Just took a quick look at previous topic, that code edit was to remove labels from custom fields -



<li class="custom">', $custom['title'], ': ', $custom['value'], '</li>';

<li class="custom">', $custom['value'], '</li>';



otherwise code is the same, shouldn't affect anything else.
Title: Re: Change font size of custom text above signature
Post by: Sir Osis of Liver on January 22, 2018, 12:29:55 PM
Grtting back to your original request, don't know why changing font-size in .custom_fields_above_signature doesn't work (for me, either), but this does -

Display.template.php



/// Any custom fields for standard placement?
if (!empty($message['member']['custom_fields']))
{
foreach ($message['member']['custom_fields'] as $custom)
if (empty($custom['placement']) || empty($custom['value']))
echo '
<li class="custom_fields">',  $custom['value'], '</li>';
}



index.css



.custom_fields
{
font-size: .65em;
}



I'm seeing three fields diplayed correctly.
Title: Re: Change font size of custom text above signature
Post by: Gwenwyfar on January 22, 2018, 03:26:19 PM
Quote from: pepa on January 22, 2018, 06:05:44 AM
It was working perfectly but now it only displays the first two custom fields?

Just realised the above code was working perfectly in Redsy theme but now misbehaving since I changed to default theme with responsive curve.
You're right, it does that. Maybe this should be submitted as a bug report.

if ($custom['placement'] != 2 || empty($custom['value']))

Removing $custom['placement'] != 2 ||  fixes this.
Title: Re: Change font size of custom text above signature
Post by: pepa on January 22, 2018, 05:59:18 PM
Quote from: Sir Osis of Liver on January 22, 2018, 12:29:55 PM
Grtting back to your original request, don't know why changing font-size in .custom_fields_above_signature doesn't work (for me, either), but this does -

Display.template.php



/// Any custom fields for standard placement?
if (!empty($message['member']['custom_fields']))
{
foreach ($message['member']['custom_fields'] as $custom)
if (empty($custom['placement']) || empty($custom['value']))
echo '
<li class="custom_fields">',  $custom['value'], '</li>';
}



index.css



.custom_fields
{
font-size: .65em;
}



I'm seeing three fields diplayed correctly.

Yes, thank you that works to change the font size.  I'm still only seeing two fields displayed i.e. two in poster block and the same two above the signature.
Title: Re: Change font size of custom text above signature
Post by: pepa on January 22, 2018, 06:01:23 PM
Quote from: Gwenwyfar on January 22, 2018, 03:26:19 PM
Quote from: pepa on January 22, 2018, 06:05:44 AM
It was working perfectly but now it only displays the first two custom fields?

Just realised the above code was working perfectly in Redsy theme but now misbehaving since I changed to default theme with responsive curve.
You're right, it does that. Maybe this should be submitted as a bug report.

if ($custom['placement'] != 2 || empty($custom['value']))

Removing $custom['placement'] != 2 ||  fixes this.

Thanks again Gwenwyfar .... unfortunately still no luck, just seeing two fields displayed after removing the code you suggested?
Title: Re: Change font size of custom text above signature
Post by: Gwenwyfar on January 22, 2018, 06:08:55 PM
I haven't checked if there is more of that code elsewhere, I removed it here for the one for above signature area and it is now displaying my 3 fields (it was only showing 2 before).

Could you attach your Display.template.php?
Title: Re: Change font size of custom text above signature
Post by: Sir Osis of Liver on January 22, 2018, 09:02:58 PM
Works fine for me in either location, with Display.template.php edited as above to remove field label, and new css class to reduce font.  I cannot replicate the two field glitch.

Title: Re: Change font size of custom text above signature
Post by: pepa on January 22, 2018, 09:28:19 PM
Quote from: Gwenwyfar on January 22, 2018, 06:08:55 PM
I haven't checked if there is more of that code elsewhere, I removed it here for the one for above signature area and it is now displaying my 3 fields (it was only showing 2 before).

Could you attach your Display.template.php?

display.template.php attached
Title: Re: Change font size of custom text above signature
Post by: Sir Osis of Liver on January 22, 2018, 09:43:43 PM
That file displays 3 fields in either location, with or without this code -



     if ($custom['placement'] != 2 || empty($custom['value']))



Are you sure all fields are configured correctly?

Title: Re: Change font size of custom text above signature
Post by: pepa on January 22, 2018, 10:05:18 PM
Quote from: Sir Osis of Liver on January 22, 2018, 09:43:43 PM
That file displays 3 fields in either location, with or without this code -



     if ($custom['placement'] != 2 || empty($custom['value']))



Are you sure all fields are configured correctly?

Yep ... amazing, that was it.  Show on topic view wasn't checked on the 3rd field.  For some reason it had become unchecked when I changed for Redsy theme.  I didn't physically do it, so I have no explanation.

Thank you both for all your help with this .... fantastic community here : )
Title: Re: Change font size of custom text above signature
Post by: pepa on January 23, 2018, 02:02:46 AM
Just one last comment on all of this ...

If I comment out the font size in .custom_fields_above_signature in index.css then the class that Sir Osis added i.e.

.custom_fields
{
font-size: .65em;
}


doesn't work or, at least, the text of custom fields displayed above the signature becomes approx twice the size, so there may be some bug operating here?  But no biggie all the problems I was encountering have been resolved thanks to the wonderful support here!
Title: Re: Change font size of custom text above signature
Post by: Gwenwyfar on January 23, 2018, 06:19:05 AM
Hmm, odd things going on in these fields. Mines are all checked to display.

Glad it's all sorted then :)

Quotedoesn't work or, at least, the text of custom fields displayed above the signature becomes approx twice the size, so there may be some bug operating here?
em is a percentage, so it should be reducing whatever font size it originally was. No idea why it would become larger though, maybe that area has a larger font size being inherited from somewhere.
Title: Re: Change font size of custom text above signature
Post by: pepa on January 23, 2018, 07:25:27 AM
Quote from: Gwenwyfar on January 23, 2018, 06:19:05 AM
Hmm, odd things going on in these fields. Mines are all checked to display.

Glad it's all sorted then :)

Quotedoesn't work or, at least, the text of custom fields displayed above the signature becomes approx twice the size, so there may be some bug operating here?
em is a percentage, so it should be reducing whatever font size it originally was. No idea why it would become larger though, maybe that area has a larger font size being inherited from somewhere.

Yes, my thoughts as well ... some inheritance happening I'm not aware of.  Thank you for all your help with this (and Sir Osis).  I was getting quite lost and frustrated but the two of you pulled me through, great outcome : )
Title: Re: Change font size of custom text above signature
Post by: Sir Osis of Liver on January 23, 2018, 03:37:49 PM
Quote from: pepa on January 23, 2018, 02:02:46 AM
doesn't work or, at least, the text of custom fields displayed above the signature becomes approx twice the size

You have to change formatting for both.  Font-size for fields in poster info block are adjusted using new .custom_fields class.  That has no effect on fields displayed above signature, that's formatted  in .custom_fields_above_signature, you have to change both -



.custom_fields_above_signature
{
width: 98%;
clear: right;
padding: 1em 0 3px 0;
border-top: 1px solid #aaa;
line-height: 1.4em;
font-size: 0.65em;
}

.custom_fields
{
font-size: .65em;
}