A More Complicated Look ( Questions on UI design)

DictatorKitten
See, the current view of the game is very good, but it would be better if I could edit more how the game itself looks. I'm talking about centering text and changing text colour for specific messages, maybe throw in a few buttons and borders. I uh. Just can't code. See, the general gist of what I'm going for is a social media simulator that conveys a story in which you develop a character and relations with the people on your obscure chat program. I, uh, don't want anyone to hold my hand through it, just maybe some direction to what I'm looking for.
Already, I know how to get a character creation system going, usernames and what not, conversations, different characters, etcetera. I just need a very simple code or something to pull it together, e.g. I need to center my pictures, colour my text (and having the player colour their text is a plus too, but not necessary), and maybe have more defined borders between my hyperlinks. This might be lots to ask, but Quest is just one of the best options for the type of game I'm making. Help is appreskiated.

Edit: Some way to get a CSS thing into the html would be awesome, but I'm not sure if it's the same as regular html. I know how to CSS, so if you could just tell me if it's the same or not, I'll consider my life complete.

Anonynn
Don't know if this'll help but ....

HaganeSteel and Jon

created an all black window pane and background. Here's the link.

viewtopic.php?f=18&t=5283&p=37260&hilit=HaganeSteel+and+Jon#p37260

DictatorKitten
Neonayon wrote:Don't know if this'll help but ....

HaganeSteel and Jon

created an all black window pane and background. Here's the link.

viewtopic.php?f=18&t=5283&p=37260&hilit=HaganeSteel+and+Jon#p37260


That actually helps a lot, I think! I might have to post a follow-up thread to see if I can get the inventory window and others relabeled, but this really does help :3D

The Pixie
It is a great idea, but you will need to code. If you know HTML and CSS that will be a great help. You cannot (as far as I know) use CSS straight from a file, but you can set CSS properties using JavaScript.

If you are used to:

#gameBorder {
background-color: #800080;
}

You would have to do:
JS.eval("$('#gameBorder').css('background-color', '#800080');")

It is not quite as neat, but it is doable, and you can change the values during a game.

A couple more links to look at:

viewtopic.php?f=18&t=5111
viewtopic.php?f=18&t=5566
viewtopic.php?f=18&t=4822

Anonynn
I didn't know how to HTML/CSS so that made it a lot harder --- but I just used their template and changed several values to black and grey if I remember correctly. If you want something super fancy, follow Pixie's advice, he/she is one of the best programmers on the site :)

DictatorKitten
The Pixie wrote:It is a great idea, but you will need to code. If you know HTML and CSS that will be a great help. You cannot (as far as I know) use CSS straight from a file, but you can set CSS properties using JavaScript.

If you are used to:

#gameBorder {
background-color: #800080;
}

You would have to do:
JS.eval("$('#gameBorder').css('background-color', '#800080');")

It is not quite as neat, but it is doable, and you can change the values during a game.

A couple more links to look at:

viewtopic.php?f=18&t=5111
viewtopic.php?f=18&t=5566
viewtopic.php?f=18&t=4822


Oh, goodness, these are excellent sources! This definitely helps, but um.. I don't suppose I could ask another teeny tiny little question of someone clearly more well-versed in Quest than I am? Not that you would be able to answer it, I'm not sure how much of my idea is really far-fetched and how much is doable!

Neonayon wrote:I didn't know how to HTML/CSS so that made it a lot harder --- but I just used their template and changed several values to black and grey if I remember correctly. If you want something super fancy, follow Pixie's advice, he/she is one of the best programmers on the site :)

Hmm, where might I procure one of these so called "templates?"

Anonynn
At the very bottom of the first page of the link in my post, they put the final (I think) version of what they were working on. Here it is...

