• Welcome to Simple Machines Community Forum. Please login or sign up.
September 19, 2021, 06:37:42 AM

News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord


Adding an extra image in the forumtitle section?

Started by Grammy, May 17, 2021, 03:33:01 PM

Previous topic - Next topic

Grammy

Y'all are way too quiet over here today.  I've come to pester you!   :D

I'm playing with my test site, 2.1RC3 (Github download):

http://sitedabble.com/kick

See that little girl, over to the right?  (I'll attach a screenshot just to make sure you see how I'm seeing her on my browser.)

Right now, all I've done is mess with the Index.template.php so this:
echo '
<div id="header">
<h1 class="forumtitle">
<a id="top" href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? $context['forum_name_html_safe'] : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name_html_safe'] . '">', '</a><img src="http://sitedabble.com/kick/Themes/default/images/kicker.png" style="width: 178px; height: 200px; position: absolute; margin-right: 30px; padding-bottom: 15px;" />
</h1>';


Which is fine, I like how she landed, half above the wrapper, half below (even without a z-index). When I grab the corner of my browser and shrink it, she seems to move inward with everything else.  But of course, when I look at it on my iPhone she hops down and lands somewhere else. (2nd screenshot)  Is there any help for that or would I need to do some sort of media query to get her to behave?

Or if I'm going to try this, should I position the image within the wrapper, instead of the forumtitle div?  (Bearing in mind that, according to the "kickerShot.png" screenshot, that is how I'd ultimately like the image to be positioned.  (I've quit calling it "her", I'm probably weirding you all out.)   :D 

Kindred

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Grammy

Quote from: Kindred on May 17, 2021, 04:50:39 PM
Interesting... on my Samsung I see this

Wow...  if it would look like that on my iPhone 11, I'd leave it alone, that would be fine!  Here it is in landscape (screenshot).

That's also okay.  Well, I know what I've done is all "duct-tape" (my m.o.) but other than having the image scale with the device, I'm not sure how to sort it.  (Media queries hate me.   :)

Edit to add:  I did just try max-width: 100% but that didn't change anything.

Kindred

ok...


1- give the image an ID (e.g. id="kickergirl")
2- Move all that inline css to the actual css


#kickergirl {
width: 178px;
height: 200px;
position: absolute;
margin-right: 30px;
padding-bottom: 15px;
}


3- add something like


@media only screen and (max-width: 600px) {
    #kickergirl {
        display: none;
    }
}


this will HIDE the image once you reach a 600 screen width or less
Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Grammy

Well....   it moves her both on the desktop and iPhone to within the forumtitle div (so I may not have that cool overlap I had before on the desktop, but at least she's not down in the log in area on the phone).

(screenshots attached).

I'ma get the sledge hammer!   :D

Grammy

Oh, wait.....   no, that did just what you intended!  She's where she's meant to be on the desktop and disappears on the mobile.   (I had to go to my phone settings and purge Safari and reload).

I think that's got it!   :)

Thanks, again, Kindred!   

Advertisement: