Ramona (empyreal) wrote in customization, @ 2004-05-15 19:40:00

Content table resize/realign


Generator:




GLOBAL_HEAD<=
<style type="text/css">
<!--
table {
width: 45%;
margin-left: 25%;
margin-right: 25%;
}
/* do NOT change these numbers */
table table {
width: 100%;
margin:0;
}
table table table {
width: auto;
}
-->
</style>
<=GLOBAL_HEAD





The first width percentage controls the size of the text table. The second two percentages control the position. In the above example the text table will fill 45% of the page while keeping the text table centered.
To move the entries to the left you would change the margins to margin-left: 0; margin-right: 50%;
To move the entries to the right change the margins to margin-left: 50%; margin-right: 0%;

Punquin Elegant With Sidebar:





GLOBAL_HEAD<=
<style type="text/css">
<!--
table {
width:80%;
float:right;
}
table table {
width: 100%;
float:none;
}
hr {
width:100%;
}
-->
</style>
<=GLOBAL_HEAD




The width of the text table is controlled by the first percentage (80%) and can be changed to suit your needs. The position of the text table is controlled by the first float, currently set to right. The options are; Right, Left, and center.

Default:





GLOBAL_HEAD<=
<style type="text/css">
<!--
table {
width: 70%;
float: center;
}
table table {
width: 90%;
float: none;
}
-->
</style>
<=GLOBAL_HEAD





The width is controlled by the first percent value (70%) and can be adjusted to suit your needs. The position of the text table is controlled by the first float, currently set to center. The options are right, left and center.




Disjointed:





GLOBAL_HEAD<=
<style type="text/css">
<!--
/* entry table */
td {
text-align: center;
}
/* text within table */
.entries td {
text-align: left;
}
/* table size */
.entries {
width: 85%;
}
-->
</style>
<=GLOBAL_HEAD





The position of the text table is controlled by the first text-align (center;). The options are left, right and center. The alignment of the entries within the text table are controlled by the second text-align left;.
The size of the table is controlled by the width percentage (85%;), and can be changed to suit your needs.

Tabular Indent:





GLOBAL_HEAD<=
<style type="text/css">
<!--
/* change these numbers, must add up to 100%*/
table {
width: 50%;
margin-left: 25%;
margin-right: 25%;
}
/* the value here should be the same as the value used above minus the amount you want the entries indented. The margin-left and margin-right values MUST be the SAME as above.*/
div table {
width: 45%;
margin-left: 25%;
margin-right: 25%;
}
table table {
width: auto;
margin:0;
}
table table table {
width: auto;
}
-->
</style>
<=GLOBAL_HEAD





The first width percentage controls the size of the text table. The second two percentages control the position. In the above example the text table will fill 45% of the page while keeping the text table centered.
To move the entries to the left you would change the margins to margin-left: 0; margin-right: 50%;
To move the entries to the right change the margins to margin-left: 50%; margin-right: 0%;
Note that the margin-left and margin-right values must be exactly the same in the first set section and the second section.

Adjust the indentation by adjusting the percentage in the second half of the override. This number must be the the width of the table as defined in the first half of the coding, minus the amount you want indented.

Refried Paper:

The Refried Paper style is designed to fit the entire screen. As such, to display a background image, you will need to shift the text table to allow the image to be displayed.




GLOBAL_HEAD<=
<style type="text/css">
<!--
body {
background-color: #000000!important;
background-image: url(http://yoururl/yourimage.jpg)!important;
background-attachment: fixed!important;
background-repeat: no-repeat!important;
}
table {
margin-left: 25%;
width: 75%;
}
table table {
margin-left: 0;
width: 100%;
}
-->
</style>
<=GLOBAL_HEAD




You will need to replace the current image URL(http://yoururl/yourimage.jpg) with the URL of where your image is located.
The width of the table (75%) as well as the margin ( 25%) can be changed to suit your needs.

Magazine:




GLOBAL_HEAD<=
<style type="text/css">
<!--
/* numbers MUST equal 96% */
.Bottom, .H3Holder, .Navigation, .Month, H1, H2 {
width: 50%;
margin-left: 23%;
margin-right: 23%;
}
-->
</style>
<=GLOBAL_HEAD





The width of the text table is controlled by the first percentage (width: 50%;). The position of the text table is controlled by the second and third percentages (23%).
All three can be changed to suit your needs. However, the sum of all three percentages must not exceed 96%
Please note, it is not possible to move or remove the stip of color found at the side of the screen.

Note that you should always merge your GLOBAL_HEAD overrides so that they function correctly. Information is available here.

	__twisted 2004-06-12 13:33 (link)
	thanks soo much!! (Reply to this) (Thread)

	auhg. (Anonymous) 2004-08-06 11:42 (link)
	why does the code get rid of my background picture? (Reply to this) (Thread)

	Re: auhg. empyreal 2004-08-06 16:27 (link)
	As stated within the tutorial "Note that you should always merge your GLOBAL_HEAD overrides so that they function correctly. Information on merging overrides can be found here." (Reply to this) (Parent) (Thread)

	Erm.. childoftheblood 2004-09-01 00:24 (link)
	How do I change the height of a text area? Or-- How do I make my entries appear in a box? (Reply to this) (Thread)

	tis_clara 2004-11-28 19:12 (link)
	how can i have margins inside my entries ? rough example: | fggfdgdfg | | asdasdfd | | sdfdsfsdf | my current codes work for my front page and calendar but not on my friends page (it's huge) but i changed the (table table ) to where it had margins from the left and right.... somehow i have from table - to tablex4 instead of 3 (Reply to this) (Thread)

	(Anonymous) 2004-12-31 12:26 (link)
	what about centering that (using tabular indent)? (Reply to this) (Thread)

	violent_storms 2005-01-13 17:19 (link)
	Thankyou sooooo much!! (Reply to this) (Thread)

	lilpris 2005-03-15 03:11 (link)
	woah ur good ^^ thanks so much =P (Reply to this) (Thread)

	star_programs 2005-05-09 14:25 (link)
	Thanks!! I think it's nice that you do this! lauren (Reply to this) (Thread)