Has anyone improved /main_block.png to have transparent rounded edges?

Started by Biology Forums, August 30, 2019, 11:35:58 AM

Previous topic - Next topic

Biology Forums

Quote from: Arantor on September 26, 2019, 11:41:56 AM
The percentages of stats aren't wrong, you're reading them wrong.

Your posts account for 100% of the activity in the child board test, 79% of the activity in the other board etc.

Makes more sense.

@Antechinus -- without changing the code, I think that's the most that can achieved with CSS alone in this profile page.



Bloc

Careful now..you are now treading on dangerous grounds: changing actual templates :D That threshold was oh so easy to cross over...never looked back.

Antechinus

I've already told people I've changed a dozen or so of the things. They've even uploaded them to their test sites for testing. Beats me why anyone thought I wasn't mutating templates. The mind boggles. :D

Just hacked some more too. Display.template.php wasn't calling the same bar logic as Stats.template.php, with the result that it didn't work as well. Instead of having the logic in the template some clever bugger had locked it in Sources, and got it wrong. :P So I ditched the call for that and threw in a modification of the Stats logic. Works a treat now.

And, I've just found out there's bug in Poll.template.php. Meh. Bugz. :P

The Post.template.php fieldsets scale nicely for screen size. The Edit Poll section from Poll.template.php doesn't. Why not? Different markup innit. Same form ID. Same div ID. Different arrangement though.

Poll.template.php calls the #postmodify form inside the #edit_poll div, and it's screwed. Post.template.php calls the #edit_poll div inside the form and it works. And, the same form id has .flow_hidden on Post.template.php but not on Poll.Effing.template.poxsnotty.php. So guess what I'm going to do. :D

Antechinus

Ok, just for the heck of it: one responsive error log. Didn't take long, and needs hardly any CSS. No tables. Did it as a list. The old table was a pig's breakfast anyway.

Bloc

Seems logical :) I am also looking at this table with a more sober mind, its after just a bunch of log items and could even hide things until you really need to see them(click-to-see).

Antechinus

I couldn't be bothered getting that tricky. It's just an error log. One thing I think I will do is move the checkboxes to the right. Was idly thinking about it, and in the rest of the gui such checkboxes are always at the right. Offhand the error log is the only one I can think of that has them at the left, so changing it to be consistent with the rest of the gui seems to make sense. And I may eye candy it a little bit more, but this is only meant to be a basic Curve clean-up y'know. :D

I was also thinking about the "ZOMG don't hack the templates" crowd. Well apart from anything else, the way we made 2.0.x in the first place was by hacking templates. :D And it leads to the next obvious thought: that while templates are generally gnarly for beginners, more experienced people can casually re-write them over a coffee or two just for amusement, and it can save on stupidly convoluted CSS at times.

Markup could probably be a bit better. I may revamp that slightly. Currently done like this:

function template_error_log()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

echo '
<form action="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? ';desc' : '', ';start=', $context['start'], $context['has_filter'] ? $context['filter']['href'] : '', '" method="post" accept-charset="', $context['character_set'], '" onsubmit="if (lastClicked == \'remove_all\' &amp;&amp; !confirm(\'', $txt['sure_about_errorlog_remove'], '\')) return false; else return true;">
<script type="text/javascript"><!-- // --><![CDATA[
var lastClicked = "";
// ]]></script>
<div class="cat_bar">
<h3 class="catbg">
<a href="', $scripturl, '?action=helpadmin;help=error_log" onclick="return reqWin(this.href);" class="help"><img src="', $settings['images_url'], '/helptopics.gif" alt="', $txt['help'], '" /></a> ', $txt['errlog'], '
</h3>
</div>
<div class="plainbox">
', $txt['apply_filter_of_type'], ':';

$error_types = array();
foreach ($context['error_types'] as $type => $details)
$error_types[] = ($details['is_selected'] ? '<img src="' . $settings['images_url'] . '/selected.gif" alt="" /> ' : '') . '<a href="' . $details['url'] . '" ' . ($details['is_selected'] ? 'style="font-weight: bold;"' : '') . ' title="' . $details['description'] . '">' . $details['label'] . '</a>';

echo '
', implode('&nbsp;|&nbsp;', $error_types), '
</div>
<div>
', $txt['pages'], ': ', $context['page_index'], '
</div>';

if ($context['has_filter'])
echo '
<div class="plainbox">
<strong>', $txt['applying_filter'], ':</strong> ', $context['filter']['entity'], ' ', $context['filter']['value']['html'], ' (<a href="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? ';desc' : '', '">', $txt['clear_filter'], '</a>)
</div>';

