Template:Infobox character: Difference between revisions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
<div class="infobox"> | <div class="infobox-wrapper"> | ||
<h2 style="text-align: center;">{{{name| | <div class="content"> | ||
<!-- Bio Introduction and List of Contents go here --> | |||
</div> | |||
<div class="infobox"> | |||
<div class="name-box"> | |||
<h2 style="text-align: center;">{{{name|}}}</h2> | |||
</div> | |||
'''Age:''' {{{age|}}}<br/> | |||
'''Gender:''' {{{gender|}}}<br/> | |||
'''Species:''' {{{species|}}}<br/> | |||
'''Residence:''' {{{residence|}}}<br/> | |||
'''Relatives:''' {{{relatives|}}}<br/> | |||
'''Status:''' {{{status|}}}<br/> | |||
'''Game Stats:''' {{{gamestats|}}} | |||
'''Bio Info:''' {{{bioinfo|}}} | |||
</div> | |||
</div> | </div> | ||
| Line 17: | Line 24: | ||
{{#if: {{{bioinfo|}}} | [[Category:Pages with Bio Info]] }} | {{#if: {{{bioinfo|}}} | [[Category:Pages with Bio Info]] }} | ||
</div> | </div> | ||
In this modified template: | |||
The infobox-wrapper class is used to create a container for both the content and the infobox. | |||
The content class represents the left side of the screen, where you can place your Bio Introduction and List of Contents. | |||
The infobox class contains the infobox content, including the centered "Name" section and the other fields. | |||
With this structure, the infobox will appear on the right side of the screen, and the left side will remain open for your bio introduction and list of contents. You can adjust the width and positioning of the infobox and content areas by using CSS. Here's a basic example of how you might use CSS to position the infobox on the right: | |||
css | |||
Copy code | |||
/* Style the infobox wrapper */ | |||
.infobox-wrapper { | |||
display: flex; | |||
justify-content: flex-end; /* Position infobox to the right */ | |||
align-items: flex-start; | |||
} | |||
/* Style the content on the left */ | |||
.content { | |||
flex: 1; /* Takes up remaining space on the left */ | |||
padding: 10px; /* Add padding as needed */ | |||
} | |||
/* Style the infobox on the right */ | |||
.infobox { | |||
width: 300px; /* Adjust the width as needed */ | |||
padding: 10px; /* Add padding as needed */ | |||
} | |||
/* Style the name-box (centered "Name" section) */ | |||
.name-box { | |||
text-align: center; | |||
} | |||
These CSS rules create a flexible layout where the infobox is positioned to the right, leaving the left side open for your content. Adjust the width and padding values to suit your design preferences. | |||
Revision as of 12:23, 10 October 2023
Age:
Gender:
Species:
Residence:
Relatives:
Status:
Game Stats: Bio Info:
In this modified template:
The infobox-wrapper class is used to create a container for both the content and the infobox.
The content class represents the left side of the screen, where you can place your Bio Introduction and List of Contents.
The infobox class contains the infobox content, including the centered "Name" section and the other fields.
With this structure, the infobox will appear on the right side of the screen, and the left side will remain open for your bio introduction and list of contents. You can adjust the width and positioning of the infobox and content areas by using CSS. Here's a basic example of how you might use CSS to position the infobox on the right:
css Copy code /* Style the infobox wrapper */ .infobox-wrapper {
display: flex; justify-content: flex-end; /* Position infobox to the right */ align-items: flex-start;
}
/* Style the content on the left */ .content {
flex: 1; /* Takes up remaining space on the left */ padding: 10px; /* Add padding as needed */
}
/* Style the infobox on the right */ .infobox {
width: 300px; /* Adjust the width as needed */ padding: 10px; /* Add padding as needed */
}
/* Style the name-box (centered "Name" section) */ .name-box {
text-align: center;
} These CSS rules create a flexible layout where the infobox is positioned to the right, leaving the left side open for your content. Adjust the width and padding values to suit your design preferences.