#1

Changing a Fixed Width Theme to a Floating Width Theme - A Tutorial

2013/4/27 13:35 If you're like me you might be finding the width of Xoops themes fixed usually at 900 pixels as annoying given that much of the world is using resolutions up to 1600px wide.

Changing your theme to a variable width theme is simple:

1. Go to your theme subdirectory and open style.css in an editor (notepad, notepad++, etc).
2. Once your .css page is open, scroll down to the section called: #Main { or #MainWidth {
3. in the area: width: 775px; (eg) Change 775px to either 90%, 95% or 98% . And the width will say: width:95%; for example
4. Save the file, clear the site cache and your browser cache and away you go..

The reason why this works quite well is because the templates for visitors, etc, are pretty well created with variable widths and are only being restricted by the #Main { command in the style.css sheet. If not, you may have to do some experimenting with the other widths to get what you want.

#2

Re: Changing a Fixed Width Theme to a Floating Width Theme - A Tutorial

2013/4/27 14:58 Personally all the themes I develloppe now uses the responsive system like that you can determine the size you want

Demo here

#3

Re: Changing a Fixed Width Theme to a Floating Width Theme - A Tutorial

2013/4/27 15:24 That's Good!

But there are a lot of themes in the theme repository that are still fixed width

#4

Re: Changing a Fixed Width Theme to a Floating Width Theme - A Tutorial

2013/4/27 17:27 dear chefry, I advise you to use the theme default to start your own theme, clean it and make it responsive and update the codes to html5.
fixed widh themes suits for forum websites, or games...etc but to make a business theme it's better to fix the width especially if you are using a slider.

#5

Re: Changing a Fixed Width Theme to a Floating Width Theme - A Tutorial

1/31 18:46 I am using the xbootstraps theme and want to fix the width, but I do not see the file that you mentioned.

#6

Re: Changing a Fixed Width Theme to a Floating Width Theme - A Tutorial

2/1 6:39 hi

you have to change your style.css of the theme

bootstrap works with two types of container
1) container-fluid: it will use the full width of your device
look into your theme and change into
2) container: a responsive area with a width depending on device
if yor device has min 1200 px then width of container is 1170px
if yor device has min 992 px then width of container is 970px
and so on
if you want to fix it to your witdh you have to add following lines to your css or your theme:
(to have always 1000px, even if device is smaller) or to keep it responsive to max 1000px

details information you can find on https://getbootstrap.com/docs/3.4/css/

#7

Re: Changing a Fixed Width Theme to a Floating Width Theme - A Tutorial

2/5 1:23 Thank you. I am not very tech savvy and I have searched everywhere. My theme css style sheet does not have a container. I have tried inserting one in various places, including other css files and it has no effect. I am totally frustrated.

#8

Re: Changing a Fixed Width Theme to a Floating Width Theme - A Tutorial

2/5 8:45 you can browse themes.

Xoops Theme Download:

http://erenyumak.com/