1
chefry
Changing a Fixed Width Theme to a Floating Width Theme - A Tutorial
  • 2013/4/27 13:35

  • chefry

  • Home away from home

  • Posts: 1005

  • Since: 2006/10/14


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
tatane
Re: Changing a Fixed Width Theme to a Floating Width Theme - A Tutorial
  • 2013/4/27 14:58

  • tatane

  • Just can't stay away

  • Posts: 649

  • Since: 2008/5/6 1


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

Demo here

3
chefry
Re: Changing a Fixed Width Theme to a Floating Width Theme - A Tutorial
  • 2013/4/27 15:24

  • chefry

  • Home away from home

  • Posts: 1005

  • Since: 2006/10/14


That's Good!

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

4
mariane
Re: Changing a Fixed Width Theme to a Floating Width Theme - A Tutorial
  • 2013/4/27 17:27

  • mariane

  • Theme Designer

  • Posts: 649

  • Since: 2008/1/11


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
inhymnco
Re: Changing a Fixed Width Theme to a Floating Width Theme - A Tutorial
  • 2019/1/31 18:46

  • inhymnco

  • Just popping in

  • Posts: 2

  • Since: 2019/1/31


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

6
goffy
Re: Changing a Fixed Width Theme to a Floating Width Theme - A Tutorial
  • 2019/2/1 6:39

  • goffy

  • Just can't stay away

  • Posts: 542

  • Since: 2010/12/27


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/

7
inhymnco
Re: Changing a Fixed Width Theme to a Floating Width Theme - A Tutorial
  • 2019/2/5 1:23

  • inhymnco

  • Just popping in

  • Posts: 2

  • Since: 2019/1/31


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
heyula
Re: Changing a Fixed Width Theme to a Floating Width Theme - A Tutorial
  • 2019/2/5 8:45

  • heyula

  • Theme Designer

  • Posts: 596

  • Since: 2008/4/24


you can browse themes.

Xoops Theme Download:

http://erenyumak.com/

Login

Who's Online

177 user(s) are online (107 user(s) are browsing Support Forums)


Members: 0


Guests: 177


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Nov 30
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits