Signature Display mod

[fluffy82]

I saw that the last updates of the mod were done by @Ken Roy and Bart Degryse, so I guess I need to direct this question to you?

I absolutely love the display signature mod. But as I'm using a whole bunch of other mods and my own css for the getperson page, there is some interference.

Right now, the birth/death dates and age of the person, are being pushed to the right by the signature image. I would prefer it to show below, like everything else.
The easiest and best way of doing that (I think), is adding "display: block;" to the signature image. That seems to solve everything. But...
The image is not embedded in a div or doesn't have any other identification that allows me to easily add the display to my css rules. I need to add it in the source code.

My knowledge of php is rather basic, and the output code of the signature image is over my head. It's a complete jungle of ifs and elses, packed with variables. My head is spinning...
Could you tell me where I can add this line in the mod, so every time a signature is displayed, it has the "block" property?

As the mod is inserting lines into existing code, rather than adding a block before or after, I don't think it is easier to embed the image in a separate div. Giving it an ID and then add a line to my css would have the same effect as just adding the display: block straight into the code.

Hope I'm making sense. In attachment a "before and after", done with my brower's inspect tool.

[Ken Roy]

I can look at Signature Display mod after TNG 13.1 is released, but it might not be until December.  Too many other things still need attention with TNG 13.1

There are also too many mods that currently affect that section of the code in TNG.   I am also not an HTML and CSS web programmer and know nothing about WordPress other than the problems I see on this forum

[bhemph]

Tom,
    I don't see that the text after is using the display: inline format on mine, but I don't know what extra mods you have touching that code as Ken indicated.  If you find the 2 <img locations in the mod at the bottom and change them to <img class=\"aligntop sig-display\" does that allow you to add a css element for .sig-display {display: block;} to your css file and get the output you want?  The aligntop class is the css replacement for the former attribute align=top.  You can also remove the former border=0 attribute and move it to the sig-display css as part of the CSS standards update to HTML.

Brent

[fluffy82]

2 hours ago, bhemph said:

Tom,
    I don't see that the text after is using the display: inline format on mine, but I don't know what extra mods you have touching that code as Ken indicated.  If you find the 2 <img locations in the mod at the bottom and change them to <img class=\"aligntop sig-display\" does that allow you to add a css element for .sig-display {display: block;} to your css file and get the output you want?  The aligntop class is the css replacement for the former attribute align=top.  You can also remove the former border=0 attribute and move it to the sig-display css as part of the CSS standards update to HTML.

Brent

The mod doesn't have a class assigned to the img. It does have align=top though... You say "former", so that is going to change soon?
I was able to locate the line and added an id to it. That enables me to css it into a block display. Thanks for pointing me in the right direction!

For future reference (I know I'll forget what I did), what I did was change this:

$sig = "<br /><img src=\"$sigref\" border=\"0\" width=\"$sigwtouse\" height=\"$sightouse\" align=\"top\" alt=\"{$text['signature']}\" />";

into:

$sig = "<br /><img src=\"$sigref\" border=\"0\" width=\"$sigwtouse\" height=\"$sightouse\" align=\"top\" id=\"signature\" alt=\"{$text['signature']}\" />";

 

[bhemph]

3 minutes ago, fluffy82 said:

The mod doesn't have a class assigned to the img. It does have align=top though... You say "former", so that is going to change soon?
I was able to locate the line and added an id to it. That enables me to css it into a block display. Thanks for pointing me in the right direction!

No, I was just going by the HTML standards that some items that were attributes on elements ended up getting deprecated in favor of having css instead.  It is just the development and change of the standards over the last 25 years.  So it was a standards former instead of a mod former.  In my example, I was just adding the class to the beginning of the img tag instead of later like you did, although you made it an id instead of a class.  Either way works, since the order of items doesn't matter and the css definition is just a little different for classes vs ids.

[Ken Roy]

8 hours ago, fluffy82 said:

I was able to locate the line and added an id to it. That enables me to css it into a block display.

sounds like you also need to provide the css definition that also needs to become part of the mod update.

By the way, if you are using the mod, you also need to update the Site Using table in the TNG Wiki mod page

Thanks,

[fluffy82]

7 hours ago, Ken Roy said:

sounds like you also need to provide the css definition that also needs to become part of the mod update.

By the way, if you are using the mod, you also need to update the Site Using table in the TNG Wiki mod page

Thanks,

I'm not sure if it's something that needs to be included in the published mod. I was just looking for the location to add the piece of code myself. I'm using a ton of mods, and replaced the TNG css with the one from my WP theme (with the needed additions and modifications to make TNG work). So I'm not at all sure if the "problem" is there for everyone, or if it is merely due to my set-up.

In any case: I added id=signature in the mod file, and added #signature {display: block;} to my css.

[Ken Roy]

2 hours ago, fluffy82 said:

In any case: I added id=signature in the mod file, and added #signature {display: block;} to my css.

Thanks Tom,

As indicated in a previous post, I will likely not make the change to the mod until December.  As Brent indicated, some of the other <img source parameters might also need  move to css..