Signature line: image bar instead of line

[JrGirl]

Hi I am working on a forum, and trying to figure out how to do this.  I am using SMF 2.0 and wanting to replace the

___________________________________________________________

with an image "bar", is there  a way to do this?   And if so, can someone please tell me how to do so?

Thanks so much

[mirahalo]

that line is actually a border top of the div with the class  class="signature"    on your  /Themes/default/css/index.css   find the class:

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

and either alter it or create a new one with a image as the background:  http://www.w3schools.com/css/css_background.asp

[JrGirl]

thanks so much, you are awesome!  I found that line and tried it earlier just took that and added


.signature, .custom_fields_above_signature
{
   border-top: 5px url(../images/theme/signature.png);
}

And it didn't work, I will try that!!  Thanks again!

[mirahalo]

actually, try this one:

.signature, .custom_fields_above_signature
{
background-image:url('url_of_your_image.jpg');
background-repeat:no-repeat;
background-position:right top;
}

[JrGirl]

That didn't seem to work either is it because i am using it as a .png file?

[mirahalo]

you have to replace  url_of_your_image.jpg     with the actual url of the image you want to use.

[JrGirl]

i did that in both the style and index css' and they worked but it only showed half the image, and the line was still there...i am so sorry for being a pain

[mirahalo]

can I have an image example or a link to your forum?

for the line to dissapear on your class:

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


delete this part:    border-top: 1px #ccc solid;

[MULITRI]

Hello,

I know this topic is very old, but as seems was unsolved or we don't know it, i have the same problem.


I found the code

Code Select Expand


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


And I removed the line:    border-top: 1px #ccc solid;

Then as mirahalo suggested, i added that code like this:

Code Select Expand


.signature, .custom_fields_above_signature
{
background-image:url('https://url-to-image.png');
        background-repeat:no-repeat;
        background-position:center top;
}


The signature line doesn't dissapear, and the image i want to show instead the line appears under the signature. I have attached a screenshot.

Anyone could help me with this issue?

Thanks in advance.


Edit
Sorry, I forgot to say i'm using SMFv.2.1.3 with Anecdota template.

[Steve]

I assume you mean 2.0.13 ...

To get rid of the top line in the signature of that theme you have to remove the top border from both of these:

Code Select Expand

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

Code Select Expand



/* All the signatures used in the forum.  If your forum users use Mozilla, Opera, or Safari, you might add max-height here ;). */
.signature, .attachments
{
width: 98%;
overflow: auto;
clear: right;
padding: 1em 0 3px 0;
border-top: 1px solid #aaa;
line-height: 1.4em;
font-size: 0.85em;
}

[MULITRI]

Yes, sorry, i forgot that 0

The first border-top was already removed, i didn't know there was another, i missed it, so now the line has dissapeared. Thanks a lot.

However, the png bar still appears under the signature, y have tried increasing the margin-top, but nothing happens, even adding padding-top, and neither works.

I should be missing something for sure with my poor knowledge.

[ircsiinci]

Hello!

Add it to the height of the image.


height: xx px;

Have a nice day!

[MULITRI]

Thanks for trying to help ircsiinci, but i already tried that, even as background-height: as adding height: after (url), in both it didn't work.

Also tried to add position-absolute: top; and still the same problem.

Sometimes the smallest thing can be a big headache 

Nice day for you too, Thanks.

[ircsiinci]

Hello!


I tested and it should work.
Try not to think of the heights background.
Just plain height.

[MULITRI]

Isn't working for me bud, i have tried almost everything, the weird thing is that it looks perfect in Users Profiles, i'm trying to find the code which shows the signature there to compare, but i didn't found it yet, i don't know where it could be placed within so many files, css file sais that code control all the signatures shown in the forum and i saw changes affect both signature placements, so maybe something is different into php files.

For now i have changed the image i would like to show with an image much less tall, now the image line doesn't apperas under the signature in message view, but is extremely close as i have attached (for you can see the difference in Profile and Message). I will let you all know if someday i can find the solution, asking out there as well.

Thanks for your help ircsiinci.