Ant's Mutant Curve

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

Previous topic - Next topic

Antechinus

Link to the theme
This is the monster that evolved from an apparently simple question:
   
Has anyone improved /main_block.png to have transparent rounded edges?

The short version is that it's Curve, but substantially revamped to be responsive everywhere, without relying on any frameworks or libraries that SMF 2.0.x does not call by default.

Like the original Curve it comes with full support for RTL languages. It also has some custom functionality, and minimal use of images.

Do note that the reworking required for this result may mean that not all mods will install without manual editing.



Note: The 1.0.7 version of this theme implements changes that are necessary to support SMF 2.0.18.

If you are running an earlier version of this theme with SMF 2.0.18, it is recommended that you update the theme to version 1.0.7

If anyone cannot upgrade for some reason (customisations, etc) and would like me to write a 1.0.6 to 1.0.7 patch for them, that can be done.

The edits required for supporting 2.0.18 are not difficult, and only affect script.js and Search.template.php. They are highly unlikely to affect any customisations that anyone might have done.

If you have not modified either of these files, you could implement the changes by simply copying the 1.0.7 versions to your earlier version of the theme.



04/02/2021 - New 1.0.7 zip uploaded. Implements required changes for 2.0.18.
30/10/2020 - New 1.0.6 zip uploaded. Fix for bug with login button.
01/03/2020 - New 1.0.5 zip uploaded. Fix for minor 2.0.x bug (only relevant if registration is disabled).
27/02/2020 - New 1.0.4 zip uploaded. Gremlins critically endangered. WWF Concerned.
26/02/2020 - New 1.0.3 zip uploaded, now with hardly any gremlins!
24/02/2020 - New 1.0.2 zip uploaded, now with fewer gremlins!
23/02/2020 - New 1.0.1 zip uploaded, hopefully sans gremlins.

Antechinus

All righty then. Now I can go and sort the 1.04 version. :D
Which is ready to rumble, and just needs to be sorted out and zipped for upload.

Sir Osis of Liver

Running in production here, earlier version with some modifications.  Don't use a phone, but looked at in in my e-reader (7" tab), mobile view is nice.  Getting mixed reviews here.  You can't please everyone. :(
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Antechinus

There are some weird reviews there, which don't seem to be related to anything actually in the theme. Hey ho.

Like this:

QuoteNow all threads are stacked partially on top of each other.

I can't see who the last poster was.

I can't go directly to the last post but have to page through.

1/ All the threads have always been stacked on top of each other.

2/ It has the standard last poster links on the board index, message index and unread pages.

3/ It has the standard last post links the board index, message index and unread pages.

Beats me what this person is going on about.

Antechinus

Have just uploaded a 1.0.5. Don't panic. If you are already using 1.0.4 you can keep using it.

Quote from the theme download page:

QuoteNote: The following information is provided for anyone who is already using 1.0.4.

The only difference between 1.0.4 and 1.0.5 is that the latter hides the registration button and greeting if registration is disabled.
This fixes a minor bug with the default code in 2.0.x (default code will show register button and register link even if registration is disabled).

If your forum does not have registration disabled, 1.0.4 will be just as good as 1.0.5.
If your forum does have registration disabled, 1.0.5 will prevent some error messages being shown to guests, and in the error log.

If anyone needs a 1.0.4 to 1.0.5 patch, that can be arranged.

-Rock Lee-

Oh it looks good, I'm going to prove how it is, good job!


Regards!
¡Regresando como cual Fenix! ~ Bomber Code
Ayudas - Aportes - Tutoriales - Y mucho mas!!!

Antechinus

Ok, re this:

Quote from: Sir Osis of Liver on March 04, 2020, 09:14:29 PM
This throws an undefined index error for post_group -

PersonalMessage.template.php



// Show the member's avatar?
echo '
<a href="', $scripturl, '?action=profile;u=', $message['member']['id'], '" class="poster_avatar">';

if (!empty($settings['show_user_images']) && empty($options['show_no_avatars']) && !empty($message['member']['avatar']['image']))
{
echo '
', $message['member']['avatar']['image'], '</a>';
}
elseif (!empty($message['member']['group']))
{
echo '
<span class="no_avatar ', $message['member']['group'], '">', (substr($message['member']['name'], 0, 1)), '</span></a>';
}
elseif ($message['member']['post_group'] != '')
{
echo '
<span class="no_avatar ', $message['member']['post_group'], '">', (substr($message['member']['name'], 0, 1)), '</span></a>';
}
else
{
echo '
<span class="no_avatar">', (substr($message['member']['name'], 0, 1)), '</span></a>';
}




Can't reproduce an error there. All seems ok, as far as I can tell at the moment.  $message['member']['post_group'] is bog standard 2.0.x code that is used in the default template.

Obvious questions are:

1/ Which version of this beast are you using?
2/ Can you give any more information on this error? What you did to get it. Exact message. Etc.

Sir Osis of Liver

It's running here in 2.0.17, I think it's the most recent theme d/l.  Fudged it out so no longer getting the error, believe it was caused by pm post.  I'll unfudge it and post the error when it happens.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Antechinus

That's one of the old versions from before it was approved (I can tell by the first bits of markup) but I checked the changelog, and there haven't been any changes to that template since then anyway.

What's pm post? Is that a mod of some sort?

AirBourbon

Hi there,

I just installed your new Theme on my SMF forum 2.0.17.
Everything works well except something with the "New" topic icon.
It's showing on top of the topic's subject.
I would like to know how to align this icon, ideally to the left just like on this post : https://www.simplemachines.org/community/index.php?topic=545837.0

Right now it's showing like this :


Tried everything... couldn't work it out.

Thanks !

Regards,
8)