if (!empty($context['errors']))
echo '
<div class="plainbox">
<div class="floatright"><input type="submit" value="', $txt['remove_selection'], '" onclick="lastClicked = \'remove_selection\';" class="button_submit" /> <input type="submit" name="delall" value="', $context['has_filter'] ? $txt['remove_filtered_results'] : $txt['remove_all'], '" onclick="lastClicked = \'remove_all\';" class="button_submit" /></div>
<label for="check_all1"><input type="checkbox" id="check_all1" onclick="invertAll(this, this.form, \'delete[]\'); this.form.check_all2.checked = this.checked;" class="input_check" /><strong>', $txt['check_all'], '</strong></label>
</div>';
echo '
<ul id="error_log">';
foreach ($context['errors'] as $error)
{
echo '
<li class="windowbg', $error['alternate'] ? '2' : '', '">
<div class="checkbox_column">
<input type="checkbox" name="delete[]" value="', $error['id'], '" class="input_check" />
</div>
<ul>
<li>
<span>
<a href="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? ';desc' : '', ';filter=id_member;value=', $error['member']['id'], '" title="', $txt['apply_filter'], ': ', $txt['filter_only_member'], '"><img src="', $settings['images_url'], '/filter.gif" alt="', $txt['apply_filter'], ': ', $txt['filter_only_member'], '" /></a>
<strong>', $error['member']['link'], '</strong>
</span>
<span>
<a href="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? ';desc' : '', ';filter=ip;value=', $error['member']['ip'], '" title="', $txt['apply_filter'], ': ', $txt['filter_only_ip'], '"><img src="', $settings['images_url'], '/filter.gif" alt="', $txt['apply_filter'], ': ', $txt['filter_only_ip'], '" /></a>
<strong><a href="', $scripturl, '?action=trackip;searchip=', $error['member']['ip'], '">', $error['member']['ip'], '</a></strong>&nbsp;&nbsp;
</span>
</li>
<li>
<span>
<a href="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? '' : ';desc', $context['has_filter'] ? $context['filter']['href'] : '', '" title="', $txt['reverse_direction'], '"><img src="', $settings['images_url'], '/sort_', $context['sort_direction'], '.gif" alt="', $txt['reverse_direction'], '" /></a>
', $error['time'], '
</span>';

if ($error['member']['session'] != '')
echo '
<span>
<a href="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? ';desc' : '', ';filter=session;value=', $error['member']['session'], '" title="', $txt['apply_filter'], ': ', $txt['filter_only_session'], '"><img src="', $settings['images_url'], '/filter.gif" alt="', $txt['apply_filter'], ': ', $txt['filter_only_session'], '" /></a>
', $error['member']['session'], '
</span>';

echo '
</li>
<li>
<span>
<a href="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? ';desc' : '', ';filter=error_type;value=', $error['error_type']['type'], '" title="', $txt['apply_filter'], ': ', $txt['filter_only_type'], '"><img src="', $settings['images_url'], '/filter.gif" alt="', $txt['apply_filter'], ': ', $txt['filter_only_type'], '" /></a>
', $txt['error_type'], ': ', $error['error_type']['name'], '
</span>

<span>
<a href="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? ';desc' : '', ';filter=message;value=', $error['message']['href'], '" title="', $txt['apply_filter'], ': ', $txt['filter_only_message'], '"><img src="', $settings['images_url'], '/filter.gif" alt="', $txt['apply_filter'], ': ', $txt['filter_only_message'], '" /></a>
', $error['message']['html'], '
</span>
</li>
<li>
<div>
<a href="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? ';desc' : '', ';filter=url;value=', $error['url']['href'], '" title="', $txt['apply_filter'], ': ', $txt['filter_only_url'], '"><img src="', $settings['images_url'], '/filter.gif" alt="', $txt['apply_filter'], ': ', $txt['filter_only_url'], '" /></a>
', $error['url']['html'], '</a>
</div>';


if (!empty($error['file']))
echo '
<div>
<a href="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? ';desc' : '', ';filter=file;value=', $error['file']['search'], '" title="', $txt['apply_filter'], ': ', $txt['filter_only_file'], '"><img src="', $settings['images_url'], '/filter.gif" alt="', $txt['apply_filter'], ': ', $txt['filter_only_file'], '" /></a>
', $txt['file'], ': ', $error['file']['link'], '&nbsp;-&nbsp;', $txt['line'], ': ', $error['file']['line'], '
</div>';
echo '
</li>';
echo '
</ul>
</li>';
}

