Photo Gallery Forums

Is there a way to change the opacity of the Topbar? I would like to make it much darker.

Thanks

You mean when it's "fixed"? Or when it's overlaying an image/slideshow intro? If not, I am not sure what you mean, because the topbar doesn't overlay anything by default, and opacity wouldn't have any effect.

At www.photo.gallery, we customized the fixed topbar to be DARK instead of inheriting the skin background. I was thinking of implementing this as an option, because it's nice with the contrast when the menu is fixed.

Hey Karl...

Just so I avoid any semantics... check out http://www.goldenbikeshop.com/

The logo looks great when the background is dark.

At test.39thavenueapartments.com the logo doesn't look as good with the light topbar

alexhenes wrote:Just so I avoid any semantics... check out http://www.goldenbikeshop.com/

The logo looks great when the background is dark.

At test.39thavenueapartments.com the logo doesn't look as good with the light topbar

A few things:

First of all, did you try to navigate to Panel > Index > Settings > Gallery > Slideshow Intro > "white on 25% black"? The background for the MENU/LOGO combo is always set separately when you are using an "intro", like you are doing on the front page. It will look much better, like this:


As for normal pages (without intro), it seems a bit strange that you are using a DARK theme for goldenbikeshop.com and a LIGHT theme for test.39thavenueapartments.com, and then comparing them. Why not use the TWILIGHT skin? A logo should be created for the background it is displaying on, and it's normal to have TWO logos, one for dark and one for light backgrounds. In your case, you have a logo optimized for DARK backgrounds, currently used on a LIGHT skin (twilight).

ANYWAY, if you for some reason want a darker background behind the header area, while keep a LIGHT skin (twilight), that can be achieved with custom CSS. Keep in mind, it's two entirely unique scenarios that decide 1. The header background color/opacity when using an "intro" module (as in the screenshot above), and 2. In normal mode, for example like your "contact" page, see screenshot below:

If you want to force a dark background, it will look like the below screenshot, which in my opinion, does not match the skin? Why use a LIGHT skin in the first place? The goldenbikeshop uses a DARK skin.

Quick question, how do i change topbar color? And can i customize the color of the menu button on mobile or small device?

Menu button is the square button with 3 lines. I want to change this to match my logo’s color.

winph wrote:Quick question, how do i change topbar color?

When you say "topbar color", do you mean the background on the topbar section? As showcased in one of my screenshots previously in this post, the topbar inherits a color related to the SKIN, and also has conditional variations based on if it is 1. FIXED (on scroll), 2. OVERLAY (when it is overlaying an intro slideshow/image), and 3. depending on if you selected "clear" or "filled" skin. Even if you apply a custom color from, you are basically locking all variations to your color.

Besides, normally the topbar is simply clear (transparent), unless you selected "filled". OR are you talking about the topbar background only in intro mode (when it is overlaying an image)? Hard to answer with being more specific.

winph wrote:And can i customize the color of the menu button on mobile or small device?

And what is your logo color? By default, X3 already sets the same color for text logo and the menu background, but I guess you may have a custom logo. You would need to use custom CSS, but would be helpful if you have a link and reference to your logo.

i want to change the topbar to pure white, then my logo is black. my site is sherwintan.com

With white, the menu disappears:


It might work if you go to the index page slideshow settings, and change the slideshow "use as intro" menu style to "normal", and then add the below to settings > custom > custom CSS:

Super thanks! Now need to figure out how to make sub menu turn into white :)