• 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 Trying to Make Info Cards For an HP

KageYuuki

KageYuuki

(╯°□°)╯︵ ┻━┻
Roleplay Type(s)
Thanks to tutorials by IctoraPost IctoraPost I was able to get this far. But getting everything to look more on the 'official' side is proving difficult. Let alone getting it to format uniformly across desktop and mobile. In a PM it actually looks like a card. In a normal thread, it's really wide with too much blank space. Mobile's just a disaster.

Any thoughts on cleaning it up would be appreciated. Hell, even any suggestions to give it a more official look would be appreciated too.



61ptS6j.png

Yuuki Uchiha
Rank: Chuunin
Squad: 4
Chakra Nature:
86fJ5d1.png]

c2698802060c6aba145cae92ac52eec4bbc439cd.png




Missions Completed:
S Rank:
A Rank: 1
B Rank: 1
C Rank: 1
D Rank:

unknown.png



Code: 
[div=padding: 12px; border: 10px solid #74a36d; background-color: #FFF3C3; border-radius: 50px;]

[CENTER][heightrestrict=100][IMG]https://imgur.com/61ptS6j.png[/IMG][/heightrestrict][/CENTER]

[div=float: left;  font-size: 20px;]Yuuki Uchiha
Rank: Chuunin
Squad: 4
Chakra Nature: [heightrestrict=45][IMG]https://imgur.com/86fJ5d1.png][/IMG][/heightrestrict][/div]
[RIGHT][heightrestrict=200][IMG]http://safebooru.org//images/1354/c2698802060c6aba145cae92ac52eec4bbc439cd.png[/IMG][/heightrestrict][/RIGHT]




[div=float: right]Missions Completed:
S Rank:
A Rank: 1
B Rank: 1
C Rank: 1
D Rank: [/div]
[LEFT][heightrestrict=250][IMG]https://cdn.discordapp.com/attachments/213127944346796033/401640254966071297/unknown.png[/IMG][/heightrestrict][/LEFT]

[/div]
 
How were you trying to make it look like a card? Have you created a rough image template?
 
Basically following the format that actually appeared in the series. Albeit loosely due to lack of BBCode skills.

Lee_Info_Card.png


While I could make it in Photoshop easily enough, I thought a BBCode version would be easier to update as the roleplay went on.
 
KageYuuki said:
Basically following the format that actually appeared in the series. Albeit loosely due to lack of BBCode skills.

Lee_Info_Card.png


While I could make it in Photoshop easily enough, I thought a BBCode version would be easier to update as the roleplay went on.
Click to expand...
The thing with mobile is that it's roughly 300px wide, so unless you code flexibly enough to accommodate that restriction, it'll look off on mobile.



61ptS6j.png
Yuuki Uchiha
Rank: Chuunin
Squad: 4
Chakra Nature:
86fJ5d1.png]

c2698802060c6aba145cae92ac52eec4bbc439cd.png

unknown.png
Missions Completed:
S Rank:
A Rank: 1
B Rank: 1
C Rank: 1
D Rank:





61ptS6j.png
Yuuki Uchiha
Rank: Chuunin
Squad: 4
Chakra Nature:
86fJ5d1.png]

c2698802060c6aba145cae92ac52eec4bbc439cd.png

unknown.png
Missions Completed:
S Rank:
A Rank: 1
B Rank: 1
C Rank: 1
D Rank:


Not the best edit, but it was quick X3
 
Fyuri said:
The thing with mobile is that it's roughly 300px wide, so unless you code flexibly enough to accommodate that restriction, it'll look off on mobile.



61ptS6j.png
Yuuki Uchiha
Rank: Chuunin
Squad: 4
Chakra Nature:
86fJ5d1.png]

c2698802060c6aba145cae92ac52eec4bbc439cd.png

unknown.png
Missions Completed:
S Rank:
A Rank: 1
B Rank: 1
C Rank: 1
D Rank:





61ptS6j.png
Yuuki Uchiha
Rank: Chuunin
Squad: 4
Chakra Nature:
86fJ5d1.png]

c2698802060c6aba145cae92ac52eec4bbc439cd.png