echo '
</ul>';

if (!empty($context['errors']))
echo '
<div class="plainbox">
<div class="floatright"><input type="submit" value="', $txt['remove_selection'], '" onclick="lastClicked = \'remove_selection\';" class="button_submit" /> <input type="submit" name="delall" value="', $context['has_filter'] ? $txt['remove_filtered_results'] : $txt['remove_all'], '" onclick="lastClicked = \'remove_all\';" class="button_submit" /></div>
&nbsp;<label for="check_all2"><input type="checkbox" id="check_all2" onclick="invertAll(this, this.form, \'delete[]\'); this.form.check_all1.checked = this.checked;" class="input_check" /><strong>', $txt['check_all'], '</strong></label>
</div>';
else
echo '
<div class="plainbox">
', $txt['errlog_no_entries'], '
</div>';

echo '
<div>
', $txt['pages'], ': ', $context['page_index'], '
</div>';

if ($context['sort_direction'] == 'down')
echo '
<input type="hidden" name="desc" value="1" />';
echo '
<input type="hidden" name="', $context['session_var'], '" value="', $context['session_id'], '" />
</form>';
}


With CSS:

/* Styles for the error log.
------------------------------------------------- */
.subaction_errorlog .plainbox {
margin: 2px 0;
padding: 4px 7px;
}
#error_log>li {
position: relative;
margin: 2px 0;
border: 1px solid #ccc;
}
#error_log>li:nth-child(2n) {
background: #f5f9fd;
}
#error_log .checkbox_column {
width: 34px;
padding-top: 2em;
text-align: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
border-right: 1px solid #ccc;
}
#error_log ul {
margin-left: 34px;
}
#error_log ul li {
line-height: 2.4rem;
padding: 4px;
overflow: hidden;
border-top: 1px dashed #ccc;
}
#error_log ul li:first-child {
border: 0;
}
#error_log span {
width: 48%;
display: inline-block;
padding: 0 4px;
}
#error_log ul div {
padding: 4px;
}

/* 640px at standard browser settings. */
@media screen and (max-width: 40em) {
#error_log span {
width: auto;
display: block;
line-height: 2.6rem;
}
#error_log ul div:first-child {
border-bottom: 1px dashed #ccc;
}
}

Antechinus

Ok, this is better. Less markup too. Still stacks nicely down to 320.

function template_error_log()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

echo '
<form action="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? ';desc' : '', ';start=', $context['start'], $context['has_filter'] ? $context['filter']['href'] : '', '" method="post" accept-charset="', $context['character_set'], '" onsubmit="if (lastClicked == \'remove_all\' &amp;&amp; !confirm(\'', $txt['sure_about_errorlog_remove'], '\')) return false; else return true;">
<script type="text/javascript"><!-- // --><![CDATA[
var lastClicked = "";
// ]]></script>
<div class="cat_bar">
<h3 class="catbg">
<a href="', $scripturl, '?action=helpadmin;help=error_log" onclick="return reqWin(this.href);" class="help"><img src="', $settings['images_url'], '/helptopics.gif" alt="', $txt['help'], '" /></a> ', $txt['errlog'], '
</h3>
</div>
<div class="plainbox">
', $txt['apply_filter_of_type'], ':';

$error_types = array();
foreach ($context['error_types'] as $type => $details)
$error_types[] = ($details['is_selected'] ? '<img src="' . $settings['images_url'] . '/selected.gif" alt="" /> ' : '') . '<a href="' . $details['url'] . '" ' . ($details['is_selected'] ? 'style="font-weight: bold;"' : '') . ' title="' . $details['description'] . '">' . $details['label'] . '</a>';

echo '
', implode('&nbsp;|&nbsp;', $error_types), '
</div>
<div class="errors_submit">
', $txt['pages'], ': ', $context['page_index'], '
<input type="submit" value="', $txt['remove_selection'], '" onclick="lastClicked = \'remove_selection\';" class="button_submit" /> <input type="submit" name="delall" value="', $context['has_filter'] ? $txt['remove_filtered_results'] : $txt['remove_all'], '" onclick="lastClicked = \'remove_all\';" class="button_submit" />
</div>';

if (!empty($context['errors']))
echo '
<div class="plainbox errors_checkbox">';

