Changing Icon Size

ybalabin

being a complete rookie, css says nothing to me....hehe.... but i thank you and FLC and Kosmo!!!!! thank you!!!!

ybalabin

still, although i made all the changes from above, the margins are all wrong and the icon is overlaping the comments.... etc... can anyone help me out here? thank you

ybalabin

anyone?

ybalabin

Kosmo is it possible to tell me why i am getting the margins all mixed up after the mod you wrote above?

sean lancaster

i take pictures of my students on the first day of class and then crop the photos and turn them into avatars so that i can learn names in an otherwise online class. 32 x 32 is too small to be worthwhile. i think i'll bump it up to 50 x 50 or even 55 x 55. i'll post the code if i figure it out, so appreciate the starter tips mentioned above. i am still deciding whether to switch to vanilla or not, so we'll see.

Minisweeper

//edit...mmmhmmm

levy

Here is below is how I fixed the icon size on my forum. I use 60px x 60px icons. Replace these values in your global.css file but back up your global.css file before you replace them.

.Account {
padding-right: 19px;
float: left;
border-right: 1px solid #ddd;
}
.Account h1 {
color: #604532;
font-size: 14px;
padding: 0px;
margin: 0px;
}
.AccountWithIcon {
position: relative;
left: 40px;
}


.CommentAuthorWithIcon {

position: relative;
padding-left: 80px;
Paddign-top: 3px;
}

.CommentIcon {
position: absolute;
top: 50%;
margin: -16px 0 0 -80px;
display: block;
height: 60px;
width: 60px;
background: #fff center center no-repeat;
}




.CommentBody {
font-size: 12px;

padding: 8px 8px 8px 80px;
margin-top: 24px;
color: #604532;
}



.SearchUserWithIcon {
position: relative;
padding-left: 80px;
padding-bottom: 4px;
}


.SearchUser {
line-height: 60px;
font-size: 11px;
color: #604532;
margin-bottom: 5px;
margin-left: 0px;
font-weight: normal;
}

.SearchIcon {
position: absolute;
margin: 0 0 0 -80px;
display: block;
height: 60px;
width: 60px;
background: background: #c37c50 center center no-repeat;
}

.AccountIcon {
float: left;
margin: -7px 0 0 -40px;
display: block;
height: 60px;
width: 60px;
background: #c37c50 center center no-repeat;
}

This is obviously all in relation to what you have modified already.

Levy
-Share what you know... that' s how we grow !

Ghotcom

Could you tell me what is called that item in Vanilla 1.0 ?

lech

Its name is exactly the same as far as I know.

Kosmo

Hmh... I propably have to write a complete themeing guide for Vanilla when the ugly v.1 shows it's head, anyone care to join my quest for truth and umm.. ladies of the nakedness?

ChrisGwynne

It'd probably be best to take the avatar out of the CSS and use it as an actual image instead, that's what I'm doing.

lech

Kosmo, you write the basics, and like previous wiki guides, I'll be more than happy to colaborate by offering edits, changes and extras.

phaded

Was global.css renamed in 1.0? Because I can't find it anywhere...

Bergamot

Yeah, it's vanilla.css now.

phaded

I thought so. Thanks. Now to see if I can get this working...

rayk

How would I go about changing icon size in vanilla 1.1.1 ? Vanilla.css seems to have been changed a bit.

smw

so does anyone have a definitive answer on how to change the icon size to something larger without disrupting the style? please help, because 32x32 is too small. thank you in advance!

dookiestyles

bump! same question as smw. i'm trying to change icons to 60x60. thanks! :)