Blog Documentation Book a Demo
Options

Changing Icon Size

2»

Comments

  • ybalabinybalabin
    being a complete rookie, css says nothing to me....hehe.... but i thank you and FLC and Kosmo!!!!! thank you!!!!
  • ybalabinybalabin
    edited February 2006
    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
  • ybalabinybalabin
    anyone?
  • ybalabinybalabin
    Kosmo is it possible to tell me why i am getting the margins all mixed up after the mod you wrote above?
  • sean lancastersean 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.
  • MinisweeperMinisweeper New
    edited May 2006
    //edit...mmmhmmm
  • levylevy
    edited May 2006
    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 !
  • GhotcomGhotcom
    Could you tell me what is called that item in Vanilla 1.0 ?
  • lechlech ✭
    edited May 2006
    Its name is exactly the same as far as I know.
  • KosmoKosmo
    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?
  • ChrisGwynneChrisGwynne ✭
    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.
  • lechlech ✭
    Kosmo, you write the basics, and like previous wiki guides, I'll be more than happy to colaborate by offering edits, changes and extras.
  • phadedphaded
    Was global.css renamed in 1.0? Because I can't find it anywhere...
  • BergamotBergamot
    Yeah, it's vanilla.css now.
  • phadedphaded
    I thought so. Thanks. Now to see if I can get this working...
  • raykrayk New
    How would I go about changing icon size in vanilla 1.1.1 ? Vanilla.css seems to have been changed a bit.
  • smwsmw
    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!
  • dookiestylesdookiestyles
    bump! same question as smw. i'm trying to change icons to 60x60. thanks! :)
This discussion has been closed.