[SOLVED] Widgets below instead of left/right?

Hi,

is it possible (maybe through javascript) to put widgets below to the forum instead of left/right?

Thanks in advance.

bump

Yes, you could do something like this for example :

Code:

$(function() {
  $('#left, #right').appendTo('#wrap');
});

Just a quick writeup with jQuery. It'll add the left and / or right columns directly to the wrapper, which puts them below the forum content.

I added your writeup to my forum (marked 'On homepage') for right column, but didn't work. :/

Seems like it re-executed the javascript in the widget when I tested it, which is bad.

I think the best choice might be to place the widgets on the right and then use this CSS to place them below the content :

Code:

#right {
  float:none !important;
  width:auto !important;
}

You can do the same with the left column, just replace right with the former. Only difference is the left column will display above the forum content.

@Ange Tuteur Didn't work aswell. :/ Added it to css stylesheet and nothing happens.
After that changed the value of the 3rd (right) column from 0 to 180, but then the widgets will appear on the right column and not below the content.

Oh right, my bad. Add this rule along with the one for the right column in my last post :

Code:

#content-container div#container, #content-container div#content {
  float:none !important;
  margin-right:0 !important;
}

Make sure your widgets are on the right.

Now it works.
But I have three wishes for improvements.

1. After inserting your rules in css stylesheet and putting value of right column to 180, on the homepage appears a black line:
   https://i.servimg.com/u/f86/16/43/86/96/dsfghj10.png
   
   Why? Possible to remove?
   
   
2. The widgets from right column appear one after onother, which results in very wide widgets:
   https://i.servimg.com/u/f86/16/43/86/96/dfghjt10.png
   
   Possible to make them narrow and side by side (maybe 3 or 4 side by side)?
   
   
3. And last but not least: Is it possible to put the widgets above the who is onlne list?

If you need an account with admin rights for testing, let me know.
Thanks for your very good support!


Edit:
4. It looks with the rules in css like that (gray background):
https://i.servimg.com/u/f86/16/43/86/96/screen12.jpg

Why, Ange? .__.

1. I don't see the line when I view your forum so I have no idea where it's coming from.

2. Use this CSS to display the widgets side by side :

Code:

#right .module {
  display:inline-block;
  width:180px;
  margin:3px;
}

3. No, not without JavaScript, and I wont be attempting that because of the problem we faced before.

4. I can't guess, I'd need to see the problem first hand so I can inspect it.

Send you a pm.

@schiggysboard 1 & 4 were caused by one of your custom widgets "master widget" I removed it from the column. As for the CSS, try adding these rules :

Code:

#right {
  float:none !important;
  width:100% !important;
}

#content-container div#container, #content-container div#content {
  float:none !important;
  margin-right:0 !important;
}

#right div[style="height:6px"] { display:none; }

#right .module {
  vertical-align:top;
  display:inline-block;
  width:180px;
  margin:3px;
}

It should give you a good result.

@Ange Tuteur Thank you, but result is this:
https://i.servimg.com/u/f86/16/43/86/96/screen10.png
:/

I made some changes, does it appear to you like this ?

@Ange Tuteur Nearly:
https://i.servimg.com/u/f86/16/43/86/96/screen13.jpg

Again a gray background.
But this gray bg doesn't appear when I'm on who is online page. (?)

That's weird.. What browser are you using ? Because it looks okay on my end.

It appears on mobile device with browsers chrome and firefox, @Ange Tuteur. But only on homepage, not in topics or who is online list.

Do you have something like this in your CSS ?

Code:

  #page-body {
    background-color:#f6f6f6
  }

It appears to be inside a media query for smaller screens.

Yes, on line 1063 in css stylesheet for the mobile theme.

That's most likely the cause. Try adding

Code: #mpage-body

in front of the selector so you get :

Code:

 #mpage-body #page-body {
    background-color:#f6f6f6
  }

That way it'll only affect the mobile version.

@Ange Tuteur Yes, that works very well. Thank you.

It would be great (if possible) to put them above the who is online list. Then they're more on the right hand side if the forum because of the left column and there they should be centered. Understandable? ^-^ I mean centered between the right hand side of the forum and the left column.

This would do the trick :

Code:

$(function() {
  $('#right').insertBefore($('#how').prev());
});

But you'd need to set the placement to only in the homepage, because it wouldn't work on other pages.

@Ange Tuteur
1. Is it in this case possible that the widgets don't appear in topics and other pages?

2. Another problem: In my forum I had a similiar footer statistic as in support forum, but with a completely different script/ css. I changed to the originally script/ css:

Spoiler:

But the result was that the widgets hadn't been above the who is online list anymore, where they should be. The reason is that you used for the js code in this post #how which isn't there anymore because of changing to originally script/ css. Which id (or class) could I use instead of #how?

3. Another problem through using the above css, especially this part:

Code:

.qeel_title {
        background: #369FCF none repeat scroll 0% 0%;
        color: #FFF;
        font-family: "Trebuchet MS",Arial,Verdana,sans-serif;
        font-size: 16px;
        font-weight: 700;
        padding: 5px 6px;
        text-transform: uppercase;
    }

The toolbar disappears and I get this error:

Code:

TypeError: toolbar.replace is not a function
http://www.schiggysboard.com/99666.js
Line 1

Do you know why?


Also the widget for most hashtagged user doesn't work. Suddenly its content disappeared, there us only a "@". For a short time there was a content. Do you have an idea what's the problem?

Edit: Now the widget works again.

schiggysboard wrote:Also the widget for most hashtagged user doesn't work. Suddenly its content disappeared, there us only a "@". For a short time there was a content. Do you have an idea what's the problem?

It is an issue that was just noticed on teh support forum, too.

1. Install this JS with placement in all the pages

Code:

window.location.pathname != '/' && document.write('<style type="text/css">#right { display:none; }</style>');

2. I suppose you can try replacing the script with this :

Code:

$(function() {
  $('#right').insertBefore($('.linklist:last', '#main-content'));
});

3. CSS cannot affect JavaScripts, so I have no idea why that would cause your toolbar to disappear, unless your installing that CSS in JS codes management -- even then.. I'd review your recently installed JavaScripts, or try disabling JS codes management, because the problem is most likely coming from there.

4. That's Forumotion's problem.

@Ange Tuteur
In principle 1. and 2. work fine, but I have a very strange symptom.

I reload the page and the footer statistic with its new design through queel_title works fine, but the widgets aren't there where thy should be (above the who is online list), the toolbar disappears and the tab menu for categories disappears.

Then I reload the page again without doing anything in my forum and the footer statistic has the normal design, but now the widgets are there where they should be, the toolbar appears again and the tab menu appears again aswell.

Please help me, Ange. It's very strange and confusing and I don't know what the problem could be and whether other users have the same problem or not.