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 and Homepage Background Color

View previous topic View next topic Go down

Solved Navigation Bar and Homepage Background Color

Post by Glazella on November 18th 2012, 8:56 am

How can I change the background color of my navigation bar and Homepage?


As you can see they appear gray, how can I make them transparent?

Glazella
Forumember

Posts : 68
Reputation : 2

http://jiyeonworldwide.com

Back to top Go down

Solved Re: Navigation Bar and Homepage Background Color

Post by Kaizer Lee on November 18th 2012, 9:00 am

Please take the time in searching for the transparent color in the ACP < Display < Colors < Remove the Hex Code by pressing delete and then enter fast < Save

I don't recall which type of color I used to remove the color for my navigation bar, but I once did it with changing the colors in the ACP Smile But I think it's the Background or Table Header Colors :/

Sorry if I couldn't recall where the Hex Code value for that one is located.

Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

Solved Re: Navigation Bar and Homepage Background Color

Post by Glazella on November 18th 2012, 9:25 am

Hmm.. odd that I can't find anything which can be turned to transparent. I tried everything at ACP. I know the navbar will look messy if it has that ugly dirty white color Sad

Glazella
Forumember

Posts : 68
Reputation : 2

http://jiyeonworldwide.com

Back to top Go down

Solved Re: Navigation Bar and Homepage Background Color

Post by Ivypelt on November 18th 2012, 9:31 am

What I did for my NavBar was pre-color the background. Maybe you could try it....

Ivypelt
Forumember

Female Posts : 48
Reputation : 3
Language : English

http://warriorcatsxtreme.forumotion.com

Back to top Go down

Solved Re: Navigation Bar and Homepage Background Color

Post by Glazella on November 18th 2012, 10:10 am

How to pre-color that?

Glazella
Forumember

Posts : 68
Reputation : 2

http://jiyeonworldwide.com

Back to top Go down

Solved Re: Navigation Bar and Homepage Background Color

Post by Ivypelt on November 18th 2012, 10:14 am

start with a background that you created. Then print-screen it and paste it on MS Paint. (if you have it) Edit it to your heart's desire. Then add the text, pictures, ect. However, this means that you will have to start over.

The print-screen button is located on your keyboard.

Ivypelt
Forumember

Female Posts : 48
Reputation : 3
Language : English

http://warriorcatsxtreme.forumotion.com

Back to top Go down

Solved Re: Navigation Bar and Homepage Background Color

Post by Glazella on November 18th 2012, 10:23 am

Hmm.. so that means I have to make everything first then print screen then those will become my buttons? Hmm.. seems like a good idea~ Thank you.

Glazella
Forumember

Posts : 68
Reputation : 2

http://jiyeonworldwide.com

Back to top Go down

Solved Re: Navigation Bar and Homepage Background Color

Post by Ivypelt on November 18th 2012, 10:27 am

No problem. That's what I did, and it was quite useful, so I hope that you find it useful too. Just remember to actually upload them onto your forum. Wink

Ivypelt
Forumember

Female Posts : 48
Reputation : 3
Language : English

http://warriorcatsxtreme.forumotion.com

Back to top Go down

Solved Re: Navigation Bar and Homepage Background Color

Post by Glazella on November 18th 2012, 12:13 pm

Now the only problem I'm left with is to make the announcement a transparent one then to remove hover for my navigation buttons~

Glazella
Forumember

Posts : 68
Reputation : 2

http://jiyeonworldwide.com

Back to top Go down

Solved Re: Navigation Bar and Homepage Background Color

Post by Kaizer Lee on November 18th 2012, 1:13 pm

Wait, if you remove hover for navigation, you won't be able to click on them ._. ...

Also, make sure your background's fixed...

Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

Solved Re: Navigation Bar and Homepage Background Color

Post by Photondragon12345 on November 18th 2012, 3:23 pm

Homepage Color= ACP>>Display>>Colors>>Background Colors

Navbar Color: You will have to manually replace the navbar with colored images.

What do you mean by hover? Do you mean hover effects? If so check the Forum CSS

Photondragon12345
Forumember

Male Posts : 226
Reputation : 1
Language : English, Chinese, A little french
Location : USA

http://photon-duel-academy.forumotion.com/

Back to top Go down

Solved Re: Navigation Bar and Homepage Background Color

Post by Glazella on November 18th 2012, 4:21 pm

I mean when I point at the navbar image, a white square appears at the back~

Glazella
Forumember

Posts : 68
Reputation : 2

http://jiyeonworldwide.com

Back to top Go down

Solved Re: Navigation Bar and Homepage Background Color

Post by Sir Chivas™ on November 18th 2012, 4:47 pm

Hi,

Try this following steps:

1. Go to your Admin Panel
2. Click on the "Display" tab.
3. Go under "Pictures & Colors," Click on "Colors"
4. You'll find the Tab named, "CSS."
5. Once you find that CSS tab, place this code in there:

Code:
.navbar , .panel {
        background-color: transparent;
        }

Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6756
Reputation : 428
Language : English, Spanish, and French
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: Navigation Bar and Homepage Background Color

Post by nextlevelgaming on November 19th 2012, 7:25 am

Frances Kaizer wrote:Wait, if you remove hover for navigation, you won't be able to click on them ._. ...

Also, make sure your background's fixed...

Question Question Question Question Question where did you learn that? CSS does not control if you can click an element what so ever.


Now OP remember for proper CSS editing do not truly use transparent on everything. Reason why?? Some browsers are clueless on what that means affraid shocker right! heres how you can fix that

