How do you change panel sizes? (ANSWERED)

[tenunda]

Like if I wanted to make my comment panel wider, how would I go about doing that?

Or, even better, is there a code to make all panels wider, at least those within a particular column area?

This isn't for my own profile, just asking for a friend who can't get on the computer atm. xD

Any feedback will be appreciated, thanks. c:

EDIT: This is for a current profile. My friend is trying to get the panels on the left side of his profile to be a little wider so that the text isn't all bunched up in them -- this is currently fixed, but now the panel boxes themselves look cut-off (picture provided in posts below).

[Recite]

Assuming their profile is V2 (Current) and you're talking about width specifically, this should suit their needs.

.panel {
width: 300px;}

Changing the 300 will adjust the width of all panels.

[tenunda]

Recite

Assuming their profile is V2 (Current) and you're talking about width specifically, this should suit their needs.

.panel {
width: 300px;}

Changing the 300 will adjust the width of all panels.

Thanks, that did help (text is no longer bunching up in the panels), but now the panels look "cut off" (yes, it is V2, sorry for not stating that in the original post before):



So I guess I need to increase the column width? I don't know what you call it. xD

[tenunda]

I mean... is what I'm asking for even possible?

I don't know anything about coding. ;__;

[faolan]

tenunda

Recite

Assuming their profile is V2 (Current) and you're talking about width specifically, this should suit their needs.

.panel {
width: 300px;}

Changing the 300 will adjust the width of all panels.

Thanks, that did help (text is no longer bunching up in the panels), but now the panels look "cut off" (yes, it is V2, sorry for not stating that in the original post before):



So I guess I need to increase the column width? I don't know what you call it. xD

For the comments panel, try adjusting the #id_comments dl properties, actually -- that's all the content of the comment panel below the view and add links, so try playing with the width, maybe the padding values, on that one, you should be able to get it dialed in.

For the media panel, that's another property within the panel, too -- you'll want to set .media_panel object, .media_panel embed to a width that'll fit within the panel itself.

[tenunda]

faolan

For the comments panel, try adjusting the #id_comments dl properties, actually -- that's all the content of the comment panel below the view and add links, so try playing with the width, maybe the padding values, on that one, you should be able to get it dialed in.

For the media panel, that's another property within the panel, too -- you'll want to set .media_panel object, .media_panel embed to a width that'll fit within the panel itself.

Thank you for responding. c:

What you said didn't seem to work, unfortunately. For the comments, I typed this in:

#id_comments dl{
width:300px;
padding-left: 100px;
}

I played with the values, but nothing changed no matter what I put in. I even used values '0px' and '1000px', didn't make a difference. I don't even know if I typed it right. Dx

For the media stuff, all that did was increase the size of the bar itself. Both panels remained cut-off looking:



;__;

[Fredy-san]

faolan

tenunda

Recite

Assuming their profile is V2 (Current) and you're talking about width specifically, this should suit their needs.

.panel {
width: 300px;}

Changing the 300 will adjust the width of all panels.

Thanks, that did help (text is no longer bunching up in the panels), but now the panels look "cut off" (yes, it is V2, sorry for not stating that in the original post before):



So I guess I need to increase the column width? I don't know what you call it. xD

For the comments panel, try adjusting the #id_comments dl properties, actually -- that's all the content of the comment panel below the view and add links, so try playing with the width, maybe the padding values, on that one, you should be able to get it dialed in.

For the media panel, that's another property within the panel, too -- you'll want to set .media_panel object, .media_panel embed to a width that'll fit within the panel itself.

You know the elements in Gaia profile most have overflow:hidden; by default right? You increase a panel content width more than its panel parent, it gets cut by hidden overflow. You increase a panel width, it gets cut by the column container hidden overflow. You increase the column width, the other columns will get pushed or cut by the parent #columns container

So, actually you have to calculate and adjust the #columns width first so it can contains its 3 column childs, then you can change the column width. The panels and most of the content have width set to auto by default so it will follow the column width where they are placed on.

Example if you want to enlarge all the left column panels a bit wider

#columns {
width:100%;
}

#column_1 {
width:400px;
}

[faolan]

Fredy-san

faolan

tenunda

Recite

Assuming their profile is V2 (Current) and you're talking about width specifically, this should suit their needs.

.panel {
width: 300px;}

Changing the 300 will adjust the width of all panels.

Thanks, that did help (text is no longer bunching up in the panels), but now the panels look "cut off" (yes, it is V2, sorry for not stating that in the original post before):



So I guess I need to increase the column width? I don't know what you call it. xD

For the comments panel, try adjusting the #id_comments dl properties, actually -- that's all the content of the comment panel below the view and add links, so try playing with the width, maybe the padding values, on that one, you should be able to get it dialed in.

For the media panel, that's another property within the panel, too -- you'll want to set .media_panel object, .media_panel embed to a width that'll fit within the panel itself.

You know the elements in Gaia profile most have overflow:hidden; by default right? You increase a panel content width more than its panel parent, it gets cut by hidden overflow. You increase a panel width, it gets cut by the column container hidden overflow. You increase the column width, the other columns will get pushed or cut by the parent #columns container

So, actually you have to calculate and adjust the #columns width first so it can contains its 3 column childs, then you can change the column width. The panels and most of the content have width set to auto by default so it will follow the column width where they are placed on.

Example if you want to enlarge all the left column panels a bit wider

#columns {
width:100%;
}

#column_1 {
width:400px;
}

stressed I can't believe I forgot that -- the panel widths all default to auto, it's the column widths that are explicitly defined. *facepalm*.

Eh, well, in my defense you can still adjust the sub-panel element widths. sweatdrop

[Fredy-san]

faolan

The fault wasn't yours to start with. Check the first thread reply.

Of course, matters would be different when you are starting to use positions and stuffs like that, especially seeing how the TS making that "play button", it could be (or not) the next matter.

[tenunda]

Fredy-san

faolan

Yeah, that did it, completely fixed now. Thank you both for your help. c:

[Knight Yoshi]

Fredy-san

#columns {
width:100%;
}

#column_1 {
width:400px;
}

And setting the #columns wrapper width to 100% is pointless since it's a block-level element. The the initial width of all block level elements is the entire width of the container element