JS.eval ("$('#statusVarsLabel').insertBefore('#inventoryLabel')")
JS.eval ("$('#statusVarsAccordion').insertBefore('#inventoryLabel')")
JS.eval ("$('#compassLabel').insertBefore('#inventoryLabel')")
JS.eval ("$('#compassAccordion').insertBefore('#inventoryLabel')")
JS.eval ("$('#placesObjectsLabel').insertBefore('#inventoryLabel')")
JS.eval ("$('#placesObjectsAccordion').insertBefore('#inventoryLabel')")
JS.eval ("$('#gamePanes').css('background-color', 'rgba(0, 0, 0, 0)')")
JS.eval ("$('#statusVars').css('background-color', 'black')")
JS.eval ("$('#statusVars').css('color', 'peru')")
request (SetInterfaceString, "PlacesObjectsLabel=Objects")
JS.eval ("$('#inventoryAccordion.ui-widget-content').css('background', 'black')")
JS.eval ("$('#inventoryAccordion.ui-widget-content').css('color', 'peru')")
JS.eval ("$('#statusVarsLabel').css('background', 'black')")
JS.eval ("$('#statusVarsLabel').css('color', 'peru')")
JS.eval ("$('#inventoryLabel').css('background', 'black')")
JS.eval ("$('#inventoryLabel').css('color', 'peru')")
JS.eval ("$('#placesObjectsLabel').css('background', 'black')")
JS.eval ("$('#placesObjectsLabel').css('color', 'peru')")
JS.eval ("$('#placesObjectsAccordion.ui-widget-content').css('background', 'black')")
JS.eval ("$('#placesObjectsAccordion.ui-widget-content').css('color', 'peru')")
JS.eval ("$('.ui-state-active').css('border', '1px solid darkgoldenrod')")
JS.eval ("$('.ui-widget-content').css('border', '1px solid peru')")
JS.eval ("$('#gamePanesFinished').html('<h2></h2>')")
JS.eval ("$('.ui-button').css('background', 'black')")
JS.eval ("$('.ui-button').css('border', '1px solid peru')")
JS.eval ("$('.ui-button-text').css('color', 'peru')")
JS.eval ("$('.ui-button').mousedown(function() { $(this).css('background-color', 'peru'); } )")
JS.eval ("$('.ui-button-text').mousedown(function() { $(this).css('color', 'black'); } )")
JS.eval ("$('#gameBorder').mouseup(function() { $('.ui-button-text').css('color', 'peru'); } )")
JS.eval ("$('#gameBorder').mouseup(function() { $('.ui-button').css('background-color', 'black'); } )")
JS.eval ("var styleSelecting = $('<style>.ui-selecting { color: black; background-color: peru;}</style>'); $('html > head').append(styleSelecting)")
JS.eval ("var styleUnselecting = $('<style>.ui-unselecting { color: peru; background-color: black;}</style>'); $('html > head').append(styleUnselecting)")
JS.eval ("var styleSelected = $('<style>.ui-selected { color: black; background-color: peru;}</style>'); $('html > head').append(styleSelected)")
JS.eval (" var arrowUrl = 'images/ui-icons_f9bd01_256x240.png'; var styleArrow = $('<style>.ui-state-default .ui-icon { background-image: url('+ arrowUrl +'); }</style>'); $('html > head').append(styleArrow) ")
JS.eval ("$('#cmdCompassN').css('background', 'black')")
JS.eval ("$('#cmdCompassE').css('background', 'black')")
JS.eval ("$('#cmdCompassS').css('background', 'black')")
JS.eval ("$('#cmdCompassW').css('background', 'black')")
JS.eval ("$('#cmdCompassNW').css('background', 'black')")
JS.eval ("$('#cmdCompassNE').css('background', 'black')")
JS.eval ("$('#cmdCompassSW').css('background', 'black')")
JS.eval ("$('#cmdCompassSE').css('background', 'black')")
JS.eval ("$('#cmdCompassU').css('background', 'black')")
JS.eval ("$('#cmdCompassIn').css('background', 'black')")
JS.eval ("$('#cmdCompassD').css('background', 'black')")
JS.eval ("$('#cmdCompassOut').css('background', 'black')")
JS.eval ("$('#cmdCompassN').css('border', '2px solid peru')")
JS.eval ("$('#cmdCompassE').css('border', '2px solid peru')")
JS.eval ("$('#cmdCompassW').css('border', '2px solid peru')")
JS.eval ("$('#cmdCompassS').css('border', '2px solid peru')")
JS.eval ("$('#cmdCompassNW').css('border', '2px solid peru')")
JS.eval ("$('#cmdCompassNE').css('border', '2px solid peru')")
JS.eval ("$('#cmdCompassSE').css('border', '2px solid peru')")
JS.eval ("$('#cmdCompassSW').css('border', '2px solid peru')")
JS.eval ("$('#cmdCompassIn').css('border', '2px solid peru')")
JS.eval ("$('#cmdCompassOut').css('border', '2px solid peru')")
JS.eval ("$('#cmdCompassU').css('border', '2px solid peru')")
JS.eval ("$('#cmdCompassD').css('border', '2px solid peru')")
JS.eval ("$('#compassLabel').css('background', 'black')")
JS.eval ("$('#compassLabel').css('color', 'peru')")
JS.eval ("$('#compassAccordion').css('background', 'black')")


Now you take it, create a Function

Return Type: None
Parameters: (leave it blank)
Script
Insert the code above.

:D

DictatorKitten
Neonayon wrote:At the very bottom of the first page of the link in my post, they put the final (I think) version of what they were working on. Here it is...

