Interesting that you're saying it was just CSS...so it probably was unrelated to the Custom Navigation feature...meaning any GM that added the CSS you did would have had the same problem.
Were you maybe working with a transparent div or something like that? It sounds like you had a "position: fixed" div that was taking up the entire screen, so you couldn't scroll. And then when you went to your phone, the smaller form factor changed the layout and maybe hid the div that was causing the issue.
Frankly I am not sure. I was throwing up a whole bunch of ideas from different pages to see what appealed. I planned on styling it after deciding on a general idea. As I said I am self-taught with coding. I have HUGE gaps in my knowledge.
If it happened right after adding the CSS for the splash logo, then I can definitely say that it had to do with the full screen div element with position:fixed. That exact same thing happened to me when I was writing that CSS code and it was because I forgot to add a z-index property to push the newly transparent div to the back of the stack.
The original CSS I came up with forgot that tidbit, so the splash logo would show on screen (across the entire window), then fade opacity to 0, but forgot to move it to the back. This left an invisible image floating at the foreground that blocked all mouse interactions.
I didn't have any of the splash logo code on this site. So I don't think it was that. But that does sound something like what I was experiencing in practice. I could not click on ANYTHING until I accessed it on my phone.
I certainly like the idea of versioning for CSS. I know that I often save off my current CSS temporarily while making changes - but also that I sometimes forget, and end up losing something that had previously been working.
I have tons of word docs filled with temp code that I periodically delete but I don't always remember to save it. I too have lost tons of stuff because I didn't save.
Grr. Does anyone know how to get rid of that thrice damned pointer on the menus? I have almost done so but all my attempts end in tears. Any suggestions are welcome.
Cool. I'm noting down the feature request to have "CSS versioning", but no promises that it'll get implemented.
One interim to this is to use a single Google Doc, and just update it with your CSS whenever you make a change. If you save your CSS in the Google Doc, it automatically keeps a history of your changes in "File -> Version history -> See version history". It even highlights what has changed between the version you're viewing and the previous version. And you can name versions if you wanted to remember what that particular version was able to do. You still have to remember to update the Google Doc each time you make a change, so it's not a perfect solution, but at least it keeps the versions in order in one place with changes highlighted, and if you miss Saving some of your changes, you still have some continuity and might be able to figure out what pieces were lost.
Regarding the thrice damned pointer on the menus : ), can you do a "display:none" on this?
Thank you Gastoff. I appreciate it. I will give that a try.
That is a good idea about Google Docs Thaen. I will also look into that. I just wish it was more automatic. I sometimes forget to save my old code and when I do it is usually just before I screw something up royally. If it wasn't for bad luck....
Gastoff that almost works. It is perfect when you are mousing over the Menu but I would also need an Active link change to the color. What would the callout be for that? Also, is there a way to make the Text black when the mouseover or active states are in play? Right now the settings I have for Links override any CSS I use to change it to black.
Are you wanting the default text color for Nav Menu items to be different than other links across the site, the link color on hover of the nav items to be different, or both?
If you have CSS that is changing the Link color site wide, but you want the Nav menu to have its own colors on default and hover, you can specify them using:
.campaign-public-layout #campaign-nav a { color: "default color"; }
Hey, everyone. I just wanted to thank you all for your help. We kicked the campaign off with our first session this past Sunday and now have our first mission log. The site would not look near as good without all of your input. So thank you!
If you have any other ideas for improving it or notice any errors please let me know here in the forum or drop me a line.
This is looking really great! Sorry I dropped a bunch of suggestions and was no help... it's a good thing we've got guys like @gastoff and @thaen around
Comments
No worries at all on not knowing what it was!
Interesting that you're saying it was just CSS...so it probably was unrelated to the Custom Navigation feature...meaning any GM that added the CSS you did would have had the same problem.
Were you maybe working with a transparent div or something like that? It sounds like you had a "position: fixed" div that was taking up the entire screen, so you couldn't scroll. And then when you went to your phone, the smaller form factor changed the layout and maybe hid the div that was causing the issue.
Obsidian Portal Developer
Frankly I am not sure. I was throwing up a whole bunch of ideas from different pages to see what appealed. I planned on styling it after deciding on a general idea. As I said I am self-taught with coding. I have HUGE gaps in my knowledge.
November 2012 CotM: Dresden Files RPG: The Emerald City
June 2016 CotM: Star Wars: Rise of the Infinite Empire
JUNE 2020 CotM & 2020 CotY: Mass Effect Accelerated
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated
If it happened right after adding the CSS for the splash logo, then I can definitely say that it had to do with the full screen div element with position:fixed. That exact same thing happened to me when I was writing that CSS code and it was because I forgot to add a z-index property to push the newly transparent div to the back of the stack.
The original CSS I came up with forgot that tidbit, so the splash logo would show on screen (across the entire window), then fade opacity to 0, but forgot to move it to the back. This left an invisible image floating at the foreground that blocked all mouse interactions.
I didn't have any of the splash logo code on this site. So I don't think it was that. But that does sound something like what I was experiencing in practice. I could not click on ANYTHING until I accessed it on my phone.
November 2012 CotM: Dresden Files RPG: The Emerald City
June 2016 CotM: Star Wars: Rise of the Infinite Empire
JUNE 2020 CotM & 2020 CotY: Mass Effect Accelerated
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated
I certainly like the idea of versioning for CSS. I know that I often save off my current CSS temporarily while making changes - but also that I sometimes forget, and end up losing something that had previously been working.
I have tons of word docs filled with temp code that I periodically delete but I don't always remember to save it. I too have lost tons of stuff because I didn't save.
November 2012 CotM: Dresden Files RPG: The Emerald City
June 2016 CotM: Star Wars: Rise of the Infinite Empire
JUNE 2020 CotM & 2020 CotY: Mass Effect Accelerated
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated
Grr. Does anyone know how to get rid of that thrice damned pointer on the menus? I have almost done so but all my attempts end in tears. Any suggestions are welcome.
November 2012 CotM: Dresden Files RPG: The Emerald City
June 2016 CotM: Star Wars: Rise of the Infinite Empire
JUNE 2020 CotM & 2020 CotY: Mass Effect Accelerated
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated
Cool. I'm noting down the feature request to have "CSS versioning", but no promises that it'll get implemented.
One interim to this is to use a single Google Doc, and just update it with your CSS whenever you make a change. If you save your CSS in the Google Doc, it automatically keeps a history of your changes in "File -> Version history -> See version history". It even highlights what has changed between the version you're viewing and the previous version. And you can name versions if you wanted to remember what that particular version was able to do. You still have to remember to update the Google Doc each time you make a change, so it's not a perfect solution, but at least it keeps the versions in order in one place with changes highlighted, and if you miss Saving some of your changes, you still have some continuity and might be able to figure out what pieces were lost.
Regarding the thrice damned pointer on the menus : ), can you do a "display:none" on this?
.campaign-public-layout #campaign-nav li.active:after
Or am I not understanding the pointer you're talking about?
Obsidian Portal Developer
If you are wanting to change the triangle pointer to a rounded, half circle one like in your image workup, you can use the following CSS code:
Thank you Gastoff. I appreciate it. I will give that a try.
That is a good idea about Google Docs Thaen. I will also look into that. I just wish it was more automatic. I sometimes forget to save my old code and when I do it is usually just before I screw something up royally. If it wasn't for bad luck....
November 2012 CotM: Dresden Files RPG: The Emerald City
June 2016 CotM: Star Wars: Rise of the Infinite Empire
JUNE 2020 CotM & 2020 CotY: Mass Effect Accelerated
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated
Gastoff that almost works. It is perfect when you are mousing over the Menu but I would also need an Active link change to the color. What would the callout be for that? Also, is there a way to make the Text black when the mouseover or active states are in play? Right now the settings I have for Links override any CSS I use to change it to black.
November 2012 CotM: Dresden Files RPG: The Emerald City
June 2016 CotM: Star Wars: Rise of the Infinite Empire
JUNE 2020 CotM & 2020 CotY: Mass Effect Accelerated
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated
You're right, you would need to manually set the border-color on hover as well. Try:
Perfect! That got it! Thanks Gastoff.
The Text Color would be nice but I can live without it I suppose.
November 2012 CotM: Dresden Files RPG: The Emerald City
June 2016 CotM: Star Wars: Rise of the Infinite Empire
JUNE 2020 CotM & 2020 CotY: Mass Effect Accelerated
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated
Are you wanting the default text color for Nav Menu items to be different than other links across the site, the link color on hover of the nav items to be different, or both?
If you have CSS that is changing the Link color site wide, but you want the Nav menu to have its own colors on default and hover, you can specify them using:
I am looking for it to be different than it is on the rest of the site. So I will give this a try. Thanks again!
November 2012 CotM: Dresden Files RPG: The Emerald City
June 2016 CotM: Star Wars: Rise of the Infinite Empire
JUNE 2020 CotM & 2020 CotY: Mass Effect Accelerated
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated
Hey, everyone. I just wanted to thank you all for your help. We kicked the campaign off with our first session this past Sunday and now have our first mission log. The site would not look near as good without all of your input. So thank you!
If you have any other ideas for improving it or notice any errors please let me know here in the forum or drop me a line.
November 2012 CotM: Dresden Files RPG: The Emerald City
June 2016 CotM: Star Wars: Rise of the Infinite Empire
JUNE 2020 CotM & 2020 CotY: Mass Effect Accelerated
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated
This is looking really great! Sorry I dropped a bunch of suggestions and was no help... it's a good thing we've got guys like @gastoff and @thaen around
@gastoff and @thaen are lifesavers for sure. You did get the ball rolling though. Which is much appreciated.
November 2012 CotM: Dresden Files RPG: The Emerald City
June 2016 CotM: Star Wars: Rise of the Infinite Empire
JUNE 2020 CotM & 2020 CotY: Mass Effect Accelerated
FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated: Emerald City-Requiem
Current Campaigns: Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated
I see my best role as giving a wrong or bad answer, so then someone else feels compelled to give the right or more complete one. Ha!
Obsidian Portal Developer