Code:
.classname{background-color:transparent !important;background-color:#fff;}

What that does is if the browser can't read transparent it will read #fff (which is hex code for white)


to remove any hover information you will need to find why it is changing (meaning CSS is added to make this happen)

that CSS selector would be .classname:hover{}

and to find the exact code, if you get google Chrome or FireFox you can right click and inspect element and it will give you the HEX code and class name of the element.

Looked at that site for you:

Look for

#i_icon_mini_index:hover in your css;
and look for the ticker heres your css (if thats what you wanted trans)
Code:
#fa_ticker_block .borderwarp, #fa_ticker_block .box-content{background:transparent !important;}

not positive if that will work, but it should.

nextlevelgaming
Forumember

Male Posts : 989
Reputation : 38
Language : English|CSS|HTML5|javascript|
Location : New York

http://www.easybbtutorials.forumotion.com

Back to top Go down

Solved Re: Navigation Bar and Homepage Background Color

Post by Kaizer Lee on November 19th 2012, 11:40 am

No, that's not what I meant at all. But yeah.

Anyway, try Sir Chivas's suggestion first and then geek's but make sure you save your codes in case something back fires

Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

Solved Re: Navigation Bar and Homepage Background Color

Post by Kaizer Lee on November 19th 2012, 12:30 pm

As I said, that's not what I meant, but meh ._.

Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

Solved Re: Navigation Bar and Homepage Background Color

Post by Glazella on November 19th 2012, 2:42 pm

Guys thanks for the answers, this is the print screen of my problem:



As you can see when I point at one button, it becomes white at the back. I want it to be transparent too or no hover effects Smile The same goes with the announcement bar, I want it to be transparent Smile

Glazella
Forumember

Posts : 68
Reputation : 2

http://jiyeonworldwide.com

Back to top Go down

Solved Re: Navigation Bar and Homepage Background Color

Post by Sir Chivas™ on November 19th 2012, 2:59 pm

Then, that's the image that has the white background. If you can link the image, to see if it has a white background.



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6756
Reputation : 428
Language : English, Spanish, and French
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: Navigation Bar and Homepage Background Color

Post by Glazella on November 19th 2012, 3:08 pm

Here: http://i1090.photobucket.com/albums/i375/jiyeonfacts/Midnight%20Sparkle/donate2.png

But I made that navbar button bg transparent. The navbar is transparent too by using this code:


#submenu {
background-color: transparent;
padding: 0.5em 0 0.65em;
text-align: right;
}

And I realized that I was able to hide the log out image but the link is still there so the nav bar isn't centered. How will I get rid of the log out button. My version is Invision~

Glazella
Forumember

Posts : 68
Reputation : 2

http://jiyeonworldwide.com

Back to top Go down

Solved Re: Navigation Bar and Homepage Background Color

Post by Sir Chivas™ on November 19th 2012, 3:48 pm

Can you please provide the URL of your forum, please? Also, I suggest that you should let the Designers crop the background out of it. Because it seems that the image has a background to it.

I don't really comprehend the issue of the log out button. Do you want to remove it permanently? Also, try centering your Navigation via Admin Panel.

Follow the steps, mentioned below:

1. Go to your Admin Panel.
2. Once you're there, click on the Display tab.
3. Underneath the Homepage Category, click on Headers & Navigation.
4. You'll see an option that lets you center the Navigation Bar: Menu Postition: Center

Try that, I hope it helps.



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6756
Reputation : 428
Language : English, Spanish, and French
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: Navigation Bar and Homepage Background Color

Post by nextlevelgaming on November 19th 2012, 7:01 pm

You will need to place an !important; after transparent for it to override all other bgs that are being called for that image.

this is the exact CSS you will need

Code:
#submenu ul li a:hover {
background-color: transparent !important;
}

Since the OP has google Chrome, you can right click 'Inspect Element' force element state =:hover; and it'll give you that CSS that you needed


Also yeah you are right rideem, z-index for a link would be a hack of sorts. Though unwise to do hahaha. Hardcode the element so its not a link lol.
Also Rideem, never mind bout that tagging system. Guess the advanced of it is not possible. I'll talk to you more later about it .


Also OP since you were talking about centering your navbar, I'm not sure what you see. But I checked you CSS, you have

Code:
#submenu {
background-color: transparent;
padding: 0.5em 0 0.65em;
text-align: right;
}
should be
Code:
#submenu {
background-color: transparent;
padding: 0.5em 0 0.65em;
text-align: center;
}

nextlevelgaming
Forumember

Male Posts : 989
Reputation : 38
Language : English|CSS|HTML5|javascript|
Location : New York

http://www.easybbtutorials.forumotion.com

Back to top Go down

Solved Re: Navigation Bar and Homepage Background Color

Post by Kaizer Lee on November 19th 2012, 9:08 pm

Chivas, I checked the picture and it doesn't have a white background whatsoever. This thing is through coding.

Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

Solved Re: Navigation Bar and Homepage Background Color

Post by nextlevelgaming on November 19th 2012, 9:28 pm

the coding I offered will provide the OP the correct fixes. The images do not have a white background, it is the :hove pseudo class of which i fix in the coding above.

nextlevelgaming
Forumember

Male Posts : 989
Reputation : 38
Language : English|CSS|HTML5|javascript|
Location : New York

http://www.easybbtutorials.forumotion.com

Back to top Go down

Solved Re: Navigation Bar and Homepage Background Color

Post by Glazella on November 20th 2012, 2:14 pm

Yey!Thanks guys Smile That worked well Smile

Glazella
Forumember

Posts : 68
Reputation : 2

http://jiyeonworldwide.com

Back to top Go down

Solved Re: Navigation Bar and Homepage Background Color

Post by Sanket on November 20th 2012, 4:02 pm

Topic Solved & Locked

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