Auto Fixed Width?

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Ideas Centre
Locked
danswano
Registered User
Posts: 273
Joined: Sun Apr 06, 2008 10:43 pm

Auto Fixed Width?

Post by danswano » Thu Sep 04, 2008 7:25 pm

Hello everyone, i've applied the fixed width mod with borders from here http://forum.phpbbservice.nl/viewtopic. ... 005#p17013

But i i want it to be auto fixed width when you change resolution or resize window like neowin forums here: http://www.neowin.net/forum/index.php

What should i add to my template ?

User avatar
TheIlluminative
Former Team Member
Posts: 2451
Joined: Thu Jun 26, 2003 11:34 pm
Location: Egypt
Name: Mahmoud
Contact:

Re: Auto Fixed Width?

Post by TheIlluminative » Thu Sep 04, 2008 7:32 pm

You need to make it a percentage width, something like:

Code: Select all

width: 90%;

danswano
Registered User
Posts: 273
Joined: Sun Apr 06, 2008 10:43 pm

Re: Auto Fixed Width?

Post by danswano » Thu Sep 04, 2008 7:41 pm

I did that but it expanded the background only:

this my css code of the applied rounded corners mod

Code: Select all

/* additional proSilver Markup Styles outside rouded
----------------------------------------------------------- */
.top-left, .top-right, .bottom-left, .bottom-right { 
   height: 20px;       /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
   weidth: 20px;       /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
   font-size: 2px;    /* DNC: correction IE for height of the <div>'s */
   }
   
.top-left { 
   background-image: url("{T_THEME_PATH}/images/corners_top.gif"); background-repeat:no-repeat; /* CHANGE: path and name of your image */
   background-position: 0 -20px; /* CHANGE: replace second number by negative height of one of your corners */
   margin-left: 1px;  /* CHANGE: replace by the width of one of your corners */
   margin-top: 0px;  /* CHANGE: replace by the height of one of your corners */
   margin-right: 9px; /* CHANGE: replace by the width of one of your corners */
   }
.top-right { 
   background-image: url("{T_THEME_PATH}/images/corners_top.gif"); background-repeat:no-repeat; /* CHANGE: path and name of your image */
   background-position: 100% 0;    /* DNC: position right corner at right side, no vertical changes */
   margin-left: 0px;  /* CHANGE: replace by the width of one of your corners */
   margin-top: -9px;  /* CHANGE: replace by the height of one of your corners */
   margin-right: 1px; /* CHANGE: replace by the width of one of your corners */   
   }
.top-center { 
   background-image: url("{T_THEME_PATH}/images/bg_headers.gif"); /* CHANGE: path and name of your image */
   background-position: 0 0px; /* CHANGE: replace second number by negative height of one of your corners */
   height: 20px;       /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
   weidth: 20px;       /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
   font-size: 2px;    /* DNC: correction IE for height of the <div>'s */
   margin-left: 20px;  /* CHANGE: replace by the width of one of your corners */
   margin-top: -20px;  /* CHANGE: replace by the height of one of your corners */
   margin-right: 20px; /* CHANGE: replace by the width of one of your corners */ 
   margin-bottom: -20px; /* CHANGE: replace by the width of one of your corners */ 
   }
   
.bottom-left  { 
   background-image: url("{T_THEME_PATH}/images/corners_bottom.gif"); background-repeat:no-repeat; /* CHANGE: path and name of your image */
   background-position: 0 0px; /* CHANGE: replace second number by negative height of one of your corners */
   margin-right: 0px; /* CHANGE: replace by the width of one of your corners */
   margin-left: 1px;  /* CHANGE: replace by the width of one of your corners */
   margin-top: 0px;  /* CHANGE: replace by the height of one of your corners */
   }
.bottom-right { 
   background-image: url("{T_THEME_PATH}/images/corners_bottom.gif"); background-repeat:no-repeat; /* CHANGE: path and name of your image */
   background-position: 100% -20px; /* CHANGE: replace second number by negative height of one of your corners */
   margin-right: 1px; /* CHANGE: replace by the width of one of your corners */
   margin-left: 0px;  /* CHANGE: replace by the width of one of your corners */
   margin-top: -20px;  /* CHANGE: replace by the height of one of your corners */
   }
