News:

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

Main Menu

Ant's Mutant Curve

Started by Antechinus, February 26, 2020, 11:02:14 PM

Previous topic - Next topic

Antechinus

Refined it a bit. I think this works better.

Antechinus

Event better. I Edited the ul in GenericMenu.template.php so that it assigns a extra class to the cat and title bars, depending on which  section they are the header for:

foreach ($menu_context['sections'] as $section)
{
if ($firstSection)
{
echo '
<li class="cat_bar ', $section['id'], '">
<h4 class="catbg">
', $section['title'],'
</h4>
</li>';
}
else
{
echo '
<li class="title_bar ', $section['id'], '">
<h4 class="titlebg">
', $section['title'], '
</h4>
</li>';
}


This gives handy class names that don't need translating (.info, profile_action, edit_profile) and can be used for display and positioning. The ul is also now not closed in GenericMenu, and instead is closed after the member summary (ie: before the .settings dl's at the bottom).

This means every piece in the menu, member avatar, send pm, add buddies, etc, etc is now all in the same ul and can all be placed anywhere on the grid. The cat_bar that says "Profile Info" is the bog standard sidebar header bar, re-positioned to suit this presentation.

Combine that with a few tricks for ordering individual buttons, and it all stays quite tidy under any combination of member group or screen width. Currently has basic Curve-compatible colouring while I sorted the mesh out, but can be eye-candied any way that suits. :)

Antechinus

Oh, the other thing I was looking at yesterday was improving an idea for custom icons by board id, while maintaining good a11y and best performance. This had been roughed out in css/funny_bizness.css, which is a stashed file in this theme, that keeps track of several things and includes some ideas for various custom tweaks.

I came up with this, which is so clean that I think I'll make it the default. It uses minimal code for the standard icons, and allows handling custom icons by board and/or icons by variant with no extra changes to the PHP or HTML. The whole lot can be managed in the CSS, using any arrangement of files and folders you prefer.

Code (BoardIndex.template.php) Select
<?php

foreach (
$category['boards'] as $board)
{
echo '
<tr id="board_'
$board['id'], '" class="windowbg2">
<td class="icon windowbg">'
;

// If the board is new, or children are new, show a linked indicator.
if ($context['user']['is_logged'] && ($board['new'] || $board['children_new']))
echo '
<a href="'
$scripturl '?action=unread;board=' $board['id'] . '.0;children'), '" class="'$board['new'] ? 'board' 'child''_new" title="'$txt['new_posts'], '">
'
$txt['new_posts'], '
</a>
</td>'
;

// Or is it a redirection board? Or a board with no new posts?
else
echo '
<span class="'
$board['is_redirect'] ? 'board_redirect">'$txt['redirect_board'] : 'board_old">'$txt['old_posts'], '</span>
</td>'
;

// On to next td, etc....

}

?>


Code (index.css and/or _variant.css) Select
/*
Scene 1 - Take 2: The cleanest way is to use a CSS background sprite,
with images double-sized for HD screens (384 x 96) and the parent anchor set as:
*/
.icon > a, .icon > span {
display: block;
height: 48px;
width: 48px;
margin: 0 auto;
overflow: hidden;
background-image: url(../images/relevant_path/sprite.png);
background-repeat: no-repeat;
background-size: auto 48px;
white-space: nowrap;
text-indent: 100%;
}
/*
Title attribute could stay for sighted users (but probably unnecessary).
Alt attribute deprecated, in favour of language string as anchor content.
Anchor class and background-position set according to desired icon state:
*/
.board_new {
background-position: 0 0;
}
.child_new {
background-position: 48px 0;
}
.board_redirect {
background-position: 96px 0;
}
.board_old {
background-position: 144px 0;
}
/*
Then custom icons by board and/or variant can be handled any way you like...
*/


Since this theme already assigns body tag ID by variant, it would be possible to include code for all variant icons inside index.css. That might be useful if doing a basic multicolour version, which only changes a few colours and doesn't really warrant a bunch of extra files. Ditto for custom icons by board. They could simply be:

#board_1 .icon > a, #board_1  .icon > span {
background-image: url(../images/relevant_path/board_1_sprite.png);
}
#board_2 .icon > a ,#board_2  .icon > span {
background-image: url(../images/relevant_path/board_2_sprite.png);
}
#board_3 .icon > a, #board_3  .icon > span {
background-image: url(../images/relevant_path/board_3_sprite.png);
}
#board_4 .icon > a, #board_4  .icon > span {
background-image: url(../images/relevant_path/board_4_sprite.png);
}


With no other code changes required.

Kindred

Hey Ant!

I just downloaded and installed the one on the theme site here, today...


Logged in, it works like a charm.

Not logged in, it looks different and I get no menu....
https://test.turtleshellprod.com/index.php

I suspect there's something not closed properly in the header/menu....
Слaва
Украинi

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."

