• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Help Would someone help with this CS template?

WINCE

your local ditch witch
New to coding. I don't know how to keep the name placed on the same line. Any advice for improvement would be appreciated.

Code:
 [nobr]

[class name=container]
padding-top: 0px;
height:  700px;
width: 500px;
overflow: hidden;
[/class]

[class name=textbox]
height: 100%;
width: 100%;
overflow-y: scroll;
padding-right: 17px;
[/class]

[class name=name]
font-family: 'Lateef';
font-size: 58px;
padding-left: 10px;
letter-spacing: 4px;
[/class]

[div=position: relative; top: 0px; left: 250px;][div=width:480px; height:700px; background-image: url('Image here'); background-size: 100%;  float: left; margin-right: 20px;][/div] [/div][div=position: relative; top: 0px; left: 250px;][/div][/nobr][div=position: relative; top: 0px; left: 250px;][div class=container][div class=name]Whatnow Browncow[/div][div class=textbox][div=font-family: "Lateef"; font-size: 25px;]Basics[/div]
Age:
Text on this line
Occupation:
Text on this line
Race:
Text on this line
             
[div=font-family: "Lateef"; font-size: 25px;]Appearance[/div][FONT=verdana] Text on this line [div=font-family: "Lateef"; font-size: 25px;]Personality[/div] Text on this line [/FONT] [div=font-family: "Lateef"; font-size: 25px;]History[/div] Text on this line
[/div][/div][/div]
 
[class name=container] padding-top: 0px; height: 700px; width: 500px; overflow: hidden; [/class] [class name=textbox] height: 100%; width: 100%; overflow-y: scroll; padding-right: 17px; [/class] [class name=name] font-family: 'Lateef'; font-size: 58px; padding-left: 10px; letter-spacing: 4px; [/class]
[div class=container][div class=name]Whatnow Browncow
[div class=textbox]
Basics

Age:
Text on this line
Occupation:
Text on this line
Race:
Text on this line

Appearance
Text on this line
Personality
Text on this line
History
Text on this line
[/div][/div][/div]
 
So it looks like you might have some extra divs in there as a result of using the RTE. Do you want your character sheet to be that far to the left of your post? Or were you trying to make in centered?
 
So it looks like you might have some extra divs in there as a result of using the RTE. Do you want your character sheet to be that far to the left of your post? Or were you trying to make in centered?

Yeah, I'm going for a centered template. With an image inserted on the left *and the boxes filled with text, it looks balanced out to me.
 
Last edited:
So the issue is simply that, with the size you specified for the name, the size you specified for the enclosing div, and the length of the name itself, you're exceeding the width of the div. So to fix it, you can either
-make the font for the title smaller
-have a shorter name
-make the div bigger
(Or some combination of these 3)
I cleaned up the code a little and added borders just so it would be easier to see what I'm talking about
Code:
[nobr]

[class name=container]
border: 2px solid #000000;
padding-top: 0px;
height:  700px;
width: 500px;
overflow: hidden;
[/class]

[class name=textbox]
height: 100%;
width: 100%;
overflow-y: scroll;
padding-right: 17px;
[/class]

[class name=name]
font-family: 'Lateef';
font-size: 58px;
padding-left: 10px;
letter-spacing: 4px;
[/class]

