Mobile Address Bar Color

Dragon41673 · October 28, 2018, 04:00:04 PM

Hello,

I'd like to know how to change the color of the address bar when in mobile. I know how to do it in Joomla...but I cannot find where to add the code for SMF on my site. Any help would be appreciated.

Thank you!

Antechinus · October 28, 2018, 07:11:34 PM

You'll need to tell people which theme you are using. By default, SMF 2.0 does not have a separate mobile mode.

Dragon41673 · October 28, 2018, 07:36:14 PM

Ahhh ok, sorry, I wasn't aware it was part of the theme but I guess that make sense.

I'm using an older Back n Black theme from CripThemes.

Been tempted to change it...just been waiting for SMF 2.1

Antechinus · October 29, 2018, 12:48:52 AM

That uses a gif for the menu background:

Code Select

#toolbar {
	background: url(../images/toolbar.gif) repeat-x;
	height: 41px;
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	-khtml-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
}

So you can either change the gif, or change the css so it doesn't call the gif. Personally I'd change the css, because you can do pretty much anything with css3 gradients these days. What colour do you want it?

Just as an example, this would give a plain black background:

Code Select

#toolbar {
	background: #000;
	height: 41px;
	border-radius: 10px;
}

And this would give a gradient closely matching the default gif:

Code Select

#toolbar {
	background: linear-gradient(to bottom, #070707, #303030);
	height: 41px;
	border-radius: 10px;
}

Antechinus · October 29, 2018, 01:51:43 AM

Sorry, last one should be:

Code Select

#toolbar {
	background-image: linear-gradient(to bottom, #070707, #303030);
	height: 41px;
	border-radius: 10px;
}

Dragon41673 · October 29, 2018, 06:41:39 AM

Antechinus...unless I'm mistaken, I think you read my post wrong. I'm looking to change the address bar...not the tool bar or background of the template.

Antechinus · October 29, 2018, 09:21:50 AM

Oh well, that's part of the browser. Nothing to do with SMF. This is a support board for SMF templates. If you want support on something that has no connection to SMF, you're basically on the wrong site. Unless I'm still misinterpreting what you're saying.

Do you mean the bar at the top of the screen that has https://www.simplemachines.org/community/index.php?topic=562951.msg3994016 or whatever in it?

If so, nothing to do with SMF. Browser and/or OS issue.

SychO · October 29, 2018, 10:23:56 AM

Add this after the <head> tag of index.template.php of your theme, make sure you do it properly with php echo, and edit content to whatever you want

Code Select

<meta name="theme-color" content="#FF6120">

Antechinus · October 29, 2018, 04:17:45 PM

Oh that old thing. I'd forgotten about that. Only works on Android/Chrome, IIRC.

vbgamer45 · October 29, 2018, 04:30:07 PM

Quote from: Antechinus on October 29, 2018, 04:17:45 PM
Oh that old thing. I'd forgotten about that. Only works on Android/Chrome, IIRC.

Wow never knew you could do that. I would think that would almost be security issue. I remember when Green was for trusted SSL.

Antechinus · October 29, 2018, 05:18:54 PM

I've never heard of it causing security issues, but then I've never checked either.

Gwenwyfar · October 29, 2018, 06:47:39 PM

Quote from: Antechinus on October 29, 2018, 05:18:54 PM
I've never heard of it causing security issues, but then I've never checked either.

I'd guess the point is you can use the same color as a secure page would show.

Antes · October 29, 2018, 07:26:18 PM

Quote from: vbgamer45 on October 29, 2018, 04:30:07 PM
Quote from: Antechinus on October 29, 2018, 04:17:45 PM
Oh that old thing. I'd forgotten about that. Only works on Android/Chrome, IIRC.
Wow never knew you could do that. I would think that would almost be security issue. I remember when Green was for trusted SSL.

This is how it looks

Dragon41673 · October 29, 2018, 09:51:05 PM

Quote from: SychO on October 29, 2018, 10:23:56 AM
Add this after the <head> tag of index.template.php of your theme, make sure you do it properly with php echo, and edit content to whatever you want
Code Select Expand
<meta name="theme-color" content="#FF6120">

SychO...yep, that works for the main site, I'm trying to get the address bar to be the same color for my main site, as well as for the forum.

Currently, the RocketTheme template I have allows this code to be directly put in on the backend of Joomla. For the SMF side (which Antechinus) is a question for the SMF team...I need to know where to place the same type of code.

Antes knows exactly what I mean.

My site has a dark theme to it, as does my forum, and as such I'd like the top address bar to be black. I've got it all setup on the main site like I said...just trying to get it to work with SMF as well.

Dragon41673 · October 29, 2018, 09:53:12 PM

See the attached pics...

Forum vs Site address bars...

Gwenwyfar · October 30, 2018, 07:16:06 AM

That's not really the address bar though

Dragon41673 · October 30, 2018, 07:48:50 AM

Quote from: Gwenwyfar on October 30, 2018, 07:16:06 AM
That's bot really the address bar though

If you mean it's "not" the address bar...it is. That's where you type the address in. It's been called the address bar since the 90's.

Gwenwyfar · October 30, 2018, 08:09:26 AM

Google thing? It looks like a plain title bar to me. But I don't use chrome.

SychO · October 30, 2018, 10:02:13 AM

It's like I said, edit index.template.php located in your Theme 's directory under Themes

Dragon41673 · October 30, 2018, 11:08:37 AM

Quote from: SychO on October 30, 2018, 10:02:13 AM
It's like I said, edit index.template.php located in your Theme 's directory under Themes

Cool...I'll give that a shot hopefully tonight. Thanks Sych0

Dragon41673 · November 01, 2018, 09:42:02 PM

SychO...thank you! I had to toy with it a bit (not good at the whole programming language)...but I got it working!

News:

Mobile Address Bar Color