unknown.png
Missions Completed:
S Rank:
A Rank: 1
B Rank: 1
C Rank: 1
D Rank:


Not the best edit, but it was quick X3
Click to expand...

Looking better than what I managed! It not working on mobile isn't the end of the world by any means. Is there a way to tell the div boxes inside the main one to resize themselves accordingly or do their widths need to be set manually?
 
KageYuuki said:
Looking better than what I managed! It not working on mobile isn't the end of the world by any means. Is there a way to tell the div boxes inside the main one to resize themselves accordingly or do their widths need to be set manually?
Click to expand...
You'd have to set them with what you want them to be, otherwise they respond to the parent div. I used only left floats, which works well enough. Once you have a set width, they can "pop" under each other. I'd say play around and experiment to see. I don't know what your ultimate plan is, only you do. ;3
 
Fyuri said:
You'd have to set them with what you want them to be, otherwise they respond to the parent div. I used only left floats, which works well enough. Once you have a set width, they can "pop" under each other. I'd say play around and experiment to see. I don't know what your ultimate plan is, only you do. ;3
Click to expand...
Gotcha, I'll play around with it a bit more, see what I can get out of it. Back to Ictora's div box guide, I guess! xD
 
A little progress has been made. But is there any way to get the faceclaim image to line up with the first block of text?



61ptS6j.png

Yuuki Uchiha
Rank: Chuunin
Squad: 4
Chakra Nature:
86fJ5d1.png]


c2698802060c6aba145cae92ac52eec4bbc439cd.png


rOJSQyq.png

Missions Completed:
S Rank:
A Rank: 1
B Rank: 1
C Rank: 1
D Rank:





Code: 
[div=max-width:400px; padding: 12px; border: 10px solid #62a77c; background-color: #FFF3C3; border-radius: 10px;]

[center][heightrestrict=100][IMG]https://imgur.com/61ptS6j.png[/IMG][/heightrestrict][/center] 

[div=float: left;  font-size: 20px;]Yuuki Uchiha
Rank: Chuunin
Squad: 4
Chakra Nature: [heightrestrict=45][IMG]https://imgur.com/86fJ5d1.png][/IMG][/heightrestrict][/div]

[RIGHT][heightrestrict=200][IMG]http://safebooru.org//images/1354/c2698802060c6aba145cae92ac52eec4bbc439cd.png[/IMG][/heightrestrict][/RIGHT]


[div=float:left;max-width:200px;][IMG]https://imgur.com/rOJSQyq.png[/IMG][/div]
[div=font-size: 12px;]Missions Completed:
S Rank:
A Rank: 1
B Rank: 1
C Rank: 1
D Rank:[/div]



[/div]
 

61ptS6j.png
Yuuki Uchiha
Rank: Chuunin
Squad: 4
Chakra Nature:
86fJ5d1.png]
c2698802060c6aba145cae92ac52eec4bbc439cd.png


rOJSQyq.png

Missions Completed:
S Rank:
A Rank: 1
B Rank: 1
C Rank: 1
D Rank:






You had too many line breaks.
 
Fyuri said:

61ptS6j.png
Yuuki Uchiha
Rank: Chuunin
Squad: 4
Chakra Nature:
86fJ5d1.png]

c2698802060c6aba145cae92ac52eec4bbc439cd.png


rOJSQyq.png

Missions Completed:
S Rank:
A Rank: 1
B Rank: 1
C Rank: 1
D Rank:






You had too many line breaks.
Click to expand...
So I copypasted what you did into my private workshop and they're unaligned again... Screenshot 2018-01-13 20.18.52.png
 
Do you have RTE on?
 
It could also be because you are using a different theme.
 
