teccCSS (Xojo Web Plugin)
Granted, CSS is not everyone's best friend. With Xojo Web 2 everyone can define their own BootStrap theme, or enter their own CSS changes in a tag in the HTML header in the IDE to make changes on an existing theme. This means that the additional CSS information can overwrite the standard theme where desired.
It's not particularly complicated either. CSS now has various options, but of course, one indeed has to deal with another topic (and has to learn it).
To make it easier for beginners, we developed teccCSS. The class of this plugin does nothing else than create the CSS in the background (upon your configuration) and integrate it into the header. The user only has to incorporate the control on the WebPage and make the desired adjustments.
You can download the plugin from xojodocs.com (located in the Downloads category). The download includes the class and a demo project.
The colors and effects are ugly in the demo project, but the purpose is to clearly show what is changing in a control, but of course, you will probably make more sophisticated (and only a few) adaptions!
You can switch in the Demo between 2 layouts as shown in these screenshots:
Someone with more experience can read the generated CSS directly from the class, integrate it himself, and then no longer needs the plugin, in case changes should apply to all web pages in a project. Please look into the "opening event" of the class in the demo project (you can use 3 variables to get the desired information):
// You can use the minified CSS in any of your projects w/o the class teccCSS // please include it into a <style></style> tag in HTML Header under Web Settings // in your APP Settings of your project (in the IDE). // you can as well continue the class and use the codeXojo outcome and put into // the opening event your first webpage. Please ensure that teccCSS1 is replaced // by the actual name of your own class. 'teccCSS1.ButtonHoverAnimation = teccCSS.ButtonHoverAnimations.LargeShadow 'teccCSS1.CalendarBootstrapIcon = "calendar-month-fill" 'teccCSS1.CalendarColor = &c797979 'teccCSS1.ComboboxBackground = &c75D5FF 'teccCSS1.ComboboxHover = &c005392 'teccCSS1.ComboboxText = &c0096FF 'teccCSS1.ControlsWithoutBorder = True 'teccCSS1.CustomizeDatepicker = True 'teccCSS1.CustomizeScrollMore = True 'teccCSS1.CustomizeWebButtonAnimation = True 'teccCSS1.CustomizeWebComboBox = True 'teccCSS1.CustomizeWebListbox = True 'teccCSS1.CustomizeWebPopupmenu = True 'teccCSS1.CustomizeWebtoolbar = True 'teccCSS1.CustomizeWebtoolbarBrandLogo = False 'teccCSS1.CustomizeWebTooltip = True 'teccCSS1.DisabledDates = &cD69696 'teccCSS1.enabled = True 'teccCSS1.HeaderBackground = &c3774FF 'teccCSS1.HeaderBottomLinePixelSize = 4 'teccCSS1.HeaderBottomStyle = teccCSS.BorderStyles.solid 'teccCSS1.HeaderFontSize = 24 'teccCSS1.HeaderRowHeight = 50 'teccCSS1.HeaderText = &cFFFFFF 'teccCSS1.MinimalRowHeight = True 'teccCSS1.PopupmenuBackground = &cFEFC78 'teccCSS1.PopupmenuHover = &c929000 'teccCSS1.PopupmenuText = &c521B92 'teccCSS1.RoundedCorners = True 'teccCSS1.rowEven = &cD9F1FD 'teccCSS1.rowOdd = &c8DD4FC 'teccCSS1.ScrollMore = &cFFFFFF 'teccCSS1.Simpleanalyticsdotcom = False 'teccCSS1.SubmenuArrow = &c0000FF 'teccCSS1.SubmenuBackground = &c797979 'teccCSS1.SubmenuHover = &cFF0000 'teccCSS1.SubmenuText = &cFFFFFF 'teccCSS1.TooltipArrow = &cFF0000 'teccCSS1.TooltipBackground = &c75D5FF 'teccCSS1.TooltipBorderSize = 2 'teccCSS1.TooltipBorderstyle = teccCSS.BorderStyles.solid 'teccCSS1.TooltipColor = &c0096FF 'teccCSS1.WebtoolbarArrow = &c008F51 'teccCSS1.WebtoolbarBackground = &cEAEAEA 'teccCSS1.WebtoolbarBrand = &c0096FF 'teccCSS1.WebtoolbarBrandFontSize = 24 'teccCSS1.WebtoolbarBrandFontWeight = 400 'teccCSS1.WebtoolbarBrandHover = &c011993 'teccCSS1.WebtoolbarBrandPaddingBottom = 10 'teccCSS1.WebtoolbarBrandPaddingLeft = 5 'teccCSS1.WebtoolbarBrandPaddingRight = 5 'teccCSS1.WebtoolbarBrandPaddingTop = 5 'teccCSS1.WebtoolbarHover = &cFF2600 'teccCSS1.WebtoolbarLabel = &cFF9300 'teccCSS1.WebtoolbarLinks = &cFF7D78 Var codeFullCSS As String = Me.codeFullCSS Var codeMinifiedCSS As String = Me.codeMinifiedCSS Var codeXojo As String = Me.codeXojo #Pragma unused codeFullCSS #Pragma unused codeMinifiedCSS #Pragma unused codeXojo
In a productive environment, it is recommended to only use the minified CSS file for performance reasons.
Thanks to the many contributors in the Xojo forum who gave many tips and hints for "CSS hacks." Since I am sure to forget a few colleagues, I won't mention anyone directly and ask for your and their understanding. But without the community and your help, Xojo would be only half the value and only half the fun.
I tested the plugin only with the latest version of Xojo Web 2. Hopefully, there will be more change options directly in the IDE shortly so that parts of the plugin will be superfluous.
Any future change of Xojo might or might not break this plugin, but the same will apply to any CSS change you will do on your own.
This plugin is freeware and it is unconditionally available for any use but is without warranty, and w/o any official support.
Sign in or become a blog.xojoDOCs.com member to join the conversation.
Just enter your email below to get a log in link.