Mobile View issue

[Maf]

Forum URL: multimusevault.proboards.com/



Hey guys!

So I've noticed today that the highlighted section on the mobile view is showing all black. Where exactly can I change the color of the lettering on here? 

Thank you 

Attachments:

[Nscalerr 🐺]

Hi Maf

The mobile version of the site itself cannot be edited, but since it picks up the colours of the desktop version of the site, you will need to adjust the colour on the desktop for the relevant item.

[Maf]

Hey there, thank you!

Well that's just it. The relevant item is supposed to have the hyperlink showing red, which is what's showing on the desktop version. However in mobile version everything is black on that little box, including the hyperlink members should see. :\

[Nscalerr 🐺]

In

.ui-tabMenu ul{background:#000000 none left center repeat-x;border:1px solid #000000;border-top-width:0px;border-right-width:0px;border-left-width:0px;padding:5px 5px 0 5px;}

you have background: #000000 when in the default it is @tabs_background, so I would suggest changing it to background: @tabs_background; and see if that makes a difference.

Default
.ui-tabMenu ul { background: @tabs_background; border: @tabs_border; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px; padding: 5px 5px 0 5px; }

[Nscalerr 🐺]

Ok scrub the above and add the following to the bottom of your stylesheet.

/* Change link colour in profile sumnmary in mobile view. */
.profile-menu-bar {
   color: #ff0000 !important;
}

[Maf]

Nscalerr 🐺 

So I added the code on your last post and didn't work. Or was I supposed to do what you recommended in both posts? I only placed the following code:


/* Change link colour in profile sumnmary in mobile view. */
.profile-menu-bar {
   color: #ff0000 !important;
}

[Nscalerr 🐺]

Only what was in the last post. I am assuming it was the mobile view that you wanted the change in, since the css only works in the mobile view, or it did for me on my forum.

[Kami]

Aug 1, 2020 19:59:28 GMT -8 Nscalerr 🐺 said:

Only what was in the last post. I am assuming it was the mobile view that you wanted the change in, since the css only works in the mobile view, or it did for me on my forum.

Sorry friend. Custom CSS changes do NOT work on mobile view, you have to use the theme colours / advanced styles areas instead (the latter is pretty limited in what affects mobile view though).

Changing what's written in the default CSS through an *added* edit isn't what you're looking for -- you either have to edit the *default* values in the style sheet (not append) or you have to use the theme styling UIs.

Note: some changes in advanced styles will not pick up as it only does colour variations for limited sections.

[Nscalerr 🐺]

Thanks for that Kami. Think I might leave this for someone that knows a bit more about the mobile CSS.

[Kami]

if no one gets to it by the time i wake up i'll have a look (:

basically, the colours that get picked up are on the theme colours section; you can edit those *same* values in the advanced styles section or in the CSS, but any other edits to those sections (ie: things that the theme colours section does not change) will not be counted.

if the colours are mismatched on mobile, the best way to fix it would be to use the theme colours section (this will also change it for desktop, but at that point you can use custom CSS to target it to whatever goal you have).

[Retread]

Aug 2, 2020 0:49:59 GMT -8 Kami said:

if no one gets to it by the time i wake up i'll have a look (:

basically, the colours that get picked up are on the theme colours section; you can edit those *same* values in the advanced styles section or in the CSS, but any other edits to those sections (ie: things that the theme colours section does not change) will not be counted.

if the colours are mismatched on mobile, the best way to fix it would be to use the theme colours section (this will also change it for desktop, but at that point you can use custom CSS to target it to whatever goal you have).

That looks right to me. My understanding of how the Mobile version is limited to empirical data. That sounds like a great way of describing how things are supposed to work. But I think there's a bit of a hole in the software.

The Mobile version picks up it's colors from certain variables on the style sheet. But in this case, I believe there was something overlooked in the Mobile version, in terms of setting the color for the section in question.

The background-color for that section will respond to changes in:
@container_background_color_1: #FFFFFF;
found on line 76 of a default ProBoards Style sheet.

However there seems to be no way to change the color of that section in the Mobile version. It's always #000000 (black).

At the moment, the workaround would be to select background-color that has at least some contrast against black, by changing the value of:

Containers Background 1 (via the Colors & Theme Creator)

OR

Body (Content)

Containers

Primary Backgrounds (via the Visual Editor in Advanced Styles & CSS)

OR
Change the value of the color defined for the variable on line 76 of the Style Sheet.

---

I reckon the ProBoards Admins will evaluate the situation when they're back in the office on Monday.

[Kami]

Aug 2, 2020 9:22:38 GMT -8 Retread said:

Aug 2, 2020 0:49:59 GMT -8 Kami said:

if no one gets to it by the time i wake up i'll have a look (:

basically, the colours that get picked up are on the theme colours section; you can edit those *same* values in the advanced styles section or in the CSS, but any other edits to those sections (ie: things that the theme colours section does not change) will not be counted.

if the colours are mismatched on mobile, the best way to fix it would be to use the theme colours section (this will also change it for desktop, but at that point you can use custom CSS to target it to whatever goal you have).

That looks right to me.

The Mobile version picks up it's colors from certain variables on the style sheet. But in this case, I believe there was something overlooked in the Mobile version, in terms of setting the color for the section in question.

The background-color for that section will respond to changes in:
@container_background_color_1: #FFFFFF;
found on line 76 of a default ProBoards Style sheet.

However there seems to be no way to change the color of that section in the Mobile version. It's always #000000 (black).

At the moment, the workaround would be to select background-color that has at least some contrast against black, by changing the value of:

Containers Background 1 (via the Colors & Theme Creator)

OR

Body (Content)

Containers

Primary Backgrounds (via the Visual Editor in Advanced Styles & CSS)

OR
Change the value of the color defined for the variable on line 76 of the Style Sheet.

---

I reckon the ProBoards Admins will evaluate the situation when they're back in the office on Monday.

Having a quick look myself, it looks like this is because this section is determined by a class called .profile-menu-bar which inherits the background-colour from container_background but there actually isn't a colour specified for this section within the mobile CSS itself.

Instead, it's pulling the font colour from the mobile CSS's declared modifications to the select property [color: -internal-light-dark(black, white); ] for font colour and [background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59)); ] for the background colour. Since .profile-menu-bar overrides the declared background colour from this property (and replaces it with whatever is declared in container_background) but doesn't do the same for font, this always stays black -- this issue exists by design (in that this is not "bugged") but I don't think it's intentional.

