Customizing SMF > Graphics and Templates

Adding an extra image in the forumtitle section?

(1/2) > >>

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):

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: --- 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="" style="width: 178px; height: 200px; position: absolute; margin-right: 30px; padding-bottom: 15px;" />
--- End code ---

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 

Interesting... on my Samsung I see this


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

--- End quote ---

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.


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

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

--- End code ---

3- add something like

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

--- End code ---

this will HIDE the image once you reach a 600 screen width or less

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


[0] Message Index

[#] Next page

Go to full version