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.

Navigation Bar Help!

Page 1 of 2 1, 2  Next

View previous topic View next topic Go down

Solved Navigation Bar Help!

Post by Erza Loveheart on April 19th 2013, 11:15 am

Heya! I'm new to this place and I need a little help with my forum's navigation bar....

What I want is to space the buttons of the navigation bar a bit. Also I want to add some kind of sliding or zooming kind of animation for the same!

Thanks in advance if you are gonna help me....!!!!! Razz

Sorry I can't provide my website link because of the rule for new members Sad But you can see it in my profile on the left..! Wink

Oh yeah another thing I wanted to know was: How do you add a background to your forum? Cause when I try to do it from ACP> Display> Pics Management, it doesn't show up and when I log out and click on chatbox it shows the image as a chatbox background..





Last edited by Erza Loveheart on April 19th 2013, 12:03 pm; edited 1 time in total

Erza Loveheart
Forumember

Female Posts : 32
Reputation : 1
Language : English, Hindi, Marathi, Malayalam, Sanskrit
Location : India

http://auroriarp.forumsline.com

Back to top Go down

Solved Re: Navigation Bar Help!

Post by Jophy on April 19th 2013, 11:38 am

Hello,

Is this your forum link?:
http://www.harrypotter-rp.englishboards.com/

Jophy
ForumGuru

Male Posts : 17924
Reputation : 835
Language : English
Location : Somewhere

Back to top Go down

Solved Reply

Post by Erza Loveheart on April 19th 2013, 11:58 am

Yep!!!!!!! Smile

Erza Loveheart
Forumember

Female Posts : 32
Reputation : 1
Language : English, Hindi, Marathi, Malayalam, Sanskrit
Location : India

http://auroriarp.forumsline.com

Back to top Go down

Solved Re: Navigation Bar Help!

Post by Jophy on April 19th 2013, 12:18 pm

For the first issue, try this code, add it at the bottom of your CSS stylesheet:
Admin Panel > Display > Colors > CSS stylesheet:
Code:
.mainmenu {
  margin: 10px !important;
}

You can increase or decrease 10 into your liking.

I don't know the code for the zoom effect, sorry.

For the forum background, did you try here?:
Admin Panel > Display > Pics Management > Simple Mode:
Click the 'Background picture page' link
> Upload a background image there > Save

Jophy
ForumGuru

Male Posts : 17924
Reputation : 835
Language : English
Location : Somewhere

Back to top Go down

Solved Reply

Post by Erza Loveheart on April 19th 2013, 12:32 pm

Smile The spacing thing worked out!

Thanks a lot....
Well, I've tried that background image thing before in the simple mode and now I tried again but the prblem is that it shows the image properly in the preview but not on the site.. I doubt that it may be a problem of my browser. So can you please look at my site once again and tell me if you see a background??

Erza Loveheart
Forumember

Female Posts : 32
Reputation : 1
Language : English, Hindi, Marathi, Malayalam, Sanskrit
Location : India

http://auroriarp.forumsline.com

Back to top Go down

Solved Re: Navigation Bar Help!

Post by Jophy on April 19th 2013, 12:37 pm

Smile

Try this code for the background:
Code:

body {
background-image: url("URL OF IMAGE HERE");
}
Make sure to place the image url inside the parenthesis between the quotations mark.

Jophy
ForumGuru

Male Posts : 17924
Reputation : 835
Language : English
Location : Somewhere

Back to top Go down

Solved Reply

Post by Erza Loveheart on April 19th 2013, 12:43 pm

I've tried this too before and I tried it once again now but its still not working...

One doubt though, if I use the code should I remove the image from Pics Management???

Umm, errrr, I just noticed that I can see the background in all the pages except the home page... For eg. In the Great Hall

Erza Loveheart
Forumember

Female Posts : 32
Reputation : 1
Language : English, Hindi, Marathi, Malayalam, Sanskrit
Location : India

http://auroriarp.forumsline.com

Back to top Go down

Solved Re: Navigation Bar Help!

Post by Jophy on April 19th 2013, 12:49 pm

Well try adding the code first, I tried it and it works on my test forum. Wink

Jophy
ForumGuru

Male Posts : 17924
Reputation : 835
Language : English
Location : Somewhere

Back to top Go down

Solved Reply

Post by Erza Loveheart on April 19th 2013, 12:53 pm

Yeah I removed it from Pics Management but still it does not display the background image on my home page...

Erza Loveheart
Forumember

Female Posts : 32
Reputation : 1
Language : English, Hindi, Marathi, Malayalam, Sanskrit
Location : India

http://auroriarp.forumsline.com

Back to top Go down