[/nobr]
[div=position: relative; top: 0px; left: 150px;][div=border: 2px solid #000000; width:480px; height:700px; background-image: url('Image here'); background-size: 100%;  float: left; margin-right: 20px;][/div][div class=container][div class=name]Whatnow Browncow[/div][div class=textbox][div=font-family: "Lateef"; font-size: 25px;]Basics[/div]
Age:
Text on this line
Occupation:
Text on this line
Race:
Text on this line
             
[div=font-family: "Lateef"; font-size: 25px;]Appearance[/div][FONT=verdana] Text on this line [div=font-family: "Lateef"; font-size: 25px;]Personality[/div] Text on this line [/FONT] [div=font-family: "Lateef"; font-size: 25px;]History[/div] Text on this line[/div][/div][/div]
Hope that helps!
 
With the borders, I can definitely see what you mean! Thanks for the help.

Bonus question: For practicality, could script be used to auto-adjust the text-size according to the length of the name? How would I go about doing that?
 
With the borders, I can definitely see what you mean! Thanks for the help.

Bonus question: For practicality, could script be used to auto-adjust the text-size according to the length of the name? How would I go about doing that?
No problem- glad I could help!
As for that, I'm not sure since I've never seen it done before.
My only idea would be that it might be possible to write a script for it, but I'm not sure how elaborate those can get in BBCode.
Honestly, I suspect it would be too complicated to be worth it, compared to formatting the character sheet to accept a typical-sized name.
 
So you can use the property white-space: nowrap; to prevent it from dropping to the next line.

As for auto sizing the font size in relation to the text length, it can be done, but as Ayama Ayama says, it'd be quite complicated.

Due to the way bbscript works currently, you'd need to have precoded the possible font-sizes into a separate class. The script will gettext the name, measure the length, and determine which class to add. Unfortunately you'd start to have sloppy coding with something like, as you need more and more classes for more and more different size, sizes which might not even work on a different device.

Another way I can think of is performing a roundabout recursive CSS addition by add more and more divs into the name div, but that's just painful and can easily slow down any device. Again, same problems of working across different devices.
 
So, I improved the code
[class name=wrapper] display: flex; flex-direction: row; justify-content: center; [/class] [class name=imgdiv] border: 1px solid #000000; min-width:480px; max-width: 100% min-height:700px; float: left; margin-right: 10px; background-image: url('http://1.bp.blogspot.com/_msExC59YLQ0/TCVqDbfoVAI/AAAAAAAAAQ8/t4-QAxQdOxY/s1600/35sPMv2D.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; [/class] [class name=infodiv] border: 1px solid #000000; padding-left: 10px; padding-bottom: 13px; height: 700px; max-width: 500px; overflow: hidden; [/class] [class name=scrollbox] height: 100%; width: 100%; padding-right: 17px; overflow-y: scroll; [/class] [class name=name] font-family: 'Lateef'; font-size: 58px; font-weight: 530; letter-spacing: 3px; text-align: center; [/class] [class name=maintxt] font-family: 'Lateef'; font-size: 25px; font-weight: 530; margin-top: 6px; margin-bottom: -2px; [/class] [class name=txtwrap] font-family: 'Verdana'; margin-left: 3px; [/class] [div class=wrapper] [div class=imgdiv][/div] [div class=infodiv] [div class=scrollbox] [div class=name]Donald the Duck[/div] [div class=maintxt]Basics[/div] [div class=txtwrap] (Age) | (Occupation) | (Race) | (Etc.) [/div] [div class=maintxt]Appearance[/div][div class=txtwrap] Neque condimentum cursus scelerisque ut augue velit augue phasellus aenean nulla litora tempor. Neque condimentum cursus scelerisque ut augue velit augue phasellus aenean nulla litora tempor. Neque condimentum cursus scelerisque ut augue velit augue phasellus aenean nulla litora tempor. Neque condimentum cursus scelerisque ut augue velit augue phasellus aenean nulla litora tempor. [/div] [div class=maintxt]Personality[/div][div class=txtwrap] Neque condimentum cursus scelerisque ut augue velit augue phasellus aenean nulla litora tempor. Neque condimentum cursus scelerisque ut augue velit augue phasellus aenean nulla litora tempor. [/div] [div class=maintxt]History[/div][div class=txtwrap] Neque condimentum cursus scelerisque ut augue velit augue phasellus aenean nulla litora tempor. Neque condimentum cursus scelerisque ut augue velit augue phasellus aenean nulla litora tempor. Porta etiam laoreet mattis quam ad volutpat proin sagittis erat suscipit aliquet platea, scelerisque habitasse hendrerit etiam consectetur suspendisse mauris purus porttitor vestibulum nostra elit rhoncus aenean lacus varius proin purus praesent maecenas, placerat etiam tristique dapibus vulputate ornare quisque volutpat, pharetra ullamcorper eros tristique eu senectus quisque. [/div][/div][/div][/div]

Code:
[nobr]

[class name=wrapper]
display: flex;
flex-direction: row;
justify-content: center;
[/class]

[class name=imgdiv]
border: 1px solid #000000;
min-width:480px;
max-width: 100%
min-height:700px;
float: left;
margin-right: 10px;
background-image: url('http://1.bp.blogspot.com/_msExC59YLQ0/TCVqDbfoVAI/AAAAAAAAAQ8/t4-QAxQdOxY/s1600/35sPMv2D.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
[/class]

[class name=infodiv]
border: 1px solid #000000;
padding-left: 10px;
padding-bottom: 13px;
height:  700px;
max-width: 500px;
overflow: hidden;
[/class]

[class name=scrollbox]
height: 100%;
width: 100%;
padding-right: 17px;
overflow-y: scroll;
[/class]

[class name=name]
font-family: 'Lateef';
font-size: 58px;
font-weight: 530;
letter-spacing: 3px;
text-align: center;
[/class]

[class name=maintxt]
font-family: 'Lateef';
font-size: 25px;
font-weight: 530;
margin-top: 6px;
margin-bottom: -2px;
[/class]

[class name=txtwrap]
font-family: 'Verdana';
margin-left: 3px;
[/class]

[div class=wrapper]
[div class=imgdiv][/div]
[div class=infodiv]
[div class=scrollbox]
[div class=name]Donald the Duck[/div]

[div class=maintxt]Basics[/div] [div class=txtwrap]
(Age) | (Occupation) | (Race) | (Etc.)

[/div]
[div class=maintxt]Appearance[/div][div class=txtwrap]
Neque condimentum cursus scelerisque ut augue velit augue phasellus aenean nulla litora tempor. Neque condimentum cursus scelerisque ut augue velit augue phasellus aenean nulla litora tempor. Neque condimentum cursus scelerisque ut augue velit augue phasellus aenean nulla litora tempor. Neque condimentum cursus scelerisque ut augue velit augue phasellus aenean nulla litora tempor.

[/div]
[div class=maintxt]Personality[/div][div class=txtwrap]
Neque condimentum cursus scelerisque ut augue velit augue phasellus aenean nulla litora tempor. Neque condimentum cursus scelerisque ut augue velit augue phasellus aenean nulla litora tempor.

[/div]
[div class=maintxt]History[/div][div class=txtwrap]
Neque condimentum cursus scelerisque ut augue velit augue phasellus aenean nulla litora tempor. Neque condimentum cursus scelerisque ut augue velit augue phasellus aenean nulla litora tempor. Porta etiam laoreet mattis quam ad volutpat proin sagittis erat suscipit aliquet platea, scelerisque habitasse hendrerit etiam consectetur suspendisse mauris purus porttitor vestibulum nostra elit rhoncus aenean lacus varius proin purus praesent maecenas, placerat etiam tristique dapibus vulputate ornare quisque volutpat, pharetra ullamcorper eros tristique eu senectus quisque.

[/div][/div][/div][/div]
[/nobr]
 

Users who are viewing this thread

Back
Top