Blog Documentation Try Vanilla Cloud
Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Options

Larger Avatar?

ConductorXConductorX
edited August 2005 in Vanilla 1.0 Help
Is there a way to modify the code to allow for larger avatars? The 30x30 in anemic at best. 150 x150 or even 200x200 would be prefered. Vanilla did install easy and I already have a new user. http://www.kaferweb.com/forum/

Comments

  • Options
    MarkMark Vanilla Staff
    edited August 2005
    the avatar sizes are defined in the css. If you want to make it bigger (or smaller), you should create a new style and just change those dimensions.
  • Options
    ConductorXConductorX
    That is all fine and good if I knew what a CSS was or if I had any clue how to design a "style". Thanks anyway
  • Options
    lechlech Chicagoland ✭
    ...
  • Options
    MarkMark Vanilla Staff
    edited August 2005
    hahaha.

    Okay, there's no reason to be rude. A lot of the users in this community have a great deal of experience with html and css. If I were to treat every user who asked a question like a novice, I'd probably come off looking like a jerk. So, if anyone asking questions doesn't have experience coding and needs detailed information on how to do something, please let us know when you ask your question.

    So, in this case, if you were to right-click on your screen when looking at a page, you can view the source of that page. For example, on this page the code for my name and my avatar appears like this: 
    <div class="CommentAuthor CommentAuthorWithIcon">
	<span class="CommentIcon" style="background-image:url('http://files.lussumo.com/Icons and Stuff/imacowboy.gif')"></span>
	<a href="account.php?u=1">mark</a>
</div>
    As you can see, the icon is contained within a "span" that has a class assigned to it called "CommentIcon". A "Class" name is how you can identify different elements in a page. Those names are then referenced in a "Cascading Style Sheet" (CSS) and different styles are assigned to that element to make it appear a certain way in the page.

    The default style sheet in Vanilla is contained within the following folder:

    /styles/vanilla/global.css

    If you open that file and search for "CommentIcon", you'll find this code: 
    .CommentIcon {
	position: absolute;
	top: 50%;
	margin: -16px 0 0 -40px;
	display: block;
	height: 32px;
	width: 32px;
	background: #fff center center no-repeat;
}
    As you can see, the definitions you should be concerned with are:

    height: 32px; width: 32px;

    Those definitions mean that the icon image will be trimmed to 32 pixels by 32 pixels in size. If you want a larger icon, you need to increase those values. So, if you wanted your icons to show 100 pixels by 100 pixels, your style would have to look like this: 
    .CommentIcon {
	position: absolute;
	top: 50%;
	margin: -16px 0 0 -40px;
	display: block;
	height: 100px;
	width: 100px;
	background: #fff center center no-repeat;
}
    There may be some other issues surrounding where that icon is placed on the screen. As you can see there are various different margin settings applied to the icon, and you may have to change those as well so that it doesn't overlap other elements on the screen.

    At the end of the day, if you are having problems, there is a great resource for learning css here:

    http://www.w3schools.com/css/default.asp


    I hope that helps!
  • Options
    outbreakoutbreak New
    wow, you handled that very appropriately mark. nicely done.
  • Options
    jsandersjsanders
    for those that weren't aware, mark has 8 heads with four brains each, and 64 pairs of hands. he's a coding monster.
This discussion has been closed.