Altering the colour of the map canvas, or additional/self-added UI panes.

Another question! I've been making use of the code found here (I think- it's been a long time!) - http://textadventures.co.uk/forum/samples/topic/q5zedoe560au_ii73oamoq/adding-graphics-in-a-specific-location-gui-solved - in order to make my map a collapsible part of my game's UI, given that its default location and lack of interactivity leaves a lot to be desired. It's pretty much perfect, though I have run into one issue; because it's injected on top of existing UI, it doesn't seem to get caught by the engine's general UI changes. That is, if I change the theme, or certain colours of background, font, window lines, etc, nothing changes on the map.

I don't suppose anyone has any ideas on where that needs to be slotted in, do they? As it stands, going for a more eye-pleasing dark theme is getting slightly undermined by having a big white block of map surging into view whenever the collapse is clicked. grid, canvas, I know the parts, I just don't know what javascript wants me to call them so I can properly point my changes at it.


Use this code to change the background colour, in this instance to red:

JS.setCss ("#gridPanel", "background-color:red")

This is best put in the "User initialisation script...", found on the Advanced Scripts tab of the game object (you may need to activate the tab on the Features tab).


No dice! Tossed it in my User Init Script and it's done nothing.

https://i.gyazo.com/205a5378290e708edc44548280c0a19c.png

If I remove the code to place the map in its own little collapsible pane, then it works. As I suspected, the code must be obfuscating that, or making an entirely new map to begin with... hrmm. So I probably have to find a space within the code block to add it.

eval ("$('<h3 id=\"mapLabel\" class=\"ui-accordion-header ui-helper-reset ui-state-active ui-corner-top\"><span class=\"ui-icon ui-icon-triangle-1-s\"></span><span class=\"accordion-header-text\">Map</span></h3><div id=\"mapAccordion\" class=\"ui-accordion-content-active ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom\"></div>').insertBefore(\"#inventoryLabel\");$('#gridPanel').hide();$('#gamePanelSpacer').height('0');var size = $(\"#mapAccordion\").innerWidth();$('#gridCanvas').width(size).height(size).appendTo($('#mapAccordion'));paper.view.viewSize.width = size;paper.view.viewSize.height = size;$(\"#gridPanel\").hide();$(\"#mapLabel\").bind(\"click\", $._data($(\"#inventoryLabel\")[0]).events['click'][0]['handler']);$(\"#mapLabel\").bind(\"mouseover\", $._data($(\"#inventoryLabel\")[0]).events['mouseover'][0]['handler']);$(\"#mapLabel\").bind(\"mouseout\", $._data($(\"#inventoryLabel\")[0]).events['mouseout'][0]['handler']);")

(My understanding of this code goes as far as 'it works and does what I want it to do, eheh.)


It worked for me. But if you have something working, then great,


Nonono- what you supplied doesn't work unless I remove something I consider to be a vital UI element, that is, moving the map from taking up half of the top of the screen to instead occupying a collapsible accordion pane. The code for which is above. I'm going over it now to see if I can insert the setCss inside of it, or if I can find out what it's generated as to point it at it, but no dice.

https://i.gyazo.com/beaa290a21e182eaff85c2a510c8ae40.png

Making changes within the usual Display tab catches everything else, including the generated Status pane, but doesn't change the map. I wonder if there's something in that code that's just generating default, rather than following the selected prefs?...


JS.setCss ("#mapAccordion", "background-color:red") ?


... Well it half worked!

https://i.gyazo.com/ea4c61d1459810a6aee0ac86dc84305b.png

And I do quite literally mean half! At least we've made a fashionable pokéball? Pokésquare?

Edit; AHAH!

JS.setCss ("#gridCanvas", "background-color:red")

That's done the trick for the background colour! Now, to see if I can replicate it for the label, and the colour of the font in said label.


You should be able to recolour #mapLabel and #mapLabel .accordion-header-text normally.

However, if you're changing the style of sidebar panels, you'd be better changing the styling of the CSS classes:

  • .ui-accordion-header - the header of each pane in the sidebar
  • .accordion-header-text - the text in the title of each pane
  • .ui-accordion-header.ui-state-active - the header of any panes which aren't hidden
  • .ui-accordion-content - the body of each pane in the sidebar

I'm afraid my brain is staticking too hard to figure out the exact language to use, here.

I worked out before your post,

JS.setCss ("#mapLabel", "color:white")

, changed the colour of the title text; .accordion-header-text, I guess? Now I just need .ui-accordion-header, assuming that's the background colour of the title/top of the pane. Just... not quite sure how to type that out.

Edit;
Further confusion, as none of those alter the colour of the pane header, but 2 of them alter the colour of the text.

.ui-accordion-header - Changes text.
.accordion-header-text - DOESN'T change text. Headscratcher.
.ui-accordion-header.ui-state-active - Changes text. Makes sense, that's an active version of the first one.
.ui-accordion-content - Does nothing.

Edit Edit; RESULT.

JS.setCss ("#gridCanvas", "background-color:#2E2D2D")
JS.setCss ("#mapLabel", "color:white")
JS.setCss ("#mapAccordion", "border-color:white")
JS.setCss ("#mapLabel", "background:#2E2D2D")
JS.setCss ("#mapLabel", "border-color:white")

Which comes out looking like this. https://i.gyazo.com/ae8731698af2338124aca13e673f69da.png

For some odd reason, doing background-color was what was breaking everything. I inspected the html elements, and noticed that it was specified background, not background-color. Tried with just background, and it worked. But then more confusingly, other pieces; Border in particular, and then bafflingly background for the canvas, DID need -color specified.

Well, whatever! The map now matches the rest of the UI and looks the same when inactive/closed. I'm satisfied! The code for the map pane can be used in conjunction with the code I've added above to alter all the colour sections of it that spring to mind, though mine is tweaked to insertAfter the compassAccordion, whereas I think the one above is insertBefore InventoryLabel.

Thanks for the guidance!


For some odd reason, doing background-color was what was breaking everything.

Specifying background-color just changes the background color. If there's already a background image set, the color will only affect the areas not covered by the image.

When you specify just background, it assumes you're setting a whole list of properties, with spaces between them. In order, those properties are: background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment.

So by specifying background:#2E2D2D, that's equivalent to background-color:#2E2D2D; background-image: none.

But then more confusingly, other pieces; Border in particular,

The same applies for border, it specifies a bunch of properties at once. But the properties are border-width, border-style, and border-color, in that order.
So you'd specify something like: border: 1px solid white.


@mrangel -

You should be able to recolour #mapLabel and #mapLabel .accordion-header-text normally.

Is #mapLabel .accordion-header-text a way to apply a class only to a specific element?


Is #mapLabel .accordion-header-text a way to apply a class only to a specific element?

The space lets you match elements contained in other elements. So this particular selector finds any element with class="accordion-header-text" inside an element with id="mapLabel".

If you take out the space in the middle, it would be searching for an element with both the specified ID and the specified class.


Ah, this sounds like a very useful way to precisely target elements. Thank you!


Log in to post a reply.

Support

Forums