JS.eval ("$('#statusVarsLabel').insertBefore('#inventoryLabel')")
JS.eval ("$('#statusVarsAccordion').insertBefore('#inventoryLabel')")
JS.eval ("$('#compassLabel').insertBefore('#inventoryLabel')")
JS.eval ("$('#compassAccordion').insertBefore('#inventoryLabel')")
JS.eval ("$('#placesObjectsLabel').insertBefore('#inventoryLabel')")
JS.eval ("$('#placesObjectsAccordion').insertBefore('#inventoryLabel')")
JS.eval ("$('#gamePanes').css('background-color', 'rgba(0, 0, 0, 0)')")
JS.eval ("$('#statusVars').css('background-color', 'black')")
JS.eval ("$('#statusVars').css('color', 'peru')")
request (SetInterfaceString, "PlacesObjectsLabel=Objects")
JS.eval ("$('#inventoryAccordion.ui-widget-content').css('background', 'black')")
JS.eval ("$('#inventoryAccordion.ui-widget-content').css('color', 'peru')")
JS.eval ("$('#statusVarsLabel').css('background', 'black')")
JS.eval ("$('#statusVarsLabel').css('color', 'peru')")
JS.eval ("$('#inventoryLabel').css('background', 'black')")
JS.eval ("$('#inventoryLabel').css('color', 'peru')")
JS.eval ("$('#placesObjectsLabel').css('background', 'black')")
JS.eval ("$('#placesObjectsLabel').css('color', 'peru')")
JS.eval ("$('#placesObjectsAccordion.ui-widget-content').css('background', 'black')")
JS.eval ("$('#placesObjectsAccordion.ui-widget-content').css('color', 'peru')")
JS.eval ("$('.ui-state-active').css('border', '1px solid darkgoldenrod')")
JS.eval ("$('.ui-widget-content').css('border', '1px solid peru')")
JS.eval ("$('#gamePanesFinished').html('<h2></h2>')")
JS.eval ("$('.ui-button').css('background', 'black')")
JS.eval ("$('.ui-button').css('border', '1px solid peru')")
JS.eval ("$('.ui-button-text').css('color', 'peru')")
JS.eval ("$('.ui-button').mousedown(function() { $(this).css('background-color', 'peru'); } )")
JS.eval ("$('.ui-button-text').mousedown(function() { $(this).css('color', 'black'); } )")
JS.eval ("$('#gameBorder').mouseup(function() { $('.ui-button-text').css('color', 'peru'); } )")
JS.eval ("$('#gameBorder').mouseup(function() { $('.ui-button').css('background-color', 'black'); } )")
JS.eval ("var styleSelecting = $('<style>.ui-selecting { color: black; background-color: peru;}</style>'); $('html > head').append(styleSelecting)")
JS.eval ("var styleUnselecting = $('<style>.ui-unselecting { color: peru; background-color: black;}</style>'); $('html > head').append(styleUnselecting)")
JS.eval ("var styleSelected = $('<style>.ui-selected { color: black; background-color: peru;}</style>'); $('html > head').append(styleSelected)")
JS.eval (" var arrowUrl = 'images/ui-icons_f9bd01_256x240.png'; var styleArrow = $('<style>.ui-state-default .ui-icon { background-image: url('+ arrowUrl +'); }</style>'); $('html > head').append(styleArrow) ")
JS.eval ("$('#cmdCompassN').css('background', 'black')")
JS.eval ("$('#cmdCompassE').css('background', 'black')")
JS.eval ("$('#cmdCompassS').css('background', 'black')")
JS.eval ("$('#cmdCompassW').css('background', 'black')")
JS.eval ("$('#cmdCompassNW').css('background', 'black')")
JS.eval ("$('#cmdCompassNE').css('background', 'black')")
JS.eval ("$('#cmdCompassSW').css('background', 'black')")
JS.eval ("$('#cmdCompassSE').css('background', 'black')")
JS.eval ("$('#cmdCompassU').css('background', 'black')")
JS.eval ("$('#cmdCompassIn').css('background', 'black')")
JS.eval ("$('#cmdCompassD').css('background', 'black')")
JS.eval ("$('#cmdCompassOut').css('background', 'black')")
JS.eval ("$('#cmdCompassN').css('border', '2px solid peru')")
JS.eval ("$('#cmdCompassE').css('border', '2px solid peru')")
JS.eval ("$('#cmdCompassW').css('border', '2px solid peru')")
JS.eval ("$('#cmdCompassS').css('border', '2px solid peru')")
JS.eval ("$('#cmdCompassNW').css('border', '2px solid peru')")
JS.eval ("$('#cmdCompassNE').css('border', '2px solid peru')")
JS.eval ("$('#cmdCompassSE').css('border', '2px solid peru')")
JS.eval ("$('#cmdCompassSW').css('border', '2px solid peru')")
JS.eval ("$('#cmdCompassIn').css('border', '2px solid peru')")
JS.eval ("$('#cmdCompassOut').css('border', '2px solid peru')")
JS.eval ("$('#cmdCompassU').css('border', '2px solid peru')")
JS.eval ("$('#cmdCompassD').css('border', '2px solid peru')")
JS.eval ("$('#compassLabel').css('background', 'black')")
JS.eval ("$('#compassLabel').css('color', 'peru')")
JS.eval ("$('#compassAccordion').css('background', 'black')")


Now you take it, create a Function

Return Type: None
Parameters: (leave it blank)
Script
Insert the code above.

:D


Oh rad! Thank you lots!

Anonynn
Don't thank me! Haganesteel and Jon did all the work, and Pixie explained how to be super thorough with the coding. :D

george
There is a slightly easier way to add CSS, see here viewtopic.php?t=4204#p27936 .

The Pixie
And here is another way (read the whole thread, there is a correction later):
viewtopic.php?f=18&t=4747&p=32949&hilit=css#p32949

This topic is now closed. Topics are closed after 60 days of inactivity.

Support

Forums