The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Need help with posting template

3 posters

Go down

Solved Need help with posting template

Post by Centesimus 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
Centesimus
Forumember

Posts : 25
Reputation : 0
Language : Dutch,English

Back to top Go down

Solved Re: Need help with posting template

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

Bump, i still need help with this.
Centesimus
Centesimus
Forumember

Posts : 25
Reputation : 0
Language : Dutch,English

Back to top Go down

Solved Re: Need help with posting template

Post by Nera. 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

Need help with posting template 7woj

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

Need help with posting template 7wu2

Topics


Need help with posting template 7wub

Posts

Need help with posting template 7wus

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.
Nera.
Energetic

Female Posts : 7078
Reputation : 2017
Language : English
Location : -

Back to top Go down

Solved Re: Need help with posting template

Post by Centesimus 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.

Need help with posting template Dwm2011071715252954
Centesimus
Centesimus
Forumember

Posts : 25
Reputation : 0
Language : Dutch,English

Back to top Go down

Solved Re: Need help with posting template

Post by Nera. 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.
Nera.
Energetic

Female Posts : 7078
Reputation : 2017
Language : English
Location : -

Back to top Go down

Solved Re: Need help with posting template

Post by Centesimus 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
Centesimus
Forumember

Posts : 25
Reputation : 0
Language : Dutch,English

Back to top Go down

Solved Re: Need help with posting template

Post by Nera. 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.
Nera.
Energetic

Female Posts : 7078
Reputation : 2017
Language : English
Location : -

Back to top Go down

Solved Re: Need help with posting template

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

thanks! it works now Wink


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

Posts : 25
Reputation : 0
Language : Dutch,English

Back to top Go down

Solved Re: Need help with posting template

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

Since this thread is marked solved, I will lock this thread.
Need help with posting template 2j4t5a8

Sanket Smile

Sanket
Sanket
ForumGuru

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

Back to top Go down

Back to top

- Similar topics

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