Visual presentation bugs and errors

SMF Development > Bug Reports

<< < (2/4) > >>

BeeKay:

--- Quote from: Antechinus on January 08, 2012, 06:06:15 PM ---Thanks for the feedback. Do it the way that is easiest for you. Given the number of tweaks, perhaps just edited files with comments added might be best, since I assume you already have the edited files.

--- End quote ---

I've attached a .zip file which contains the first batch of my suggested modifications. The package consists of 1 css, 7 source, 22 template and 1 language files. There is a 'Readme.txt' file in the root folder of the unzipped package. Please read it before using any of the included files.

The files are modified versions of the actual files with details of the mods and any comments added. The details and comments have been added in such a way that they do not interfere with the running of the files. It is therefore possible to install them into any forum and they should work as I intended so you can see the mods in action.

All the mods in this package are for configuration pages; changes have not been made to board layouts (probably not needed). In an effort to standardise pages, I have concentrated mainly on 2 particular areas for now (although not exclusively) - (1) the visual layout of pages/panels and (2) the positioning of buttons. Most pages were already formatted with captions on the left and input boxes on the right so I have adopted that as the standard. However, there seems to be no set formatting for buttons so I have opted to position them at the bottom right of each page/panel.

There are many more possibilities for modifications to make the programme look better and I'm already working on the next package. I hope these mods will prove useful.

emanuele:
Great work!! :D

Just a note, in "Admin -> Forum -> Smileys and Message Icons -> Smiley Sets -> Add New Smiley Set" it's not necessary to add a space at the end, the "proper" fix would be:

--- Code: (find) --- 'value' => '<input type="submit" name="delete" value="' . $txt['smiley_sets_delete'] . '" onclick="return confirm(\'' . $txt['smiley_sets_confirm'] . '\');" style="float: right;" class="button_submit" /> [<a href="' . $scripturl . '?action=admin;area=smileys;sa=modifyset' . '">' . $txt['smiley_sets_add'] . '</a>]',
--- End code ---

--- Code: (replace with) --- 'value' => '[<a href="' . $scripturl . '?action=admin;area=smileys;sa=modifyset' . '">' . $txt['smiley_sets_add'] . '</a>] <input type="submit" name="delete" value="' . $txt['smiley_sets_delete'] . '" onclick="return confirm(\'' . $txt['smiley_sets_confirm'] . '\');" class="button_submit" />',
--- End code ---

