Wide A Responsive Theme

[gecitli]

hello can you give me the link where the theme is installed

EDIT: the magnifying glass is being shown - isn't that also a part of the font?

Code Select Expand

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

font-family: 'Glyphicons Halflings';

we tested the theme http https works fine something else? preventing

[Totosfo]

Hi gectitli,

my test env is secured, but I installed a working copy on prod - https://forum.usa-reise.de

Please register, I'll then confirm your user and then you can change your Theme to usar-vVide (I added the prefix to distinguish from the untouched version from your package).

Don't get confused by the fact that the last post avatars are shown twice - our standard theme couldn't display these by default that's why I had to add a mod. I'll remove it as soon your theme goes finally live.

Paths are o.k. so far, see attachment.

Thanks,

Thomas

[GL700Wing]

@GL700Wing: I switched the folder rights to 644, but as expected it didn't help. Based on my past experience, 755 is somehow standard for directories which are only used by a service / daemon like http

My suggestion was to change the file rights to 644 - not the folder rights.

[Totosfo]

Good morning,

My suggestion was to change the file rights to 644 - not the folder rights.

Sorry misunderstanding. Changed it from 666 to 644 now - makes more sense anyway as font files don't need to be writeable. However didn't fix the problem unfortunately.

[gecitli]

Hello. Thomas Problem pictorial explanation index.template this code

Code Select Expand

<li id="button_', $act, '" class="button_', $act, (!empty($button['sub_buttons']) ? ' dropdown' : ''), ($button['active_button'] ? ' active' : ''), '">
<a ', (!empty($button['sub_buttons']) ? ' class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"' : ''), ' href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
<i class="fa fa-',$act,'"></i>&nbsp;
<span>', $button['title'], '</span>', !empty($button['sub_buttons']) ? ' ' :'', '
<span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>

<i class="fa fa-',$act,'"></i>&nbsp;

If you haven't changed, the link mod you use does this Pretty URLs.vs

[Totosfo]

Hi gectili,

thank you for the analysis.

I already suspected that the pretty links mod has something to do with this, that's why I clreared the .htaccess (containing the rewrites) in my test env completely but this didn't help.

I'll remove it now in my test env via the admin menu in order to get rid of all code changes and will see what happens.

If this does the trick, I either have to found an alternative to pretty urls (which hopefully creates a similiar output else all internal links in the posts will be messed up) or find a way to get around it. I really like this theme.

But maybe I should ask my VIP users first what they think before starting to work on it.

Thank you so much for your help and support gecitli, I really appreciate that. 

[ginzhul]

Всем привет. Подскажите подробнее как и где изменить ссылки главного бокового меню + ещё хотелось бы добавить свои пункты к меню и значки Font Awesome?

[Recursos]

This theme is what I was looking for, many thanks gecitli.

But I am having trouble installing it (newbie).
Created a new sub-domain, installed SMF.
The newly created forum works OK.
Installed Wide RC2.
Now I receive the error "Page isn't working etc. HTTP ERROR 500"
Run repair_settings.php, set SMF Default theme as overall forum default, the page is back to life.

How can I find what I am doing wrong?
Where should I look?

[webtiryaki]

Hello, you installed my attached package? So it shouldn't be a problem

[Recursos]

Hello webtiryaki.
I don't get it - isn't this the same Wide_RC2.zip from gecitli??
which I downloaded from the original SMF theme site:
https://custom.simplemachines.org/themes/index.php?lemma=2837

When installing a theme fails, where should I look?
Thanks,

[Recursos]

Restating my problem:
Installed SMF 2.0.17
The newly created forum opens OK
Error log shows always this error ("General"):

8: Trying to access array offset on value of type null
File: /home/vol15_6/epizy.com/epiz_25029984/fdl.rf.gd/htdocs/Sources/Load.php
Line: 168

Although each access generates this error, the page works OK
Downloaded Wide_RC2 from the original SMF theme site:
https://custom.simplemachines.org/themes/index.php?lemma=2837

Go to Admin CP and installed Wide
The forum fails to re-open, error "Page isn't working etc. HTTP ERROR 500"