Code: 
[div=max-width:400px; padding: 12px; border: 10px solid #62a77c; background-color: #FFF3C3; border-radius: 10px;]
[center][heightrestrict=100][IMG]https://imgur.com/61ptS6j.png[/IMG][/heightrestrict][/center] [div=float: left;  font-size: 20px;]Yuuki Uchiha
Rank: Chuunin
Squad: 4
Chakra Nature: [heightrestrict=45][IMG]https://imgur.com/86fJ5d1.png][/IMG][/heightrestrict][/div][RIGHT][heightrestrict=200][IMG]http://safebooru.org//images/1354/c2698802060c6aba145cae92ac52eec4bbc439cd.png[/IMG][/heightrestrict][/RIGHT]


[div=float:left;max-width:200px;][IMG]https://imgur.com/rOJSQyq.png[/IMG][/div]
[div=font-size: 12px;]Missions Completed:
S Rank:
A Rank: 1
B Rank: 1
C Rank: 1
D Rank:[/div]



[/div]

You had too many line breaks.

KageYuuki KageYuuki Use the raw code, quoting codes can alter them ;3
 
Fyuri said:
Code: 
[div=max-width:400px; padding: 12px; border: 10px solid #62a77c; background-color: #FFF3C3; border-radius: 10px;]
[center][heightrestrict=100][IMG]https://imgur.com/61ptS6j.png[/IMG][/heightrestrict][/center] [div=float: left;  font-size: 20px;]Yuuki Uchiha
Rank: Chuunin
Squad: 4
Chakra Nature: [heightrestrict=45][IMG]https://imgur.com/86fJ5d1.png][/IMG][/heightrestrict][/div][RIGHT][heightrestrict=200][IMG]http://safebooru.org//images/1354/c2698802060c6aba145cae92ac52eec4bbc439cd.png[/IMG][/heightrestrict][/RIGHT]


[div=float:left;max-width:200px;][IMG]https://imgur.com/rOJSQyq.png[/IMG][/div]
[div=font-size: 12px;]Missions Completed:
S Rank:
A Rank: 1
B Rank: 1
C Rank: 1
D Rank:[/div]



[/div]

You had too many line breaks.

KageYuuki KageYuuki Use the raw code, quoting codes can alter them ;3
Click to expand...
Well then


61ptS6j.png
Yuuki Uchiha
Rank: Chuunin
Squad: 4
Chakra Nature:
86fJ5d1.png]
c2698802060c6aba145cae92ac52eec4bbc439cd.png


rOJSQyq.png

Missions Completed:
S Rank:
A Rank: 1
B Rank: 1
C Rank: 1
D Rank:




 
With any luck, this will be the last time I bug you guys about this. When I went to add a second of the little images under 'Chakra nature,' it popped up beneath the first instead of beside it. Any way to fix this?


61ptS6j.png
Sei Teshima
Rank: Chuunin
Squad: 5
Chakra Nature:
AWB0Cap.png]
Ce1RedI.png
sei-jpg.294007


1fksMQd.png

Missions Completed:
S Rank:
A Rank:
B Rank:
C Rank: 2
D Rank: 1






Code: 
[div=max-width:400px; padding: 12px; border: 10px solid #62a77c; background-color: #FFF3C3; border-radius: 10px;]
[center][heightrestrict=100][IMG]https://imgur.com/61ptS6j.png[/IMG][/heightrestrict][/center] [div=float: left;  font-size: 20px;]Sei Teshima
Rank: Chuunin
Squad: 5
Chakra Nature: [heightrestrict=45][IMG]https://imgur.com/AWB0Cap.png][/IMG][/heightrestrict] [heightrestrict=45][img]https://imgur.com/Ce1RedI.png[/img][/heightrestrict][/div][RIGHT][heightrestrict=200][IMG]https://www.rpnation.com/attachments/sei-jpg.294007/[/IMG][/heightrestrict][/RIGHT]


[div=float:left;max-width:200px;][IMG]https://imgur.com/1fksMQd.png[/IMG][/div]
[div=font-size: 12px;]Missions Completed:
S Rank:
A Rank: 
B Rank: 
C Rank: 2
D Rank: 1[/div]



[/div]
 
You must log in or register to reply here.

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)

Similar threads

Alteras
Resource Text Templater — a plain text template to form field generator
Replies
3
Views
248
A Murder Of Corviknight
A Murder Of Corviknight
JCKane
Help Tabs messing up due to too much text?
Replies
12
Views
115
JCKane
JCKane
Martzi
Help So Many Questions
Replies
2
Views
99
Martzi
Martzi
roxybirdie
Closed music player button [resolved]
Replies
2
Views
422
roxybirdie
roxybirdie
Back
Top