xoops forums

chefry

Home away from home
Posted on: 2013/4/27 13:35
chefry
chefry (Show more)
Home away from home
Posts: 1005
Since: 2006/10/14
#1

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

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.

tatane

Just can't stay away
Posted on: 2013/4/27 14:58
tatane
tatane (Show more)
Just can't stay away
Posts: 649
Since: 2008/5/6 1
#2

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

Personally all the themes I develloppe now uses the responsive system like that you can determine the size you want

Demo here

chefry

Home away from home
Posted on: 2013/4/27 15:24
chefry
chefry (Show more)
Home away from home
Posts: 1005
Since: 2006/10/14
#3

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

That's Good!

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

mariane

Theme Designer
Posted on: 2013/4/27 17:27
mariane
mariane (Show more)
Theme Designer
Posts: 649
Since: 2008/1/11
#4

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

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.

inhymnco

Just popping in
Posted on: 1/31 18:46
inhymnco
inhymnco (Show more)
Just popping in
Posts: 2
Since: 1/31 18:28
#5

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

I am using the xbootstraps theme and want to fix the width, but I do not see the file that you mentioned.

goffy

Quite a regular
Posted on: 2/1 6:39
goffy
goffy (Show more)
Quite a regular
Posts: 358
Since: 2010/12/27
#6

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

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
div class="container"
into
div class="container-fluid"

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:
.container {
    
width1000px !important;
}
(to have always 1000px, even if device is smaller) or
.container {
    
max-width1000px !important;
}
to keep it responsive to max 1000px

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

inhymnco

Just popping in
Posted on: 2/5 1:23
inhymnco
inhymnco (Show more)
Just popping in
Posts: 2
Since: 1/31 18:28
#7

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

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.

heyula

Theme Designer
Posted on: 2/5 8:45
heyula
heyula (Show more)
Theme Designer
Posts: 467
Since: 2008/4/24
#8

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

you can browse themes.

Xoops Theme Download:

http://erenyumak.com/