News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

[Preview] Syringa 2.1 SMF Theme

Started by TwitchisMental, February 13, 2022, 11:16:52 AM

Previous topic - Next topic

TwitchisMental

Orangey ain't the only theme that I am working on muwahahahaha. I am also remaking Syringa for SMF 2.1 :).  I actually started working on the remake for this theme back in RC3 and put it on the back burner for awhile lol.

Board Index -

You cannot view this attachment.

Message Index -

You cannot view this attachment.

TwitchisMental

After playing around with this theme again, I figured out why I put it on the back burner...

MOBILE HELL LMAO The logo freaks out depending on the screen resolution width; it will bump below the top bar.


You cannot view this attachment.

Antechinus

Set it to absolute positioned, and give the top bar a left padding to match the logo width.
That's one option. There are other options if you need them.

TwitchisMental

Quote from: Antechinus on February 13, 2022, 02:46:16 PMSet it to absolute positioned, and give the top bar a left padding to match the logo width.
That's one option. There are other options if you need them.
Well I went ahead and started rebuilding the header on a fresh 2.1 index.template.php and found the cause of the problem.
It seems to be the main menu.

When I just have the logo in the top bar, all is well. As soon as I add the main menu, the craziness begins haha.

I am thinking there is an easy solution with flex lol.

Screeny -

You cannot view this attachment.

Antechinus


TwitchisMental

I am getting closer lol...

It now stays within the topbar, but it still shrinks as screen resolution goes down blah lol. Pretty sure its something with the responsive.css now. XD

CSS -
.logoholder {
  padding: 0px 12px;
  display: flex;
  flex: 1 1 auto;
}
h1.forumtitle {
  font-size: 0em;
  font-family: "Tahoma", sans-serif;
  padding: 0px;
  font-weight: normal;
  margin: 0px;
}

Index Template Portion -
    <div id="header">
<div class="logoholder">
<h1 class="forumtitle">
<a href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? '<img src="'. $settings['images_url']. '/custom/logo.png" alt="' . $context['forum_name'] . '" title="' . $context['forum_name'] . '" />' : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name'] . '" title="' . $context['forum_name'] . '" />', '</a>
</h1>
  </div>';
  // Show the menu here, according to the menu sub template, followed by the navigation tree.
// Load mobile menu here
echo '
<a class="mobile_user_menu">
<span class="menu_icon"></span>
<span class="text_menu">', $txt['mobile_user_menu'], '</span>
</a>
<div id="main_menu">
<div id="mobile_user_menu" class="popup_container">
<div class="popup_window description">
<div class="popup_heading">', $txt['mobile_user_menu'], '
<a href="javascript:void(0);" class="main_icons hide_popup"></a>
</div>
', template_menu(), '
</div>
</div>
</div>
</div>';


Screeny -

You cannot view this attachment.

Antechinus

You have flex-shrink set to 1 on the logo whatsit. Try setting it to 0. You can also set a min-width on it.

TwitchisMental

Quote from: Antechinus on February 13, 2022, 03:54:05 PMYou have flex-shrink set to 1 on the logo whatsit. Try setting it to 0. You can also set a min-width on it.
Blah it is always something so simple . Thank you sir.

TwitchisMental

Alright I think I got that all worked out now haha.

You cannot view this attachment.

Antechinus


TwitchisMental

#10
Alright got the board index looking pretty good now :).

You cannot view this attachment.

TwitchisMental

Alright little by little this one is getting done.

Board Index -

You cannot view this attachment.

Message Index -

You cannot view this attachment.

Post -

You cannot view this attachment.

TwitchisMental

Welp this one is basically done and uploaded to the theme site.

Advertisement: