The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Need help with posting template

View previous topic View next topic Go down

Solved Need help with posting template

Post by Centesimus on July 15th 2011, 6:43 pm

Hey, i kind of need some help.

I have forum PunBB


I'm currently creating a world-of-warcraft related forum.

Here's the forum url ; http://testforumforrsps.forumotion.com/


-First of all, i need some help with the avatar border.

I would like to create a border like this one , i don't know if it's possible tho , more like a question.


Here's what i would like :

http://wow.dethpod.com/forum/viewthread.php?forum_id=2&thread_id=142



- Is it possible to add an icon in front of an username in PunBB? i've seen it on PhBB2 but i've never seen a PunBB tutorial.

-Is it possible to add a custom field on your homepage (of forum, not the portal) where i can upload images that change after a while? Like an image appears, 10 seconds later a second image appears on the same spot as the first and so on.


-Is it possible to add a few images on your forum redirecting to the latest topics by admins/staff?


-Is it possible to make categories stand next to each other instead of beneath each other?



Thanks, hope one or more of these questions are possible.



Last edited by Centesimus on July 17th 2011, 4:47 pm; edited 1 time in total

Centesimus
Forumember

Posts : 25
Reputation : 0
Language : Dutch,English

Back to top Go down

Solved Re: Need help with posting template

Post by Centesimus on July 16th 2011, 10:08 am

Bump, i still need help with this.

Centesimus
Forumember

Posts : 25
Reputation : 0
Language : Dutch,English

Back to top Go down

Solved Re: Need help with posting template

Post by Nera. on July 16th 2011, 10:56 am

Hi,

Can we do it one by one?

1. For the frame on avatar, go like this.

Go to your viewtopic_body template and find this
Code:
 {postrow.displayed.POSTER_AVATAR}
replace it with this
Code:
 <div class="test">{postrow.displayed.POSTER_AVATAR}</div>
Save and publish your template on the green cross.

Than go to your CSS and add this in it. You can play with height, width, margins.
Code:
.test {
background-image: url(http://wow.dethpod.com/themes/blizzcom/prot-frame2.gif);
width: 94px;
height: 94px;
background-position: center center;
background-repeat: no-repeat;
overflow: hidden;
}
.test img {
    height: 68px;
    margin-left: 12px;
    margin-top: 11px;
    overflow: hidden;
    width: 68px;
}

This will come out of it



This frame is only an example, you must not use the same.

2. Icon before username for punBB

Add this to your CSS
Code:
.pun .user-ident .username [href="/u1"] {
    background: url("http://i22.servimg.com/u/f22/15/42/72/40/crown10.png") no-repeat scroll left center transparent;
    padding-left: 18px;
    position: absolute;
    text-decoration: none;
    top: 0;
}
a.gensmall[href="/u1"] {
    background: url("http://i22.servimg.com/u/f22/15/42/72/40/crown10.png") no-repeat scroll left center transparent;
    color: #00569C;
    padding-left: 18px;
    text-decoration: none;
    top: 0;
}
#onlinelist [href="/u1"] {
    background: url("http://i22.servimg.com/u/f22/15/42/72/40/crown10.png") no-repeat scroll left center transparent;
    color: #00569C;
    padding-left: 18px;
    text-decoration: none;
    top: 0;
}

You change the u1 to make it fit to who ever you want to add it. Hope it doesn't have gliches, didn't have the time to check to propertly but as seen on first sight there are no.

Online list



Topics




Posts



3. Image slider on homepage
Something like this http://nivo.dev7studios.com/ ?

Go to your Admin panel >> modules >> Html pages managment and add this as a HTML page

Code:
<html>
<head>
    <title>Nivo Slider Demo</title>
    <link rel="stylesheet" href="http://nivo.dev7studios.com/scripts/nivo-slider/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<style>
    background:url(http://nivo.dev7studios.com/images/slider.png) no-repeat;
    width:600px;
    height:392px;
    margin:0 auto;
    padding-top:74px;
    margin-top:-45px;
}
#slider {
    position:relative;
    width:618px;
    height:246px;
    margin-left:190px;
    background:url(http://nivo.dev7studios.com/images/loading.gif) no-repeat 50% 50%;
}
#slider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
#slider a {
    border:0;
    display:block;
}

.nivo-controlNav {
    position:absolute;
    left:260px;
    bottom:-42px;
}
.nivo-controlNav a {
    display:block;
    width:22px;
    height:22px;
    background:url(http://nivo.dev7studios.com/images/bullets.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin-right:3px;
    float:left;
}
.nivo-controlNav a.active {
    background-position:0 -22px;
}

.nivo-directionNav a {
    display:block;
    width:30px;
    height:30px;
    background:url(http://nivo.dev7studios.com/images/arrows.png) no-repeat;
    text-indent:-9999px;
    border:0;
}
a.nivo-nextNav {
    background-position:-30px 0;
    right:15px;
}
a.nivo-prevNav {
    left:15px;
}

.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
width: 600px;
}
.nivo-caption a {
    color:#efe9d1;
    text-decoration:underline;
}</style>
</head>
<body>
    <div id="wrapper">

        <div id="slider-wrapper">
       
            <div id="slider" class="nivoSlider">
                <img src="http://nivo.dev7studios.com/images/toystory.jpg" alt="" />
                <a href="http://dev7studios.com"><img src="http://nivo.dev7studios.com/images/up.jpg" alt="" title="This is an example of a caption" /></a>
                <img src="http://nivo.dev7studios.com/images/walle.jpg" alt="" />
                <img src="http://nivo.dev7studios.com/images/nemo.jpg" alt="" title="#htmlcaption" />
            </div>
            <div id="htmlcaption" class="nivo-html-caption">
                <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
            </div>
       
        </div>

    </div>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>
</body>
</html>

Change the pictures links.

Add this to your homepage and insert he adres of your HTML page in it.

Code:
<center><iframe src="ADRESS TO YOUR HTML PAGE GOES HERE" width="100%" height="300"></iframe></center>

Make sure that the script on the bottom, the dollar sign stayes the same. It gets deformed sometimes after saving it, than it wont work.

Explain a bit forth question please.
For the last one probably yes, with some updates on index_box.

P.S. I had some extra time so I tried everything on PunBB and everything works. Do it slowly and properly.
Hello

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Need help with posting template

Post by Centesimus on July 17th 2011, 2:43 pm

Thanks for the help already !

I'm having some difficulties with the slider tho, i can't seem to find the URL of the html page, where do i see it? i've never worked with HTML pages before.


Also , i have another question with the viewtopic_body part.


Am i able to put images behind the avatar+avatar border? And behind the post text? Like that it's basic and in every post,not just in one.


Centesimus
Forumember

Posts : 25
Reputation : 0
Language : Dutch,English

Back to top Go down

Solved Re: Need help with posting template

Post by Nera. on July 17th 2011, 3:32 pm

Go to your Admin panel >> modules >> Html pages managment, you'll see it listed on the right side of the screen under HTML managment.

For the post part add this in CSS and change the photo link.
Code:
.pun .postmain {
    background-image: url("http://r29.imgfast.net/users/3412/19/22/63/avatars/42273-95.jpg");
}

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Need help with posting template

Post by Centesimus on July 17th 2011, 3:37 pm

Thanks for the help once again!I have a small question tho, when i use the CSS code you gave me it only puts an image in the post box, not behind the avatar box, is it possible to do one behind the avatar box aswell?
(thanks again for all the hard work you've done for me.)

Centesimus
Forumember

Posts : 25
Reputation : 0
Language : Dutch,English

Back to top Go down

Solved Re: Need help with posting template

Post by Nera. on July 17th 2011, 3:47 pm

Try with this one.

Code:
.pun .user-ident .user-basic-info {
    background-image: url("http://r29.imgfast.net/users/3412/19/22/63/avatars/42273-95.jpg");
}

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Need help with posting template

Post by Centesimus on July 17th 2011, 4:46 pm

thanks! it works now Wink


I'll mark this as solved , i really appreciate your help !

Centesimus
Forumember

Posts : 25
Reputation : 0
Language : Dutch,English

Back to top Go down

Solved Re: Need help with posting template

Post by Sanket on July 17th 2011, 4:57 pm

Since this thread is marked solved, I will lock this thread.


Sanket Smile


Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

View previous topic View next topic Back to top


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