Question about forum header

[Harvey]

This is the top of my forum:



is there a way to put this image



in the space at the top left without making the space above the forum "taller?"

[Pedro]

I think so, I'll try it for you.

[Pedro]

Please, go to  Options -> Application -> Change Appearance -> CSS.
Replace:

#harvey_img{
}
#harvey_img img{
}

With:

#harvey_img {
    position: absolute;
}
#harvey_img img {
    height: 130px;
    width: 180px;
}

and save. You can try another values for those height and width.

[Harvey]

Pedro - I was wondering if there was a way to do this with some inline html.

I don't want to change the way the entire site handles images.

This is a temporary thing.  There is a huge storm coming and I wanted to put a weather image in that spot.

[Pedro]

If you see your macro app_body_header, you will note that I've created a 'div' with id='harvey_img' and put your image inside it. In this way, the css code are only influencing this div and its image.

[Harvey]

Pedro <Nabble> wrote

If you see your macro app_body_header, you will note that I've created a 'div' with id='harvey_img' and put your image inside it. In this way, the css code are only influencing this div and its image.

So replace harvey_img

like this:

id="www.imageurl.com"

?

And also change the css as per above?

[Harvey]

I gave it a try.  That actually CENTERS the image above the forum title:



I was imagining using the blank space to the left here:



My goal was to keep the forum from getting "taller."

Is that possible?

[Pedro]

Go to your css code: Options -> Application -> Change Appearance -> CSS.

#harvey_img {
    //position: absolute;
}
#harvey_img img {
   // height: 130px;
    //width: 180px;
}

Just remove the slashes:

#harvey_img {
    position: absolute;
}
#harvey_img img {
    height: 130px;
    width: 180px;
}

and save.

[Harvey]

OK I actually forgot about the CSS haven't touched it yet.

[Harvey]

OK Cool:



Now I want to:

Add some left side padding
Add some bottom padding
Center it in the space

and make it so that when you click on it it takes you to the source image link!

[Harvey]

This moved it out into the center but didn't work for the bottom:

#harvey_img {
    position: absolute;
}
#harvey_img img {
    height: 130px;
    width: 180px;
    margin-left: 60px;
    margin-bottom: 60px;
}

[Harvey]

OK now I figured out that the height of the space is FIXED by the content in the Forum Description. So I added a line break there and it gives me the bottom padding I am looking for:



Now I just need to know how to link to the full size image.

And of course remember how to undo the whole thing after the storm passes. LOL

[Harvey]

Just found another thing.

I was hoping to just have this image on the root page not in every sub forum:



All the descriptions are different and it doesn't exactly fit too.

[Pedro]

I've made the changes for you. Please, take a look.

[Harvey]

Pedro that is very cool.

I can just paste

display:none;

into the CSS when I want to leave the space blank. I could also put any other image there but just changing the source code I think.

Question - the source images  a few hundred pixels wider than my embed frame.

How can I limit the image, when clicked on, so that it is only 750 px wide within the frame?

I tried to do it here:

<div id="harvey_img">
<a href="http://204.2.104.196/gfs/WINTER_GFS0P5_SFC_ACCUM-SNOW_120HR.gif">
<img width="750" height="0" alt='' border="1" src='http://204.2.104.196/gfs/WINTER_GFS0P5_SFC_ACCUM-SNOW_120HR.gif'/>
</a>
</div>  

But it doesn't work. I have to do it in the CSS?

[Pedro]

Try to do everything on the css. But we are only handling with the little image because what your forum is doing, actually, is redirecting the frame to the original image.
So, you can upload a smaller image or I can create a page inside your forum with a smaller image in order to redirect the forum to it.

[Harvey]

Hey I noticed that the three links  (Topics View, Members, Options) under the image are not working when the image is in place.

They work on my phone but not on my computer.

Going to disable for now but can you check it out?

[Harvey]

I did a temporary work around by adding two line breaks underneath the forum description so that the image wasn't "covering" the  links.

When I inspect the element I see the the img space is set fairly large.

Can we adjust that? How?

[Harvey]

Never mind - I figured it out.

I had bottom padding in the CSS that was causing the problem.



Still using left side padding to center the image. Is that the correct way to do it?

[Pedro]

Where are you using padding? I just see margin.
Since we are using "position absolute", you can use it to position the image in the right place.
Is everything ok now?