Antechinus

ROFL. :D OK, I'd better do that 1.06 I've been meaning to do.
Shows how much attention people pay to these things. It's been up for yonks and nobody mentioned it before.

Temporary fix:

Code (Find) Select
<input type="submit" value="', $txt['login'], '" class="button_submit"
', ($modSettings['registration_method'] != 3) ? '<div class="info">'. $txt['welcome_guest']. '</div>' : '<br />';


Code (Replace) Select
<input type="submit" value="', $txt['login'], '" class="button_submit" />
', ($modSettings['registration_method'] != 3) ? '<div class="info">'. $txt['welcome_guest']. '</div>' : '<br />';

Antechinus

Ok, sorted. New zip is up.

Kindred

:D


All fixed up now and a nice demo of your theme
Слaва
Украинi

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."

pepf

Not sure if I should post this elsewhere or if it is right here, it is related to this mod... This does not happen with the standard curve version.

Installed version 1.0.5 on 2.0.17 and localized it to Traditional Chinese UTF-8,  for use in Taiwan. Now testing. 

Works fine, however I discovered a minor problem.
If a post is modified by using the 'Edit' button, as soon as the modification is saved the whole post, including title and other responses, are garbled. Other topics are not affected.
If the 'Full Page' option is used instead for the editing, no garbling occurs when saving.

Is it possible to either resolve the Edit button problem or have the 'Full Page' edit method as the only way to do it?

The button text is not localized too, not sure if this is related to the problem. Is there a way to change this? Does it concern the language file?

TIA, Peter




Antechinus

#88
Interesting. I'll play with it on a test site and see if I can spot anything (no guarantees). Anyway yes, you can disable the quick edit if you want to. Someone else wanted to do the same thing. Instructions are in this post and the following post. If you run into problems, feel free to get back to me.

Re the language file: make a duplicate of ThemeStrings.english.php (in the languages folder) and rename it to ThemeStrings.chinese_traditional-utf8.php. You will then be able to edit any of the custom strings to whatever you want. Be sure to save it as utf-8 encoding in your code editor.

Incidentally, which version of PHP are you running? May not matter, but I might as well test on the same version if I can.

pepf

Thanks for the instructions. I will try that.
The PHP version is 7.2

If you need some Chinese words for testing, just tell me. BTW, the garbling is alphabetic, not Chinese garbling. That looks different.

pepf

My apology, here is another question in the matter. I just removed the text for "Edit" so that users cannot use it. Changed the text in "More" too but cannot find the term for "Split topic". Neither the English nor the Chinese is in that file. May I ask where that is hidden? I would like to change it to a more common term.

Antechinus

That's a standard SMF language string. It will be in default/languages/index.english.php (or whatever language name is in use).

pepf


rcane

I installed (successfully it appears) Ant's Mutant Curve theme to make things responsive as most of the users will be on a mobile device.

The LOGO url is there, and if I load the page there is no logo (as it was on core/curve/etc). 

If inspect where it should be (which just has the forum name) I can see the full url that goes to my /newLogo.png file. 

Is there a place to find the size limitations on the logo?  I'm guessing that's it to make it compatible with mobile devices.



Illori

you would be best to post in the support topic for that theme so that the author has a better chance at seeing your question.

Sir Osis of Liver

Don't believe there's any size limit on logo.  This is a 14.4 mb png.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Antechinus

Can someone merge this into the theme's support thread?

Short answer to the OP's question is that there are several possibilities for defining logo size, but by default it will just use whatever the native size of the image is. If this is greater than the forum wrapper width, the image will automatically be scaled to fit.

If you want some other behaviour it can be done, but I'd need to know exactly what you want to do.

Herman's Mixen

Graphics wise there is no limitation... maybe you want altered the code and goes into that dirrection so hang over into the support threat wich can be found... look the post before me :P
Met vriendelijke groet, The Burglar!

 House Mixes | Mixcloud | Any Intelligent fool can make things bigger, more complex, and more violent.
It takes a touch of genius - and a lot of courage - to move in the opposite direction. - Albert Einstein

Former Godfather of our dutch community ;)

shadav

Quote from: Antechinus on January 23, 2021, 01:28:28 AM
Can someone merge this into the theme's support thread?

Short answer to the OP's question is that there are several possibilities for defining logo size, but by default it will just use whatever the native size of the image is. If this is greater than the forum wrapper width, the image will automatically be scaled to fit.

If you want some other behaviour it can be done, but I'd need to know exactly what you want to do.
I was going to but I don't think that I can since I don't have permissions to that board....

Illori

Quote from: Antechinus on January 23, 2021, 01:28:28 AM
Can someone merge this into the theme's support thread?

we usually dont merge outside topics into a support thread as sometimes it will mix up the replies depending on if there are any made while this topic existed.

Advertisement: