Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Topic started by: Grammy on May 17, 2021, 03:33:01 PM

Title: Adding an extra image in the forumtitle section?
Post by: Grammy 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 (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 
Title: Re: Adding an extra image in the forumtitle section?
Post by: Kindred on May 17, 2021, 04:50:39 PM
Interesting... on my Samsung I see this
Title: Re: Adding an extra image in the forumtitle section?
Post by: Grammy on May 17, 2021, 04:57:09 PM
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.
Title: Re: Adding an extra image in the forumtitle section?
Post by: Kindred 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


#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
Title: Re: Adding an extra image in the forumtitle section?
Post by: Grammy 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
Title: Re: Adding an extra image in the forumtitle section?
Post by: Grammy 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!