Considering how popular black backgrounds / light text are in PB themes I'm surprised this hasn't been discovered before now, honestly, unless the mobile stylesheet has changed recently on PB's end.

However, as Retread said this isn't possible to fix with anything we have on hand aside from the workaround he posted since any edits to the select property via CSS would not take on mobile. Hopefully, the PB admins can make a modification so that the .profile-menu-bar CSS also overrides the select property in font colour (:

[Maf]

Hello everyone!

I'm so sorry for the late reply, been quite busy with a couple of things at work!

First, let me thank you all for looking into this

The workaround suggested by Retread implies, however, that the current background of the forum would have to be changed, correct? Just to make sure I understood correctly. It's not ideal to me even though I really appreciate the input on this.

Kami as you said, there are a lot of dark theme forums set all around proboards. Do you think it will be a possibility to eventually have PB admins work on a small change for this? Is there any way to make this suggestion reach them?

Thank you again!

[Nscalerr 🐺]

Aug 6, 2020 0:45:46 GMT -8 Maf said:

The workaround suggested by Retread implies, however, that the current background of the forum would have to be changed, correct? Just to make sure I understood correctly. It's not ideal to me even though I really appreciate the input on this.

You can change the background on the affected section to change it on the mobile version, but then use a class in the css to make it how you want it on the desktop version of the forum, (since it won't effect the mobile version).

[Kami]

Aug 6, 2020 0:45:46 GMT -8 Maf said:

Hello everyone!

I'm so sorry for the late reply, been quite busy with a couple of things at work!

First, let me thank you all for looking into this

The workaround suggested by Retread implies, however, that the current background of the forum would have to be changed, correct? Just to make sure I understood correctly. It's not ideal to me even though I really appreciate the input on this.

Kami as you said, there are a lot of dark theme forums set all around proboards. Do you think it will be a possibility to eventually have PB admins work on a small change for this? Is there any way to make this suggestion reach them?

Thank you again!

This post is how you reach them. They haven't responded, which is unusual, but if that's the case just bump up your thread if 24 hours have passed without a response.

Hopefully they'll see this in the morning and reply, but if not, you can bump (just say 'bump' in a post) it up after 24 hours (: