Advertisement:

Author Topic: Ant's Mutant Curve  (Read 21563 times)

Offline Antechinus

  • SMF Friend
  • SMF Master
  • *
  • Posts: 25,668
  • Master of BBC Abuse
Ant's Mutant Curve
« on: February 26, 2020, 11:02:14 PM »
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.

That will do for now. I can add to the description later, when I get bored with answering the same questions. :)



26/02/2020 - New 1.0.3 zip uploaded, now with hardly any gremlins! Changelog also attached.
24/02/2020 - New 1.0.2 zip uploaded, now with fewer gremlins! Changelog also attached.
23/02/2020 - New 1.0.1 zip uploaded, hopefully sans gremlins.

Offline Antechinus

  • SMF Friend
  • SMF Master
  • *
  • Posts: 25,668
  • Master of BBC Abuse
Re: Ant's Mutant Curve
« Reply #1 on: February 26, 2020, 11:25:22 PM »
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.

Offline Sir Osis of Liver

  • SMF Super Hero
  • *******
  • Posts: 11,139
  • We were all equal in the end.
Re: Ant's Mutant Curve
« Reply #2 on: February 26, 2020, 11:37:22 PM »
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. :(
“The best laid schemes o' mice an' men / Gang aft a-gley.” - Robert Burns

Offline Antechinus

  • SMF Friend
  • SMF Master
  • *
  • Posts: 25,668
  • Master of BBC Abuse
Re: Ant's Mutant Curve
« Reply #3 on: February 26, 2020, 11:42:09 PM »
There are some weird reviews there, which don't seem to be related to anything actually in the theme. Hey ho.

Like this:

Quote
Now 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.

Offline Antechinus

  • SMF Friend
  • SMF Master
  • *
  • Posts: 25,668
  • Master of BBC Abuse
Re: Ant's Mutant Curve
« Reply #4 on: March 01, 2020, 05:33:48 AM »
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:

Quote
Note: 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.

Offline Rock Lee

  • Native Language Support Specialist
  • SMF Hero
  • *
  • Posts: 3,915
  • Gender: Male
  • Learning more every day!
    • BomberCode.Oficial on Facebook
    • RockLee-BC on GitHub
    • @Bomber_Code on Twitter
    • Bomber Code ~ La nueva era del conocimiento
Re: Ant's Mutant Curve
« Reply #5 on: March 01, 2020, 10:02:33 AM »
Oh it looks good, I'm going to prove how it is, good job!


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

Offline Antechinus

  • SMF Friend
  • SMF Master
  • *
  • Posts: 25,668
  • Master of BBC Abuse
Re: Ant's Mutant Curve
« Reply #6 on: March 05, 2020, 02:09:35 AM »
Ok, re this:

This throws an undefined index error for post_group -

PersonalMessage.template.php

Code: [Select]

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

Offline Sir Osis of Liver

  • SMF Super Hero
  • *******
  • Posts: 11,139
  • We were all equal in the end.
Re: Ant's Mutant Curve
« Reply #7 on: March 05, 2020, 04:13:00 PM »
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.
“The best laid schemes o' mice an' men / Gang aft a-gley.” - Robert Burns

Offline Antechinus

  • SMF Friend
  • SMF Master
  • *
  • Posts: 25,668
  • Master of BBC Abuse
Re: Ant's Mutant Curve
« Reply #8 on: March 05, 2020, 04:46:40 PM »
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?

Offline AirBourbon

  • Newbie
  • *
  • Posts: 7
Re: Ant's Mutant Curve
« Reply #9 on: March 29, 2020, 11:51:06 AM »
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)

Offline Antechinus

  • SMF Friend
  • SMF Master
  • *
  • Posts: 25,668
  • Master of BBC Abuse
Re: Ant's Mutant Curve
« Reply #10 on: March 29, 2020, 07:16:30 PM »
I'll sort out a solution for that later today. :)

Offline AirBourbon

  • Newbie
  • *
  • Posts: 7
Re: Ant's Mutant Curve
« Reply #11 on: March 30, 2020, 02:53:17 AM »
Thank you very much Antechinus !
You are the best. 8)

Have a great day ;)

Offline Antechinus

  • SMF Friend
  • SMF Master
  • *
  • Posts: 25,668
  • Master of BBC Abuse
Re: Ant's Mutant Curve
« Reply #12 on: March 30, 2020, 04:30:37 AM »
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);
}

Offline AirBourbon

  • Newbie
  • *
  • Posts: 7
Re: Ant's Mutant Curve
« Reply #13 on: March 30, 2020, 05:55:17 AM »
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

Offline Antechinus

  • SMF Friend
  • SMF Master
  • *
  • Posts: 25,668
  • Master of BBC Abuse
Re: Ant's Mutant Curve
« Reply #14 on: March 30, 2020, 06:04:37 AM »
Those are set in these blocks:

Code: [Select]
/* @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:

Code: [Select]
/* @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. ;)

Offline AirBourbon

  • Newbie
  • *
  • Posts: 7
Re: Ant's Mutant Curve
« Reply #15 on: March 30, 2020, 06:20:24 AM »
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!

Offline Antechinus

  • SMF Friend
  • SMF Master
  • *
  • Posts: 25,668
  • Master of BBC Abuse
Re: Ant's Mutant Curve
« Reply #16 on: March 30, 2020, 06:46:45 AM »
Quote
And 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.

Code: [Select]
.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:

Code: [Select]
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:

Code: [Select]
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 */
}
}

Offline AirBourbon

  • Newbie
  • *
  • Posts: 7
Re: Ant's Mutant Curve
« Reply #17 on: March 30, 2020, 07:56:32 AM »
Quote
And 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!

Offline Instand

  • Newbie
  • *
  • Posts: 2
Re: Ant's Mutant Curve
« Reply #18 on: March 31, 2020, 05:55:45 AM »
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.)

Offline Antechinus

  • SMF Friend
  • SMF Master
  • *
  • Posts: 25,668
  • Master of BBC Abuse
Re: Ant's Mutant Curve
« Reply #19 on: March 31, 2020, 07:31:38 AM »
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.