Run repair_settings.php, set SMF Default theme as overall forum default, the forum is back to life.
Login as Admin, now the error log shows a new error ("Critical):

http://fdl.rf.gd/index.php?action=admin;area=theme;b31100c=634c526e37d49c2fececa3c2cf6dd2fa;sa=admin
Call to undefined function loadCSSFile()

So I guess this points to the cause of the forum crashing when Wide is the default Theme.
What can I do about this?

[Shambles]

Installed SMF 2.0.17

Which of these did you download? For 2.0.17 you would get the vVide.zip

[Recursos]

Thanks, Shambles
vVide works OK with SMF 2.0.17
Rec

[GL700Wing]

I have this theme installed on an SMF 2.0.17 forum and while investigating a JavaScript issue and I noticed the following error message in the console:

Code Select Expand

Uncaught TypeError: $.webtiryaki is undefined
    <anonymous> https://my.domain.com/forum/Themes/vVide/scripts/app.js?fin20:133

which refers to the following line of code:

Code Select Expand

var o = $.webtiryaki.options;

Is this something I need to be concerned about and/or how can I fix this issue?

[GL700Wing]

I have this theme installed on an SMF 2.0.17 forum and while investigating a JavaScript issue and I noticed the following error message in the console:

Code Select Expand

Uncaught TypeError: $.webtiryaki is undefined
    <anonymous> https://my.domain.com/forum/Themes/vVide/scripts/app.js?fin20:133

which refers to the following line of code:

Code Select Expand

var o = $.webtiryaki.options;

Is this something I need to be concerned about and/or how can I fix this issue?

I managed to resolve this issue by clearing the cache - strange thing is I have never edited this JS file so I don't why the error was being reported.

[GL700Wing]

I've been preparing a new SMF 2.0.17 forum using this theme and, after having done lots of little tweaks to improve its responsiveness with the mods I've installed, I'm just about ready to launch the forum.

However, one issue I do have is that the user-selected display state of the sidebar (ie, expanded or collapsed) is not remembered on non-mobile devices (eg, desktops, laptops, tablets, etc) - if I collapse the sidebar and then click on a link anywhere in the forum (eg, Category name, Board name, Topic title, Unread Posts, etc) the sidebar expands again.

Would it be possible to update the Javascript  for the sidebar and/or the index.template.php file so that if the user has collapsed the sidebar it is only expanded when they click on the expand/collapse button again?

Hello, a new base js needs to be written for this.

Last week I discovered an SMF 2.0.17 forum using this theme where the sidebar toggle state is remembered on both non-mobile devices and mobile devices and by using a web inspector I worked out that the toggle state was being managed via a cookie.

By updating ./Themes/vVide/scripts/app.js to create/remove a cookie for the sidebar push menu and also updating ./Themes/vVide/index.template.php to check for the cookie I now have the user-selected display state of the sidebar (ie, expanded or collapsed) being remembered on both mobile and non-mobile devices (eg, desktops, laptops, tablets, etc).


./Themes/vVide/scripts/app.js
Find:

Code Select Expand

//Enable sidebar push menu
if ($(window).width() > (screenSizes.sm - 1)) {
  if ($("body").hasClass('sidebar-collapse')) {
$("body").removeClass('sidebar-collapse').trigger('expanded.pushMenu');
  } else {
$("body").addClass('sidebar-collapse').trigger('collapsed.pushMenu');
  }
}
Replace With:

Code Select Expand

//Enable sidebar push menu
if ($(window).width() > (screenSizes.sm - 1)) {
  if ($("body").hasClass('sidebar-collapse')) {
$("body").removeClass('sidebar-collapse').trigger('expanded.pushMenu');
document.cookie = "sidebar_collapse=; path=/; secure=true; expires=Thu, 01 Jan 1970 00:00:00 GMT;";
  } else {
$("body").addClass('sidebar-collapse').trigger('collapsed.pushMenu');
document.cookie = "sidebar_collapse=true; path=/; secure=true;";
  }
}

Note: Do not use the 'secure=true;' flag for or non-HTTPS websites.


./Themes/vVide/index.template.php
Find:

Code Select Expand

<body class="hold-transition skin-blue sidebar-mini">';
Replace With:

Code Select Expand

<body class="hold-transition skin-blue sidebar-mini' . (!empty($_COOKIE['sidebar_collapse']) ? ' sidebar-collapse' : '') . '">';

[wylekk]

I have SMF21rc3 and theme Wide_RC3 

Changes such for cookies

левая панель с памятью

Themes\Wide_RC3\scripts\theme.js

Find

Code Select Expand

        //Enable sidebar push menu
        if ($(window).width() > (screenSizes.sm - 1)) {
          if ($("body").hasClass('sidebar-collapse')) {
            $("body").removeClass('sidebar-collapse').trigger('expanded.pushMenu');
          } else {
            $("body").addClass('sidebar-collapse').trigger('collapsed.pushMenu');
          }
        }
Replace

Code Select Expand

        //Enable sidebar push menu
if ($(window).width() > (screenSizes.sm - 1)) {
  if ($("body").hasClass('sidebar-collapse')) {
$("body").removeClass('sidebar-collapse').trigger('expanded.pushMenu');
document.cookie = "sidebar_collapse=; path=/; secure=true; expires=Thu, 01 Jan 1970 00:00:00 GMT;";
  } else {
$("body").addClass('sidebar-collapse').trigger('collapsed.pushMenu');
document.cookie = "sidebar_collapse=true; path=/; secure=true;";
  }
}      

Themes\Wide_RC3\index.template.php

Find

Code Select Expand

<body id="', $context['browser_body_id'], '" class="skin-blue sidebar-mini action_',
Replace

Code Select Expand

<body id="', $context['browser_body_id'], '" class="skin-blue sidebar-mini ' . (!empty($_COOKIE['sidebar_collapse']) ? ' sidebar-collapse' : '') . ' action_',
-----------------------
индикатор ошибок лога в админке

Log error indicator in the admin panel

Themes\Wide_RC3\index.template.php

Find

Code Select Expand

<a class="dropdown-item" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>', $button['title'], '</a>

Replace

Code Select Expand

<a class="dropdown-item" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>', $button['title'], !empty($button['amt']) ? ' <span class="amt">' . $button['amt'] . '</span>' : '', '</span></a>

-----------------------
кнопки в персональных сообщениях (взято из стандартного шаблона index.template.php)

Buttons in personal messages (taken from the standard index.template.php template)

Themes\Wide_RC3\index.template.php

Find

Code Select Expand

* The upper part of the maintenance warning box

Replace

Code Select Expand

* Generate a list of quickbuttons.
*
* @param array $list_items An array with info for displaying the strip
* @param string $list_class Used for integration hooks and as a class name
* @param string $output_method The output method. If 'echo', simply displays the buttons, otherwise returns the HTML for them
* @return void|string Returns nothing unless output_method is something other than 'echo'
*/
function template_quickbuttons($list_items, $list_class = null, $output_method = 'echo')
{
global $txt;

// Enable manipulation with hooks
if (!empty($list_class))
call_integration_hook('integrate_' . $list_class . '_quickbuttons', array(&$list_items));

// Make sure the list has at least one shown item
foreach ($list_items as $key => $li)
{
// Is there a sublist, and does it have any shown items
if ($key == 'more')
{
foreach ($li as $subkey => $subli)
if (isset($subli['show']) && !$subli['show'])
unset($list_items[$key][$subkey]);

if (empty($list_items[$key]))
unset($list_items[$key]);
}
// A normal list item
elseif (isset($li['show']) && !$li['show'])
unset($list_items[$key]);
}

// Now check if there are any items left
if (empty($list_items))
return;

// Print the quickbuttons
$output = '
<ul class="quickbuttons' . (!empty($list_class) ? ' quickbuttons_' . $list_class : '') . '">';

// This is used for a list item or a sublist item
$list_item_format = function($li)
{
$html = '
<li' . (!empty($li['class']) ? ' class="' . $li['class'] . '"' : '') . (!empty($li['id']) ? ' id="' . $li['id'] . '"' : '') . (!empty($li['custom']) ? $li['custom'] : '') . '>';

if (isset($li['content']))
$html .= $li['content'];
else
$html .= '
<a' . (!empty($li['href']) ? ' href="' . $li['href'] . '"' : '') . (!empty($li['javascript']) ? $li['javascript'] : '') . '>
' . (!empty($li['icon']) ? '<span class="main_icons ' . $li['icon'] . '"></span>' : '') . (!empty($li['label']) ? $li['label'] : '') . '
</a>';

$html .= '
</li>';

return $html;
};

foreach ($list_items as $key => $li)
{
// Handle the sublist
if ($key == 'more')
{
$output .= '
<li class="post_options">' . $txt['post_options'] . '
<ul>';

foreach ($li as $subli)
$output .= $list_item_format($subli);

$output .= '
</ul>
</li>';
}
// Ordinary list item
else
$output .= $list_item_format($li);
}

$output .= '
</ul><!-- .quickbuttons -->';

// There are a few spots where the result needs to be returned
if ($output_method == 'echo')
echo $output;
else
return $output;
}

/**
* The upper part of the maintenance warning box

[TurtleKicker]

I've had my eye on this theme for a while now. I really like its different take on layout, with the dynamic menu column along the left side instead of the top. This makes far better use of widescreen space than a fixed-width layout with wasted whitespace on the left and right.

My big holdup is the logo. I see plenty of varied manual hacks but nothing smooth and seamless. And no matter what, the size of the logo is extremely limited, restricted to an abnormally tiny corner in the upper-left. I'm not sure what the solution is, but some sort of layout tweak to allow "normal" sized banner logos, simply set in "Logo image URL:" under Theme Options, and where setting a logo URL replaces the teacher's hat would be the final tweak that nails it.  I really don't want to have to keep manually re-hacking the theme after each update... the mechanisms are in SMF for setting the URL and with most themes, setting one REPLACES whatever default image was there.

My current banner logo is 486x100

[GL700Wing]

Here's a link to the forum I use this theme on - I some time tweaking it to suit the needs of the user community and I'm really happy with the result - especially on mobile devices.

Ultimate Campers Owners Forum


[fixed url dyslexia ulr instead of url ~ Shadav]

[Totosfo]

Hi GL700Wing,

I plan to use this theme as well and am still running into trouble regarding the small icons in front of the menu items on the side (Register, Login, Calendar, ...) - see my previous posts in this thread many weeks ago.

I had a look at your forum and noticed that you have defined e.g. as "button_register", however I couldn't find this reference in the css the page loads.

Could you let me know where (or how) this is defined? The template works fine for me so far, I even have the hat (plain install) in the upper left corner however am missing all the other small icons.

Looks to me that these really need to be defined somewhere additionally.

Thank you for your help!