Advertisement:

Author Topic: Adding an extra image in the forumtitle section?  (Read 846 times)

Offline Grammy

  • Full Member
  • ***
  • Posts: 564
  • Gender: Female
  • Tire Kicker
Adding an extra image in the forumtitle section?
« on: May 17, 2021, 03:33:01 PM »
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:
Code: [Select]
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 

Online Kindred

  • The Mean One
  • Lead Support Specialist
  • SMF Legend
  • *
  • Posts: 60,435
  • Gender: Male
    • Kindred-999 on GitHub
Re: Adding an extra image in the forumtitle section?
« Reply #1 on: May 17, 2021, 04:50:39 PM »
Interesting... on my Samsung I see this
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."

Offline Grammy

  • Full Member
  • ***
  • Posts: 564
  • Gender: Female
  • Tire Kicker
Re: Adding an extra image in the forumtitle section?
« Reply #2 on: May 17, 2021, 04:57:09 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.

Online Kindred

  • The Mean One
  • Lead Support Specialist
  • SMF Legend
  • *
  • Posts: 60,435
  • Gender: Male
    • Kindred-999 on GitHub
Re: Adding an extra image in the forumtitle section?
« Reply #3 on: May 17, 2021, 05:15:56 PM »
ok...


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

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

3- add something like

Code: [Select]
@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."

Offline Grammy

  • Full Member
  • ***
  • Posts: 564
  • Gender: Female
  • Tire Kicker
Re: Adding an extra image in the forumtitle section?
« Reply #4 on: May 17, 2021, 05:33:50 PM »
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

Offline Grammy

  • Full Member
  • ***
  • Posts: 564
  • Gender: Female
  • Tire Kicker
Re: Adding an extra image in the forumtitle section?
« Reply #5 on: May 17, 2021, 05:45:41 PM »
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!