.bottom-center { 
   background-image: url("{T_THEME_PATH}/images/bg_footers.gif"); /* CHANGE: path and name of your image */
   background-position: 0 0px; /* CHANGE: replace second number by negative height of one of your corners */
   height: 20px;       /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
   weidth: 20px;       /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
   font-size: 2px;    /* DNC: correction IE for height of the <div>'s */
   margin-left: 20px;  /* CHANGE: replace by the width of one of your corners */
   margin-top: -20px;  /* CHANGE: replace by the height of one of your corners */
   margin-right: 20px; /* CHANGE: replace by the width of one of your corners */ 
   margin-bottom: -20px; /* CHANGE: replace by the width of one of your corners */ 
   }

.inside {
   border-left: 0px solid #000000; /* YCC: color & properties of the left-borderline */
   border-right: 0px solid #000000;/* YCC: color & properties of the right-borderline */
   background: #FFFFFF;            /* YCC: background-color of the inside */
   color: #000000;                 /* YCC: default text-color of the inside */
   padding-left: 0px;              /* YCC: all texts at some distance of the left border */
   padding-right: 0px;             /* YCC: all texts at some distance of the right border */
   background-image: url("{T_THEME_PATH}/images/bg_body.gif"); /* CHANGE: path and name of your image */
   }
   
.notopgap    { margin-top: 0; }    /* DNC: to avoid splitting of the box */
.nobottomgap { margin-bottom: 0; } /* DNC: to avoid splitting of the box */

.outside {
   margin: 0 auto;
   width : 950px;
   }
When i change anything here it only change the outside
.outside {
margin: 0 auto;
width : 950px;
}


What should i do ?

User avatar
TheIlluminative
Former Team Member
Posts: 2451
Joined: Thu Jun 26, 2003 11:34 pm
Location: Egypt
Name: Mahmoud
Contact:

Re: Auto Fixed Width?

Post by TheIlluminative » Thu Sep 04, 2008 8:08 pm

Edit the #wrap in common.css

User avatar
RATT
Registered User
Posts: 734
Joined: Fri Aug 19, 2005 6:27 am

Re: Auto Fixed Width?

Post by RATT » Fri Sep 05, 2008 6:49 am

You can also borrow an include in your template files borrowed from Mighty Gorgon using his _mg_config.html file which can be used to define a forum wide fixed width along with pre-defined vars that you specify.

Code: Select all

<!-- IF $MG_CONFIG_SWITCH -->
To use these vars you need to include this file in overall header using the
INCLUDE function and then you are able to recall the vars using this syntax:
{$MG_TBL_H_L}
<!-- ENDIF -->

<!-- DEFINE $MG_GLOBAL_WIDTH = '960px' -->
<!-- DEFINE $MG_BUTTONS_EXTENSION = 'png' -->
<!-- DEFINE $MG_TBL_H_L = '<div><div class="tbl-h-l"><div class="tbl-h-r"><div class="tbl-h-c"><div class="tbl-title">' -->
<!-- DEFINE $MG_TBL_H_R = '</div></div></div></div>' -->
<!-- DEFINE $MG_TBL_F_L = '<div class="tbl-f-l"><div class="tbl-f-r"><div class="tbl-f-c">&nbsp;' -->
<!-- DEFINE $MG_TBL_F_R = '</div></div></div></div>' -->
<!-- DEFINE $MG_SPACER = '<img src="{T_THEME_PATH}/images/spacer.gif" width="1" height="4" alt="" />' -->
<!-- DEFINE $MG_MAX = '/images/icon_maximize.gif' -->
<!-- DEFINE $MG_MIN = '/images/icon_minimize.gif' -->
<!-- DEFINE $MG_MAX_PNG = '/images/icon_maximize.png' -->
<!-- DEFINE $MG_MIN_PNG = '/images/icon_minimize.png' -->
Add this code

Code: Select all

<!-- INCLUDE _mg_config.html -->
to your overall_header.html file if using this making sure also to give MG credit in your footer credits please.
Ofcourse you would replace all of the vars above to match your image, table, div coding etc.. to match that of your template to call the vars to work properly.

Locked

Return to “[3.0.x] Styles Support & Discussion”

cron