Navbar help

[the one]

Hello hope everyone is having a great day

Can someone just take a look at this website http://projectavalon.net/forum4/

Can i ask how have they been able to move the new posts ,new threads,how to donate to the right hand side of the header

They have moved it to the right hand side

I would like to do that with my forum is this some sort of template change

Many thanks

Michelle xxxxxx

[kh99]

They've inserted a div after the login/regitser div (id="toplinks"), and it has attribute float:right.

[the one]

Thank you so much for your reply

I really would not know how to do that.Is it an easy thing to do if so could you give me a step by step guide or do you think it would be to hard to explain to me

Many thanks

Michelle x

[HM666]

First it would help if we had a link to see your site and your current code. Otherwise its just a stab in the dark and may or may not help you at all.

[the one]

Many thanks i did not think of that

This is my site http://jandeane81.com/forum.php

You can see its quite similar to project avalon

[HM666]

Ok it also appears that they added the link code as well that is independent of any code present in the templates already. To do the same thing you would need to have CSS & HTML coding done in at least two templates.

To do this try this (you will need to have some idea about where the templates are and how to make changes to them):

Go to Styles & Templates > Style Manager > Choose your style to make changes in > Edit Templates open the header template and FIND:

<div id="toplinks" class="toplinks">

REPLACE WITH:

<div id="toplinks" class="toplinks">
                 <div class="top-right-menu">
                       <a href="search.php?{session.sessionurl}do=getnew&amp;contenttype=vBForum_Post">New Posts</a><br />
                       <a href="http://jandeane81.com/search.php?searchid=549717">New Threads</a><br />
                       <a href="http://jandeane81.com/misc.php?do=donate&tabid=33">How To Donate</a></div>

Save the template.

Now open additional.css and scroll to the bottom and place this code there:

.top-right-menu {
    float:right;
    background-color:#000000;
    border:1px solid #0d0d0d;
    border-radius:10px;
    padding:10px;
    height:100%;
    overflow:hidden;
    width: 200px;
    margin-right: 50px;
}

.top-right-menu a {
    color:#ffffff;
    text-decoration: none;
}

.top-right-menu a:hover {
    color:yellow;
    text-decoration:underline;
}

Then click save and refresh your browser.

You may need to adjust those settings in the additional.css to get the placement right. If its too far over the the right then you would need to change the 50px to a larger number and so forth. Its something that you will probably have to play with in order to get it exactly where you want it.

[the one]

Hey

Thank you so much

I will give it a go and report back

Many thanks

Michelle

[HM666]

No problem.