if ($context['has_filter'])
echo '
<span class="floatleft">
<strong>', $txt['applying_filter'], ':</strong> ', $context['filter']['entity'], ' ', $context['filter']['value']['html'], ' (<a href="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? ';desc' : '', '">', $txt['clear_filter'], '</a>)
</span>';
echo '
<label for="check_all1"><strong>', $txt['check_all'], ' </strong><input type="checkbox" id="check_all1" onclick="invertAll(this, this.form, \'delete[]\'); this.form.check_all2.checked = this.checked;" class="input_check" /></label>
</div>';
echo '
<ul id="error_log">';
foreach ($context['errors'] as $error)
{
echo '
<li>
<div class="checkbox_column">
<input type="checkbox" name="delete[]" value="', $error['id'], '" class="input_check" />
</div>
<ul>
<li>
<span>
<a href="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? ';desc' : '', ';filter=id_member;value=', $error['member']['id'], '" title="', $txt['apply_filter'], ': ', $txt['filter_only_member'], '"><img src="', $settings['images_url'], '/filter.gif" alt="', $txt['apply_filter'], ': ', $txt['filter_only_member'], '" /></a>
<strong>', $error['member']['link'], '</strong>
</span>
<span>
<a href="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? ';desc' : '', ';filter=ip;value=', $error['member']['ip'], '" title="', $txt['apply_filter'], ': ', $txt['filter_only_ip'], '"><img src="', $settings['images_url'], '/filter.gif" alt="', $txt['apply_filter'], ': ', $txt['filter_only_ip'], '" /></a>
<strong><a href="', $scripturl, '?action=trackip;searchip=', $error['member']['ip'], '">', $error['member']['ip'], '</a></strong>&nbsp;&nbsp;
</span>
</li>
<li>
<span>
<a href="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? '' : ';desc', $context['has_filter'] ? $context['filter']['href'] : '', '" title="', $txt['reverse_direction'], '"><img src="', $settings['images_url'], '/sort_', $context['sort_direction'], '.gif" alt="', $txt['reverse_direction'], '" /></a>
', $error['time'], '
</span>';

if ($error['member']['session'] != '')
echo '
<span>
<a href="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? ';desc' : '', ';filter=session;value=', $error['member']['session'], '" title="', $txt['apply_filter'], ': ', $txt['filter_only_session'], '"><img src="', $settings['images_url'], '/filter.gif" alt="', $txt['apply_filter'], ': ', $txt['filter_only_session'], '" /></a>
', $error['member']['session'], '
</span>';

echo '
</li>
<li>
<span>
<a href="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? ';desc' : '', ';filter=error_type;value=', $error['error_type']['type'], '" title="', $txt['apply_filter'], ': ', $txt['filter_only_type'], '"><img src="', $settings['images_url'], '/filter.gif" alt="', $txt['apply_filter'], ': ', $txt['filter_only_type'], '" /></a>
', $txt['error_type'], ': ', $error['error_type']['name'], '
</span>

<span>
<a href="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? ';desc' : '', ';filter=message;value=', $error['message']['href'], '" title="', $txt['apply_filter'], ': ', $txt['filter_only_message'], '"><img src="', $settings['images_url'], '/filter.gif" alt="', $txt['apply_filter'], ': ', $txt['filter_only_message'], '" /></a>
', $error['message']['html'], '
</span>
</li>
<li>
<div>
<a href="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? ';desc' : '', ';filter=url;value=', $error['url']['href'], '" title="', $txt['apply_filter'], ': ', $txt['filter_only_url'], '"><img src="', $settings['images_url'], '/filter.gif" alt="', $txt['apply_filter'], ': ', $txt['filter_only_url'], '" /></a>
', $error['url']['html'], '</a>
</div>';


if (!empty($error['file']))
echo '
<div>
<a href="', $scripturl, '?action=admin;area=logs;sa=errorlog', $context['sort_direction'] == 'down' ? ';desc' : '', ';filter=file;value=', $error['file']['search'], '" title="', $txt['apply_filter'], ': ', $txt['filter_only_file'], '"><img src="', $settings['images_url'], '/filter.gif" alt="', $txt['apply_filter'], ': ', $txt['filter_only_file'], '" /></a>
', $txt['file'], ': ', $error['file']['link'], '&nbsp;-&nbsp;', $txt['line'], ': ', $error['file']['line'], '
</div>';
echo '
</li>';
echo '
</ul>
</li>';
}

echo '
</ul>';

