I’m trying to write a fairly simple web app that will take some incoming data and display it on the page. Nothing fancy - it’s to be used in a digital signage application to display a schedule that gets updated throughout the day.
Right now I am using a WebListbox to display the data, but I don’t want the “listbox” look. I don’t want the lines to alternate colors. I don’t want dividing lines between the columns. I want to change the text size. Etc.
I am sure I can do this with web styles but there’s no simple explanation how in the docs and I am not knowledgeable in regards to CSS.
Someone else may give you a different answer, but CSS is probably the best approach. It does have a bit of a learning curve. I would recommend: https://bootswatch.com/ for a bootstrap theme. Using a theme gives you a good starting point. You can use sites like: Free Online CSS Beautifier / Formatter - FreeFormatter.com to “beautify” your CSS. This will make it easier to read. Programs like Notepad ++ are SUPER helpful as well.
In your boostrap theme you will probably see a line like:
@Jon_Ogden I agree CSS is the way to go. I wrote a bit about it on my blog. Here for instance about changing the height of rows. CSS sounds more complicated as it really is, is not much different to the styles of web 1. There will be a learning curve, but I’m sure you will master this quite quickly.
Pardon my ignorance but where do you put the Bootstrap theme file? I was looking through the User Guide and as is typical, it talks about using Bootstrap but doesn’t tell you where the css file goes…
To use one of the the themes at Bootswatch.com, click the Download button’s menu (not the button itself) and choose the file titled bootstrap.min.css . That’s the only file you need and it must have that file name to work in Xojo. Once you have downloaded your theme, drop it into your project to use it.
So I’m working through everything, trying to figure out what in the CSS file changes what on the page. So here’s a question. The CSS file has a number of options for tables like “Success”, or “Warning” or “Danger.” How do you set your listbox field to use that color option that is in the CSS file? Do you call out the CSS label from the style property?
This is an ability that makes more sense being called from a button or something, so that’s how I setup my test. Added a Listbox and a Button to the page. Add this method:
Public Sub SetListIndicator(lb as WebListBox, indicator as String)
ExecuteJavaScript( "$('#" + lb.ControlID + "_table').addClass('table-" + indicator + "');" )
End Sub
And called as:
SetListIndicator( Listbox1, "warning" )
Unfortunately you can’t set CSS classes to the DOM elements using WebStyle and setting the Indicator property of a WebListbox has no effect (64025)
I’m trying to set the background color of the listbox to something other than white and no matter what I do in the CSS file the background is still white!
This is way too difficult. Why didn’t Xojo add hooks in the IDE to do this sort of thing.
Thank you! See I would never have known that. Because I was looking at .table items. So there’s .XojoListbox items. There’s .striped-table items. How are you supposed to know what to use? Trial and error?
One last question - I want to have a header but I don’t want the sort arrows. I’ve managed to change the header background color what I want but I don’t want the up/down arrows. Can those be removed?
The tool you need for all of this is the browser inspector. By right-clicking an item in the browser window and selecting “Inspect Element” from the context menu, you can open the inspector. On the left you’ll see the listing of all items in the currently loaded page’s Document Object Model. By stepping up and down the three, you’ll see the the right-hand sidebar will update to show what CSS is applied to those objects.
You might want to give http://brackets.io/ a try as well. It will be soon out of maintenance. I’m personally not using it all the time, but I noticed that particularly beginners like it pretty much to get into the topic. Si I’m mainly using it when teaching people CSS.
That was the feedback I got as well when I wrote this article. People didn’t know about brackets and it apparently helped them to get started. The article is quite long. Brackets is described in the chapter “Let’s talk about tools”. Once you are a bit familiar with CSS, the other tools mentioned by @Anthony_G_Cyphers are the better choice, as they are more robust and things are changing quickly on the web, and the big ones are all reflecting the newest developments.