Solved Re: Navigation Bar Help!

Post by Cr4ZyBoY on April 19th 2013, 12:54 pm

Yes this code should work i tried it also

Cr4ZyBoY
Forumember

Male Posts : 141
Reputation : 6
Language : English
Location : Israel

http://www.iron-players.forumhe.com

Back to top Go down

Solved Re: Navigation Bar Help!

Post by Jophy on April 19th 2013, 12:54 pm

Can you past the code that you added for the background? Thanks.

Jophy
ForumGuru

Male Posts : 17924
Reputation : 835
Language : English
Location : Somewhere

Back to top Go down

Solved Reply

Post by Erza Loveheart on April 19th 2013, 1:05 pm

I guess you want me to 'pass' the code...

I'll have to PM it to you as I'm not allowed to post external links.. Confused

Edit: Turns out I can't even PM links Sad

Erza Loveheart
Forumember

Female Posts : 32
Reputation : 1
Language : English, Hindi, Marathi, Malayalam, Sanskrit
Location : India

http://auroriarp.forumsline.com

Back to top Go down

Solved Re: Navigation Bar Help!

Post by Cr4ZyBoY on April 19th 2013, 1:08 pm

i think u are allowed to post Codes or not idk ask staff so i wont make trouble :/

Cr4ZyBoY
Forumember

Male Posts : 141
Reputation : 6
Language : English
Location : Israel

http://www.iron-players.forumhe.com

Back to top Go down

Solved Re: Navigation Bar Help!

Post by Jophy on April 19th 2013, 1:10 pm

You won't still be able to, the system affects PM's too.

You can leave spaces on links. Wink

Jophy
ForumGuru

Male Posts : 17924
Reputation : 835
Language : English
Location : Somewhere

Back to top Go down

Solved Reply

Post by Erza Loveheart on April 19th 2013, 1:13 pm

That's a pretty good idea... I'll do it right now!

Erza Loveheart
Forumember

Female Posts : 32
Reputation : 1
Language : English, Hindi, Marathi, Malayalam, Sanskrit
Location : India

http://auroriarp.forumsline.com

Back to top Go down

Solved Re: Navigation Bar Help!

Post by Jophy on April 19th 2013, 1:19 pm

So this is the code
Code:
body {
background-image: url("http://i1277.photobucket. com/albums /y499/OfficialAvatarRP/finalbackground_ zps3ad87106.jpg");
}

Strange it doesn't work on my test forum too, can you post the image here using the [img][/img] tags? Thanks.

Jophy
ForumGuru

Male Posts : 17924
Reputation : 835
Language : English
Location : Somewhere

Back to top Go down

Solved Re: Navigation Bar Help!

Post by Erza Loveheart on April 19th 2013, 1:29 pm

Well, you didn't remove the space between [.] and [com] also the space between [albums] and [/y499/]

Erza Loveheart
Forumember

Female Posts : 32
Reputation : 1
Language : English, Hindi, Marathi, Malayalam, Sanskrit
Location : India

http://auroriarp.forumsline.com

Back to top Go down

Solved Re: Navigation Bar Help!

Post by Jophy on April 19th 2013, 1:37 pm

It actually works on my test forum, try either one of this codes, if one doesn't work, try the other one, make sure you put it at the bottom of the CSS stylesheet:
Code:
body {
background-image: url("http://i1277.photobucket.com/albums/y499/OfficialAvatarRP/finalbackground_zps3ad87106.jpg");
}

or

Code:
body {
background-image: url("http://i1277.photobucket.com/albums/y499/OfficialAvatarRP/finalbackground_zps3ad87106.jpg") !important;
}

Jophy
ForumGuru

Male Posts : 17924
Reputation : 835
Language : English
Location : Somewhere

Back to top Go down

Solved Reply

Post by Erza Loveheart on April 19th 2013, 1:45 pm

Nope! Still doesn't work... I put it at the real end of the CSS style sheet. If I give you my Username and password can you do it for me on my forum??

Erza Loveheart
Forumember

Female Posts : 32
Reputation : 1
Language : English, Hindi, Marathi, Malayalam, Sanskrit
Location : India

http://auroriarp.forumsline.com

Back to top Go down

Solved Re: Navigation Bar Help!

Post by Jophy on April 19th 2013, 1:50 pm

First, I can see the forum having the background? Do you mean you want the right side of the forum to have the image too? That already depends on the image size & style you're adding.

Jophy
ForumGuru

Male Posts : 17924
Reputation : 835
Language : English
Location : Somewhere

Back to top Go down

Solved Re: Navigation Bar Help!

Post by Erza Loveheart on April 19th 2013, 1:58 pm