if (!empty($context['errors']))
echo '
<div class="plainbox errors_checkbox">
<label for="check_all2"><strong>', $txt['check_all'], ' </strong><input type="checkbox" id="check_all2" onclick="invertAll(this, this.form, \'delete[]\'); this.form.check_all1.checked = this.checked;" class="input_check" /></label>
</div>';
else
echo '
<div class="plainbox">
', $txt['errlog_no_entries'], '
</div>';

echo '
<div class="errors_submit">
', $txt['pages'], ': ', $context['page_index'], '
<input type="submit" value="', $txt['remove_selection'], '" onclick="lastClicked = \'remove_selection\';" class="button_submit" /> <input type="submit" name="delall" value="', $context['has_filter'] ? $txt['remove_filtered_results'] : $txt['remove_all'], '" onclick="lastClicked = \'remove_all\';" class="button_submit" />
</div>';

if ($context['sort_direction'] == 'down')
echo '
<input type="hidden" name="desc" value="1" />';
echo '
<input type="hidden" name="', $context['session_var'], '" value="', $context['session_id'], '" />
</form>';
}


/* Styles for the error log.
------------------------------------------------- */
.subaction_errorlog .plainbox {
margin: 2px 0;
padding: 4px 7px;
}
.errors_submit {
overflow: hidden;
}
.errors_submit .button_submit {
float: right;
margin: 5px 2px;
}
.errors_checkbox {
text-align: end;
clear: both;
}
.errors_checkbox .floatleft {
text-align: start;
}
#error_log>li {
position: relative;
margin: 2px 0;
background: #fdfdfd;
border: 1px solid #ccc;
}
#error_log>li:nth-child(2n) {
background: #f5f9fd;
}
#error_log .checkbox_column {
width: 34px;
padding-top: 8px;
text-align: center;
position: absolute;
top: 0;
right: 0;
bottom: 0;
border-left: 1px solid #ccc;
}
#error_log ul {
margin-right: 34px;
}
#error_log ul li {
line-height: 2.4rem;
padding: 4px;
overflow: hidden;
border-top: 1px dashed #ccc;
}
#error_log ul li:first-child {
border: 0;
}
#error_log span {
width: 48%;
display: inline-block;
padding: 0 4px;
}
#error_log span:first-child {
border-right: 1px dashed #ccc;
}
#error_log ul div {
padding: 4px;
}
/* Basic responsive tweaks.
----------------------------------------*/
/* 640px at standard browser settings. */
@media screen and (max-width: 40em) {
#error_log span {
width: auto;
display: block;
line-height: 2.6rem;
}
#error_log ul div:first-child {
border-bottom: 1px dashed #ccc;
}
#error_log span:first-child {
border: 0;
}
}

Antechinus

Ok, RC2 thingy. I think it's ready for that. This one isn't a pile of loose files. It's a standard installable theme zip, that won't overwrite any default theme files. Should be good to go on any site.

If nobody finds anything seriously wrong with it, I might just do the RTL stuff and call it finished.

Biology Forums

I give this theme 10/10. It is a beautiful rendition of a theme that came out 10 years ago. Every new SMF install should start with this. There are a few things that I'd change, but I think Antechinus has done more than enough.

lurkalot

Quote from: Antechinus on October 01, 2019, 04:01:00 AM
Ok, RC2 thingy. I think it's ready for that. This one isn't a pile of loose files. It's a standard installable theme zip, that won't overwrite any default theme files. Should be good to go on any site.

If nobody finds anything seriously wrong with it, I might just do the RTL stuff and call it finished.

Thought I'd give it a trial run.  I'm getting this error when clicking admin, profile etc,

Unable to load the 'generic_menu_dropdown_above' template.

Antechinus

Quote from: lurkalot on October 01, 2019, 02:18:13 PM
Thought I'd give it a trial run.  I'm getting this error when clicking admin, profile etc,

Unable to load the 'generic_menu_dropdown_above' template.

That figures. I removed it. :D There was no point having that function in the theme as it's useless on mobile anyway.

Ok, will have to find a fix for that. It's trying to comply with a setting that doesn't exist in this theme. And which is not controlled by the theme as such, apparently. Just took a look in admin that that is about the only theme setting that is not configurable in admin. What genius thought that was a good idea? Way to go, SMF. :P I need my old sig back.

What it's going to need is something in the template that redirects that call to template_generic_menu_sidebar_above(). Should be easy. This should work.

// This contains the html for the side bar of the admin center, which is used for all admin pages.
function template_generic_menu_dropdown_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

template_generic_menu_sidebar_above();

}


