e107help.org Q&A
0 like 0 dislike
I am using the impressive BS Gaming 01 theme on my e107 version 2.1.9 website, which I have modified slightly with css and the like to get it to fit the theme of my tabletop game website a little better. It comes with a full-width layout and a sidebar-left layout. Of the two I tend to favor the sidebar left so that I can have a place to put some important menu things.

However, when viewing the site via a smaller display such as a smart phone, the stuff on the sidebar-left menu is displayed first causing a lot of scrolling to get to what is important. This can cause an issue when you go to load the book "wiki" pages since there's no real evidence of a new screen loading. If you don't decide to scroll down, you'd never know you were on a new page at all. IMO this is problemsome.

I think that the best fix to get the menus I need and to handle this would be to have a sidebar-right layout, since the stuff in sidebar-right should load after the main content in a bootstrap website. However I've looked through all of the theme php and css files and see no real way of doing this. I have played with it trying to call upon my rusty knowledge on web programming to make this work, and I still can't seem to get the main content and sidebar right locations to switch spaces.

So, I figure why not come here and ask you great people? Does any of you know a way to do this? While I'd be grateful for someone to do this for me, I'd rather be walked through the process myself so that I can also increase my knowledge on how to do this - so bonus points for the kind programming god willing to lend this meer mortal his or her guideance.
e107 version 2.1.9
in Themes by (69 points) 1 5 7
edited by

1 Answer

1 like 0 dislike
Best answer
Each theme has some author, Fizi is still active.

You have almost unlimited options how to do this. Just out of head:

- you can add new layout with sidebar on right  - in theme.xml and theme.php

- you can change sidebar layout in theme.php (there are 2 columns, just switch them)

- you can add classes to sidebar right what change order of columns on mobiles (it's native bootstrap thing, look for push and pull)
by (1.8k points) 14 44 56
selected by
Thanks, I'll look at this in more detail.

I'll check out the bootstrap method first. That seems to be the easier way to get it done. I've already tried switching the columns and obviously have failed, so I'll have to look more into that to see why I failed.

I solved it here, it wasn't so easy as I thought it would be, so I noted this.  I will use it probably in my themes too. I don't know, I prefer on mobiles to have sidebars slide in on buttons, but after I did it in one theme, there was some devices where it didn't work. So maybe this is better aproach.




Hi Jimako, your fix solved my issue thanks!

I did have to make a small change though to your code to make it work. I had to change all of your " to '. Basically I had to change things like...

div class="content-topwrapper"


div class='content-topwrapper'

The double quote instead of the single quote was causing a white screen of death. Just thought I'd let you know.

Thanks again for helping me to figure this out! This will greatly improve the experience for my mobile visitors!
Thank you. It's weird, maybe it was caused by copying code ...  if I had made that mistake, I would get blank page too. I fixed it now in forum by changing first set of ', but now it lost colouring. I can look at it on Monday and I will try to insert working code in forum again...  I really appreciate that you let me know.
Welcome to e107 Q&A, where you can ask questions and receive answers from other members of the e107 community.
912 questions
1,311 answers
2,285 users