You can see the background in the home page???
If yes, then thanks!

Now all that remains is the animation of the navigation bar... I'll wait till someone reads this and knows the code to do that...........

Erza Loveheart
Forumember

Female Posts : 32
Reputation : 1
Language : English, Hindi, Marathi, Malayalam, Sanskrit
Location : India

http://auroriarp.forumsline.com

Back to top Go down

Solved Re: Navigation Bar Help!

Post by Sanket on April 19th 2013, 2:44 pm

Add this to your css. Check the effect here on my test forum for the navigation images.
http://testing.4rumer.com/forum
Code:
a.mainmenu img{
  -webkit-transition-duration: 0.8s;
   -moz-transition-duration: 0.8s;
   -o-transition-duration: 0.8s;
   transition-duration: 0.8s;
   
   -webkit-transition-property: -webkit-transform;
   -moz-transition-property: -moz-transform;
   -o-transition-property: -o-transform;
   transition-property: transform;
   
   overflow:hidden;

}
a.mainmenu img:hover{
     -webkit-transform:rotate(360deg);
   -moz-transform:rotate(360deg);
   -o-transform:rotate(360deg);
}

Sanket
ForumGuru

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

http://webartzforum.com

Back to top Go down

Solved Reply

Post by Erza Loveheart on April 20th 2013, 8:54 am

Its a nice effect, but it kind of doesn't suit my forum...
It would be good if you could give me the code for slide and zoom kind of effect..
For eg. in your test forum there is a anime girl on the bottom right corner of the screen. If you click on it you are directed to the Anime PH registration page. There if you change the URL of you address tab from [/register] to [/forum] you will be then directed to their main page... They have a white navigation bar in the top which slides down and then zooms a bit... I would like that kind of navigation bar effect. It isn't a problem if there are slight changes in it. (I explained it like this because as a new member I'm still not allowed to post external links so I couldn't give you the link directly)

And can you also tell me how to add that bottom right image which is visible to the guests...
THANKS!

Erza Loveheart
Forumember

Female Posts : 32
Reputation : 1
Language : English, Hindi, Marathi, Malayalam, Sanskrit
Location : India

http://auroriarp.forumsline.com

Back to top Go down

Solved Re: Navigation Bar Help!

Post by Sanket on April 20th 2013, 8:59 am



Last edited by Sanket on April 20th 2013, 9:15 am; edited 1 time in total

Sanket
ForumGuru

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

http://webartzforum.com

Back to top Go down

Solved Reply

Post by Erza Loveheart on April 20th 2013, 9:14 am

That picture totally works... I'll change the graphic and put up what I want. But when I click that imge it is supposed to redirect to my forum's register page... How can I do that??

Erza Loveheart
Forumember

Female Posts : 32
Reputation : 1
Language : English, Hindi, Marathi, Malayalam, Sanskrit
Location : India

http://auroriarp.forumsline.com

Back to top Go down

Solved Re: Navigation Bar Help!

Post by Sanket on April 20th 2013, 9:17 am

Forum URL, can be replaced by the register page.

Also, i edited my post above for the solution to the navigation bar.

Sanket
ForumGuru

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

http://webartzforum.com

Back to top Go down

Solved Reply

Post by Erza Loveheart on April 20th 2013, 9:34 am

Umm, well I didn't meant those navigation bars... If you could visit that website now you would see a navigation bar in the centre with options such as Chatbox Rules, Discussions etc etc. That's what I meant..

Erza Loveheart
Forumember

Female Posts : 32
Reputation : 1
Language : English, Hindi, Marathi, Malayalam, Sanskrit
Location : India

http://auroriarp.forumsline.com

Back to top Go down

Solved Re: Navigation Bar Help!

Post by Sanket on April 20th 2013, 9:42 am

It seems to be some menu installed. I don't know which one it is. Sorry.

Sanket
ForumGuru

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

http://webartzforum.com

Back to top Go down

Solved Reply

Post by Erza Loveheart on April 21st 2013, 9:18 am

It's okay... Can you give me more codes for anymore effects??
I'll appreciate that a lot!

It doesn't need to be too fancy.

Erza Loveheart
Forumember

Female Posts : 32
Reputation : 1
Language : English, Hindi, Marathi, Malayalam, Sanskrit
Location : India

http://auroriarp.forumsline.com

Back to top Go down

Solved Re: Navigation Bar Help!

Post by Sanket on April 21st 2013, 10:05 am

Haha, well search it on this forum. I don't know which effects for which place do you want it.

Sanket
ForumGuru

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

http://webartzforum.com

Back to top Go down

Page 1 of 2 1, 2  Next

View previous topic View next topic Back to top


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