Antechinus

I'll sort out a solution for that later today. :)

AirBourbon

Thank you very much Antechinus !
You are the best. 8)

Have a great day ;)

Antechinus

Ok, easy when you know what you're looking for. :)

TBH I should have though of this before. I did test with German, on the theory that Germans have really long words for everything, so if it fits in German it's probably bulletproof. :D

On the other hand, as a fan of Art Nouveau from way back I was well aware of the French word for "new", so total Homer moment there.

If you want them like the screenshot you linked to...

Code (Find) Select
.subject .new_posts:link, .subject .new_posts:visited {
position: absolute;
top: 2px;
left: -47px;
padding: 0 9px;
font-size: 1rem;
border-radius: 0 8px;
box-shadow: 1px 2px #000a;


Code (Replace) Select
.subject .new_posts:link, .subject .new_posts:visited {
position: relative;
top: -6px;
padding: 0 9px;
font-size: 1rem;
border-radius: 2px;
box-shadow: 1px 2px 0 rgba(0,0,0,.6);
}


Obviously you can weak this to suit yourself, but I thought the smaller border radius looked better with this layout. Also note that I'm testing this on desktop, and your shot appears to be taken on mobile, so the top positioning might need adjustment.

Anyway, if anyone else is using French (since there are millions of people who do and all that) and they want the "Nouveau" thingies where they were supposed to be if I hadn't forgotten about French, then...

Code (Find) Select
.subject .new_posts:link, .subject .new_posts:visited {
position: absolute;
top: 2px;
left: -47px;
padding: 0 9px;
font-size: 1rem;
border-radius: 0 8px;
box-shadow: 1px 2px #000a;


Code (Replace) Select
.subject .new_posts:link, .subject .new_posts:visited {
position: absolute;
top: 2px;
right: calc(100% + 3px);
padding: 0 9px;
font-size: 1rem;
border-radius: 0 8px;
box-shadow: 1px 2px 0 rgba(0,0,0,.6);
}

AirBourbon

Aren't you the best? ;D
It works like a charm, thank you very much!

By the way; is there any way I could remove the small "underline" (grey) below pictures posted on my forum?
I didn't find any way for that in the index.css

Thanks again!

Regards

Antechinus

Those are set in these blocks:

/* @WIP: Styling for BBC tags */
div.content p a:link, div.content p a:visited,
#helpmain a:link, #helpmain a:visited,
.bbc_link:link, .bbc_link:visited {
text-decoration: none;
box-shadow: inset 0 -1px 0 #999;
}
.content p a:hover, .content p a:focus,
#helpmain a:hover, #helpmain a:focus,
.bbc_link:hover, .bbc_link:focus {
box-shadow: inset 0 -2px 0;
}


IOW, it's using a box-shadow rather than text-decoration. The reason being that I find the default text-decoration: underline; makes text difficult to read (it cuts through things, and looks cluttered).

However, I just found out that there is now good browser support for text-underline-position: under; which should do the same thing but, since it's a text attribute, should not apply to linked images. So I'll try that out and see how it goes. Off the top of my head, this could be the go:

/* @WIP: Styling for BBC tags */
div.content p a:link, div.content p a:visited,
#helpmain a:link, #helpmain a:visited,
.bbc_link:link, .bbc_link:visited {
text-decoration: underline #999;
text-underline-position: under;
}
.content p a:hover, .content p a:focus,
#helpmain a:hover, #helpmain a:focus,
.bbc_link:hover, .bbc_link:focus {
text-decoration: underline #999 2px;
}


Which I'll test later. Too lazy at the moment. ;)

AirBourbon

Just wonderful !
Works perfectly. ;D

And the very last question: which font-size should I change if I just want to reduce the font size inside my post? (and nothing else).

Thanks again!

Antechinus

QuoteAnd the very last question...

I don't believe you. :D

Anyway, posts just inherit the standard body text size. There's no specific code for them. However, you can add some yourself if you want to.

.post {
font-size: ****;
}


You might want to tweak line-height there too. Just be aware that there are different sizes set for hd/mobile displays and standard desktop monitors, with the standard monitors getting 1.4rem due to their generally bigger pixel size, and the mobiles getting 1.6rem to compensate for tiny pixels. This seems to suit most people, but if you want to change things:

html {
background: #e9eef2;
/* Reset to 10px base for easy font sizing. */
font-size: 62.5%;
}
/* Set Retina font-size to browser default. */
@media screen and (min-resolution: 160dpi) {
html {
font-size: 71.43%;
}
}
@supports (-webkit-overflow-scrolling: touch) {
html {
font-size: 71.43%;
}
}


The first (62.5%) handles standard monitors, with the media queries handling the HD stuff. So play with it all you like, but keep an eye on where you're up to and check on desktop and mobile if you can. For example, if you wanted smaller text only in posts, and only on mobile, you could use:

html {
background: #e9eef2;
/* Reset to 10px base for easy font sizing. */
font-size: 62.5%;
}
/* Set Retina font-size to browser default. */
@media screen and (min-resolution: 160dpi) {
html {
font-size: 71.43%;
}
.post {
font-size: 67%; /* As an example */
}
}
@supports (-webkit-overflow-scrolling: touch) {
html {
font-size: 71.43%;
}
.post {
font-size: 67%; /* As an example */
}
}

AirBourbon

Quote from: Antechinus on March 30, 2020, 06:46:45 AM
QuoteAnd the very last question...

I don't believe you. :D

You shouldn't ;D.
Wonderful, thank you so much for your support. Everything's perfect now!

Instand

Thank you for this beatiful theme "Ant's Mutant Curve". I use it since a few days and it works fine. However: There are no searchengine-friendly URLs. Its an apache server and the option for searchengine-friendly URLs is tickmarked in the General section. You can see it here: hxxp:www.camcorder-reparatur.de/forum/ [nonactive] (I hope it is okay to post the URL here.)

Antechinus

That's something you'll have to take up with your host, or with the SMF team. I didn't touch any code related to that.

Although I do vaguely recall some team members saying that option was outdated, and should probably be removed. But its not something I've ever bothered using, so I can't recall all the details.

Advertisement: