Home » Public Forums » FUforum Responsive DESIGN  » Responsive Design for FUDforum with Bootstrap
Show: Today's Messages :: Show Polls :: Message Navigator
Switch to threaded view of this topic Create a new topic Submit Reply
Responsive Design for FUDforum with Bootstrap [message #6] :: Tue, 16 August 2016 21:13 Go to next message
Fudforum like most forums was created at a time when most peoplewhere happy to have a PC to approach internet.

Now more than 50% of people use the internet with their mobile phone.

Time to rethink.

Bootstrap was developed by Twitter, but has been relased as open source supplying now many websites with a stable framewrok for "responsive design"

Using Bootsrap with FUDforum

At a first glance it looks like 2 worlds, but there are bridges to be used.

1. Put bootstrap (http://getbootstrap.com/) in your forum directoy, I used /bt for it.
- bt/css
- bt/fonts
- bt/js

2. Think about your layout.
a) Size of forum
In the past it was one big table with columns
This does not fit into a mobile
So here I decided to reduce the forum-lists to 2 columns, which enhances flexibility

b) Additional columns left and right
The User Control panel on left or right side?
Top postings-list left or right?
Now you can add columns with ease !

The basic layout is simple

<div class="container-fluid">
<!-- LEFT column   -->
<div class="col-md-2 hidden-xs hidden-sm">
<!-- LEFT column   -->
</div >
<div class="col-md-8">
FUDFORUM  as such
</div >
<div class="col-md-2 hidden-xs hidden-sm">
<!-- RIGHT column   -->
</div >

col-md-* defines the number of virtual columns in a grid of 12
hidden-xs (extra small) and hidden-sm (small) will delete the columns on small devices

[Updated on: Thu, 18 August 2016 19:51]

Report message to a moderator

 Send a private message to this user  
The safe way with FUDforum [message #7 is a reply to message #6] :: Tue, 16 August 2016 21:33 Go to previous message
The safe way with FUDforum

Fudforum as a higly sophisticated templeting system, I admit I do not understand every part of it.

But it helps to work very efficient and to offer a number of different themes with ease.

There is a short description in fudforum.org:
http://fudforum.org/forum/index.php?t=msg&th=118098& start=0&

but wait ....

First understand how Fudforum works:
- You create a theme called "xyz"
- You give this theme a directory (template-set) to start with

And now the important thing:
- Fudforum works on "first-come first-served basis", that mean if you define something its done and will override everything coming later

What does this mean in practical terms:

- I start using a directory called "myths", which does contain
a) the content of path_info
b) just forum.css.tmpl
c) /i18n with (important) your buttons in the directories below

- There is a file called ".theme.ini", it gives a direction where FUDforum should look ... so I changed this from "default" to "btdef" (bootstrap definition)

- A second directory is called then /btdef, containing my changed .tmpl, and as well a .theme.ini file, where "based_on=default" is shown.

So the path is clearly defined.

Why this?
- if there is an update it will limit your work mainly to check the files in /btdef
- you can direct several themes to /btdef, so adding a new template with just changing forum.css

The advantage: You have ONE template to change ... and all your themes will changes accordingly

Its a bit like "Zengarden", the nice old style of working with CSS

[Updated on: Thu, 18 August 2016 19:54]

Report message to a moderator

 Send a private message to this user  
Switch to threaded view of this topic Create a new topic Submit Reply
Goto Forum:

Right Side 1

You can use this space, or you can delete this column. Its easy
Currently we have 12 columns
- 2 left
- 8 center
- 2 right
in Total 12

so deleting right column and changing main column to col-md-10 would give more space

Right Side 2