Note I removed the inline style (style="float: right;" ) from the button and I switched the link and the button (now also the vertical alignment is similar to the one of the other pages (like for example admin > maintenance > mail > browse queue)

ETA: just noticed that in same file (ManageSmileys.php) there is also:

--- Code: (find) --- 'value' => '<input type="submit" name="delete" value="' . $txt['quickmod_delete_selected'] . '" style="float: right" class="button_submit" />[<a href="' . $scripturl . '?action=admin;area=smileys;sa=editicon">' . $txt['icons_add_new'] . '</a>]',
--- End code ---

--- Code: (replace with) --- 'value' => '[<a href="' . $scripturl . '?action=admin;area=smileys;sa=editicon">' . $txt['icons_add_new'] . '</a>] <input type="submit" name="delete" value="' . $txt['quickmod_delete_selected'] . '" class="button_submit" />',
--- End code ---

ETA2:
Just wondering, would make sense to change ManageNews.template.php from:

--- Code: (find) --- <div class="floatleftpadding">
<div id="moreNewsItems_link" style="display: none;"><a href="javascript:void(0);" onclick="addNewsItem(); return false;">', $txt['editnews_clickadd'], '</a></div>
<script type="text/javascript"><![CDATA[
document.getElementById("moreNewsItems_link").style.display = "";
function addNewsItem()
{
document.getElementById("moreNews").style.display = "";
setOuterHTML(document.getElementById("moreNewsItems"), \'<div style="margin-bottom: 2ex;"><textarea rows="3" cols="65" name="news[]" style="' . ($context['browser']['is_ie8'] ? 'width: 635px; max-width: 85%; min-width: 85%' : 'width: 85%') . ';"><\' + \'/textarea><\' + \'/div><div id="moreNewsItems"><\' + \'/div>\');
}
// ]]></script>
<noscript>
<div style="margin-bottom: 2ex;"><textarea rows="3" cols="65" style="' . ($context['browser']['is_ie8'] ? 'width: 635px; max-width: 85%; min-width: 85%' : 'width: 85%') . ';" name="news[]"></textarea></div>
</noscript>
</div>
<div class="floatrightpadding">
<input type="submit" name="save_items" value="', $txt['save'], '" class="button_submit" /> <input type="submit" name="delete_selection" value="', $txt['editnews_remove_selected'], '" onclick="return confirm(\'', $txt['editnews_remove_confirm'], '\');" class="button_submit" />
</div>
--- End code ---

to this?

--- Code: (replace with) --- <div class="flow_auto">
<div class="floatright">
<span id="moreNewsItems_link" style="display: none;">[<a href="javascript:void(0);" onclick="addNewsItem(); return false;">', $txt['editnews_clickadd'], '</a>]</span> <input type="submit" name="save_items" value="', $txt['save'], '" class="button_submit" /> <input type="submit" name="delete_selection" value="', $txt['editnews_remove_selected'], '" onclick="return confirm(\'', $txt['editnews_remove_confirm'], '\');" class="button_submit" />
<script type="text/javascript"><![CDATA[
document.getElementById("moreNewsItems_link").style.display = "";
function addNewsItem()
{
document.getElementById("moreNews").style.display = "";
setOuterHTML(document.getElementById("moreNewsItems"), \'<div style="margin-bottom: 2ex;"><textarea rows="3" cols="65" name="news[]" style="' . ($context['browser']['is_ie8'] ? 'width: 635px; max-width: 85%; min-width: 85%' : 'width: 85%') . ';"><\' + \'/textarea><\' + \'/div><div id="moreNewsItems"><\' + \'/div>\');
}
// ]]></script>
<noscript>
<div style="margin-bottom: 2ex;"><textarea rows="3" cols="65" style="' . ($context['browser']['is_ie8'] ? 'width: 635px; max-width: 85%; min-width: 85%' : 'width: 85%') . ';" name="news[]"></textarea></div>
</noscript>
</div>
</div>
--- End code ---

BeeKay:

--- Quote from: emanuele on January 24, 2012, 07:13:52 AM ---ETA2:
Just wondering, would make sense to change ManageNews.template.php to this?

--- Code: (replace with) --- <div class="flow_auto">
<div class="floatright">
<span id="moreNewsItems_link" style="display: none;">[<a href="javascript:void(0);" onclick="addNewsItem(); return false;">', $txt['editnews_clickadd'], '</a>]</span> <input type="submit" name="save_items" value="', $txt['save'], '" class="button_submit" /> <input type="submit" name="delete_selection" value="', $txt['editnews_remove_selected'], '" onclick="return confirm(\'', $txt['editnews_remove_confirm'], '\');" class="button_submit" />
<script type="text/javascript"><![CDATA[
document.getElementById("moreNewsItems_link").style.display = "";
function addNewsItem()
{
document.getElementById("moreNews").style.display = "";
setOuterHTML(document.getElementById("moreNewsItems"), \'<div style="margin-bottom: 2ex;"><textarea rows="3" cols="65" name="news[]" style="' . ($context['browser']['is_ie8'] ? 'width: 635px; max-width: 85%; min-width: 85%' : 'width: 85%') . ';"><\' + \'/textarea><\' + \'/div><div id="moreNewsItems"><\' + \'/div>\');
}
// ]]></script>
<noscript>
<div style="margin-bottom: 2ex;"><textarea rows="3" cols="65" style="' . ($context['browser']['is_ie8'] ? 'width: 635px; max-width: 85%; min-width: 85%' : 'width: 85%') . ';" name="news[]"></textarea></div>
</noscript>
</div>
</div>
--- End code ---

--- End quote ---

Thanks for your feedback. I'm happy with your first two suggestions although I would say that the only change I had made to the SMF original was to add the   code at the end of the first one. I now know what to look out for in similar situations as I progress through further mods (the syntax of PHP is still relatively new to me!).

I'm also happy with the third suggestion but I've made 3 minor changes.
(1) I've changed the <span> line to a <div> encompassing the whole line and added a 'margin-top = 1ex;' to the style field. That way there is a small white space above the buttons to separate them from the panel above. The overall effect gives a similar look to the mods at items 1 and 2.
(2) and (3) I've changed the 'margin-bottom to 1ex;' so that the news input box is vertically centred - as I wanted it - whether the box contains saved text or is a new empty box. The code for this is below (including comments).

--- Code: (amended replacement) --- <div class="flow_auto">
<div class="floatright">
/* need white space above buttons */
<div id="moreNewsItems_link" style="display: none; margin-top: 1ex;">[<a href="javascript:void(0);" onclick="addNewsItem(); return false;">', $txt['editnews_clickadd'], '</a>] <input type="submit" name="save_items" value="', $txt['save'], '" class="button_submit" /> <input type="submit" name="delete_selection" value="', $txt['editnews_remove_selected'], '" onclick="return confirm(\'', $txt['editnews_remove_confirm'], '\');" class="button_submit" /></div>
<script type="text/javascript"><![CDATA[
document.getElementById("moreNewsItems_link").style.display = "";
function addNewsItem()
{
document.getElementById("moreNews").style.display = "";
/* margin-bottom changed to 1ex */
setOuterHTML(document.getElementById("moreNewsItems"), \'<div style="margin-bottom: 1ex;"><textarea rows="3" cols="65" name="news[]" style="' . ($context['browser']['is_ie8'] ? 'width: 635px; max-width: 85%; min-width: 85%' : 'width: 85%') . ';"><\' + \'/textarea><\' + \'/div><div id="moreNewsItems"><\' + \'/div>\');
}
// ]]></script>
<noscript>
/* margin-bottom changed to 1ex */
<div style="margin-bottom: 1ex;"><textarea rows="3" cols="65" style="' . ($context['browser']['is_ie8'] ? 'width: 635px; max-width: 85%; min-width: 85%' : 'width: 85%') . ';" name="news[]"></textarea></div>
</noscript>
</div>
</div>

--- End code ---

BeeKay:

--- Quote from: BeeKay on January 23, 2012, 06:45:20 PM ---There are many more possibilities for modifications to make the programme look better and I'm already working on the next package. I hope these mods will prove useful.

--- End quote ---

I've attached a .zip file which contains the Sources files of the next batch of my suggested modifications. A second file containing the Themes files is being posted separately. Both parts are required for the complete set of modifications.

The complete package consists of 19 source, 27 template, 1 language and 1 css files (there are no changes to the css file this time). There is also a 'Readme(2).txt' file in the root folder of each of the unzipped files containing updated information on the modifications. Please read it before using any of the included files.

As before, the files are modified versions of the actual files with details of the mods and many comments added. Again, it should be possible to install them into any forum (provided you also install files from my previous package) and they should work as I intended so you can see the mods in action.

BeeKay:

--- Quote from: BeeKay on February 20, 2012, 09:45:42 AM ---A second file containing the Themes files is being posted separately. Both parts are required for the complete set of modifications.

--- End quote ---

Here is the second .zip file containing the Themes files.

Navigation

[0] Message Index

[#] Next page

[*] Previous page

Go to full version