Will test that shortly (have to take the bins out first).

Antechinus

Quote from: Study Force on October 01, 2019, 01:50:01 PM
I give this theme 10/10. It is a beautiful rendition of a theme that came out 10 years ago. Every new SMF install should start with this. There are a few things that I'd change, but I think Antechinus has done more than enough.

Turns out Ant has to do more anyway. Might as well list any changes you think are worthwhile.

Antechinus

Ok, fixed. New zip attached. It's still called RC2. ;)

lurkalot


Antechinus

Just noticed that one has a very minor bug too. For the h5 tag it was inheriting straight from a global reset I put on all the h tags (h1 to h6 were set to 1em early in the file) instead of the sizing I used to the last post cells. That put text in the last post cells down to 10px, which is a bit silly. I've just changed the h tag reset to a base size of 1.2rem, which is what it really should be.

So there's another RC2 zip in my previous post. Third time lucky. :D

Hey while you're here, you're a support bot. How about removing the bugged zip from here? I can't do it anymore.

lurkalot

Quote from: Antechinus on October 01, 2019, 04:21:18 PM

So there's another RC2 zip in my previous post. Third time lucky. :D

Hey while you're here, you're a support bot. How about removing the bugged zip from here? I can't do it anymore.

Thank you.  Theme looks cool, very nice work indeed.  8)

Re: removing the bugged zip, looks like d3vcho(); beat me to it while I was trying out your theme..

Antechinus

Cool. Thanks d3vcho(); :)

I did send in a mod report asking for it to be deleted, but I wasn't sure when someone would get around to reading it.

Oh question: how's the font-size on phones? I set it to 14px for screens <160dpi and 16px for anything higher density. I find 16px is too much on desktop or laptop, but from memory (last time I made a thing for phones) having the browser default size of 16px was perfect for them.

Biology Forums

Quote from: Antechinus on October 01, 2019, 03:30:52 PM
Quote from: Study Force on October 01, 2019, 01:50:01 PM
I give this theme 10/10. It is a beautiful rendition of a theme that came out 10 years ago. Every new SMF install should start with this. There are a few things that I'd change, but I think Antechinus has done more than enough.

Turns out Ant has to do more anyway. Might as well list any changes you think are worthwhile.

I believe #forum_banner should be width: 100% rather than max-width: 100%; use the following image URL to see the difference when added as a logo.

In mobile view, we see [see attachment 1]. Notice the hanging slash. I believe each of those links should be coupled together in a span that has white-space: nowrap; to prevent separating from the link they're associated with.

I don't like the on-hover effect of the last link in the breadcrumb [see attachment 2], where the blue arrow appears leading to nothing. To eliminate, we can use a pseudoelement (last-child) to prevent it from showing up.

Antechinus

Quote from: Study Force on October 01, 2019, 05:32:47 PMI believe #forum_banner should be width: 100% rather than max-width: 100%; use the following image URL to see the difference when added as a logo.

That will cause problems if someone only wants a small banner. Not everyone wants it full width. Using max-width allows people to use any size they like. Also, if someone does upload a small image but wants it full width, it will be pixellated to hell on larger monitors. Short version is that if you want a banner to be full width on any monitor, you have to use an image that is big enough to do the job properly.


QuoteIn mobile view, we see [see attachment 1]. Notice the hanging slash. I believe each of those links should be coupled together in a span that has white-space: nowrap; to prevent separating from the link they're associated with.

Doesn't need a span there. I know how to fix that with a minor CSS edit. It's just something I missed in the media query for responsive. I'll sort it now.


QuoteI don't like the on-hover effect of the last link in the breadcrumb [see attachment 2], where the blue arrow appears leading to nothing. To eliminate, we can use a pseudoelement (last-child) to prevent it from showing up.

last-child is a pseudo class, not a pseudo element. The arrows are already done with pseudo elements.


.linktree li::after {
position: relative;
bottom: -2px;
color: #C8872B;
font-size: 2em;
font-weight: 700;
content: "\000bb";
}
.linktree .last::after {
visibility: hidden;
}
.linktree li:hover::after, .linktree li:focus::after {
visibility: visible;
color: #346;
}


If you don't like the last one appearing on hover or focus, simply remove visibility: visible; from the last declaration. Personally I like the effect.

Note: Do not try to be clever and use display: none; either. The different font-size on the ::after means it's necessary to have the last one actually active in the markup even if it isn't visible, because otherwise things get jumpy (the linktree will want to be different heights on the home page vs every other page).

Advertisement: