WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

WebArtz - The Web Design Forum » Web Designing & Coding » CSS (Cascading Style Sheets) » Santa Hat

View previous topic View next topic Go down  Message [Page 1 of 1]

1 Santa Hat on Sat Dec 18, 2010 3:31 am

Jake


Registered Member
Registered Member
Christmas is coming up and I would like to add a santa hat hanging on every avatar. How can I accomplish this?

2 Re: Santa Hat on Sat Dec 18, 2010 4:15 am

McStormify


Registered Member
Registered Member
Forum version?

3 Re: Santa Hat on Sat Dec 18, 2010 5:20 am

Jake


Registered Member
Registered Member
phpbb2

4 Re: Santa Hat on Sat Dec 18, 2010 12:41 pm

ankillien


Administrator
Administrator
Hi,

You can do it in templates.
Go to viewtopic_body template and find this part...

Code:
{postrow.displayed.POSTER_RANK}<br />
{postrow.displayed.RANK_IMAGE}


Put the santa hat image right after that, using this code...

Code:
<img src="IMAGE URL HERE" />


Save it and publish it Very Happy

5 Re: Santa Hat on Sat Dec 18, 2010 1:07 pm

COR3 POW3R


Registered Member
Registered Member
ankillien wrote:Hi,

You can do it in templates.
Go to viewtopic_body template and find this part...

Code:
{postrow.displayed.POSTER_RANK}

{postrow.displayed.RANK_IMAGE}


Put the santa hat image right after that, using this code...

Code:
<img src="IMAGE URL HERE" />


Save it and publish it Very Happy


What DON'T you know?

6 Re: Santa Hat on Sat Dec 18, 2010 7:42 pm

Jophy


Registered Member
Registered Member
COR3 POWER, Please don't go off topic.

http://www.socialtechforum.com/

7 Re: Santa Hat on Sat Dec 18, 2010 11:44 pm

Jake


Registered Member
Registered Member
ankillien wrote:Hi,

You can do it in templates.
Go to viewtopic_body template and find this part...

Code:
{postrow.displayed.POSTER_RANK}

{postrow.displayed.RANK_IMAGE}


Put the santa hat image right after that, using this code...

Code:
<img src="IMAGE URL HERE" />


Save it and publish it Very Happy


Thanks for your help! Though it does have some problems.
http://i61.servimg.com/u/f61/15/01/00/60/santa110.jpg
I don't think every avatar will cooperate with it, but is there a way you can overlap the santa hat on the avatar instead of it being above?

8 Re: Santa Hat on Sun Dec 19, 2010 1:15 am

Guest


Guest
I think its just thinking outside the box.
First of all,set a max height and width with css for every avatar.
Then place the hat using CSS positioning. Very Happy

9 Re: Santa Hat on Sun Dec 19, 2010 10:43 am

ankillien


Administrator
Administrator
I'll give you the code Wink

You can use this code to position the hat where you want...

Code:
tr.post td[width="150"] .poster-profile {
position: relative;}.hat {position: absolute;
top: 35px; left: 5px;
}


You can change the top and left values to adjust the position.

10 Re: Santa Hat on Mon Dec 20, 2010 3:48 am

Jake


Registered Member
Registered Member
Doesn't seem to work.

11 Re: Santa Hat on Mon Dec 20, 2010 8:41 am

ankillien


Administrator
Administrator
In the template, replace the image code...

Code:
    <img src="IMAGE URL HERE" />


with this one...

Code:
    <img src="IMAGE URL HERE" class="hat" />

12 Re: Santa Hat on Mon Dec 20, 2010 10:38 am

Jake


Registered Member
Registered Member
Thanks much! Very Happy

13 Re: Santa Hat on Mon Dec 20, 2010 11:10 am

ankillien


Administrator
Administrator
Glad I could help Very Happy

Solved | Locked

View previous topic View next topic Back to top  Message [Page 1 of 1]

WebArtz - The Web Design Forum » Web Designing & Coding » CSS (Cascading Style Sheets) » Santa Hat

Permissions in this forum:
You cannot reply to topics in this forum