User-selected CSS

[Steve Workings]

Anyone know how to do this:?

My project is based on the MoBlue style, so ProjectStyle is set to MoBlue, and most components are set to ProjectStyle. Works well.

But, MoBlue on an iPad at night is way bright, so I want to build a MoNight style and allow the user to just make the switch.

I see the a5_application file has DIM projectStyle as C = "MobBlue" and I'm betting this is a good place to start, but I don't know where to go from there.

Basically, I want the user to have a button that says "Use Night-time Style" and just allow the switch, probably just for that session.

[Pat Bremkamp]

Re: User-selected CSS

Steve,

I haven't looked at MobBlue, but all the styles I've looked at are named "style.css" and the name identifies the directory they are located in. So, you can set up a session variable to hold the directory name. For example, in one of my apps I use "Session.Colors", then the stylesheet link is

<link rel="stylesheet" type="text/css" href="css/<%a5 ?Session.Colors %>/style.css" />

You can probably put this in the overrides section of the page.

[Steve Workings]

Re: User-selected CSS

Thanks Pat, I can see how this would work with a page, but a tremendous portion of my app is AJAX popups, and I'm assuming - without trying it first - that the component's definition is not going to pay attention to the page style.

I was looking at overrides, but that means editing each a lot of pages right now. It seems to me that since we have e.tmpl.style_name = "<ProjectStyle>", then I should be able to make a one-time adjustment per session to however <ProjectStyle> is being defined.

[DBM]

Re: User-selected CSS

Steve,

I don't have the knowledge to offer a solution but in the Webroot there is a file called a5_application.a5i which contains the reference to the project style


The following is the section relating to web properties

'-----------------------------------Web Project Properties ----------------------------------------------------------
'This code loads Project Properties. At runtime, your Xbasic code can read Project Properties as follows:
'dim projProp as p
'projProp = a5_getWebProjectProperties()


dim _webProjectProperties as c
_webProjectProperties = <<%txt%
DIM aexFiles as P
DIM aexFiles.fileNames as C
DIM fileDownload as P
DIM fileDownload.allowedFilenamePatterns as C = "*.xls*,*.pdf,*.jpg,*.jpeg,*.bmp,*.png"
DIM fileDownload.allowedFolderPatterns as C
DIM fileDownload.blockedFilenamePatterns as C
DIM projectStyle as C = "GrGray"
DIM useMicrosoftXPSPrinterForPDF as L
DIM convertXPSToPDF as L = .T.
DIM jsLibraries as P
DIM jsLibraries.jQueryCore as C = "Load Internal Version"
DIM jsLibraries.jQueryUI as C = "Load Internal Version"
DIM jsLibraries.links as C
DIM jsLibraries.includeImageGallery as L
DIM jsLibraries.jQueryCoreVersion as C = "1.6.2"
DIM jsLibraries.jQueryUIVersion as C = "1.8.16"
DIM cssLibraries as P
DIM cssLibraries.jQuery as C = "No Theme"
DIM email as P
DIM email.smtp_server as C
DIM email.smtp_username as C
DIM email.smtp_password as C
DIM email.smtp_port as C
DIM email.smtp_SSLOption as C
DIM email.from as C
DIM email.from_alias as C
DIM email.outbox as P
DIM email.outbox.tableType as C = "SQL"
DIM email.outbox.connectionString as C
DIM email.outbox.tableName as C
DIM email.outbox.fieldmap as C
DIM email.outbox.sequenceName as C
DIM repository as P
DIM repository.tableType as C = "SQL"
DIM repository.connectionString as C
DIM repository.tableName as C
DIM repository.fieldmap as C
DIM workQueue as P
DIM workQueue.tableType as C = "SQL"
DIM workQueue.connectionString as C
DIM workQueue.tableName as C
DIM workQueue.fieldmap as C
DIM helpTable as P
DIM helpTable.tableType as C = "SQL"
DIM helpTable.connectionString as C
DIM helpTable.tableName as C
DIM helpTable.fieldmap as C
DIM applicationGlobalVariables as C
DIM calendar as P
DIM calendar.license as C = "not licensed"
%txt%

dim gv as p
gv = global_variables()
a5_loadWebProjectProperties(gv,_webProjectProperties)

%>

David.

[Steve Workings]

Re: User-selected CSS

Yeah David, that's what I was referring to earlier, specifically the DIM projectStyle as C = "GrGray" part. If there's a dynamic loading of this for each page/component/session, then I could insert whatever I want there, but I haven't figured out whether or how that's possible yet, assuming that's the right trail.

[DBM]

Re: User-selected CSS

Steve,

For an individual component the style tab can be set to <Session:varname> which presumaly allows the style for that component to be manipulated (I wouldn't know how).

By default the style for a component shows as <Project Style> and by using the Edit -> Bulk Operation -> Global Replace of Component Style option the <Project Style> tab can be changed on all components for <Session:varname>. Just type it in the New Style Name box then select and apply on all or relevant components.

Just some thoughts. I know it's not really the approach you wanted.

David.

[Steve Workings]

Re: User-selected CSS

This is not what I want David. I do not want to replace the style in design. I want the user to be able to choose between styles at will --- this does not involve the bulk operation.

[Steve Wood]

Re: User-selected CSS

Steve, Al reminded me that this is something done in my Framework, easy to reproduce. We have a dropdown of style names, which it gets by scanning a folder named css\themes. So if there were styles in css\themes\default and css\themes\red, the dropdown would containt Default and Red. Then when they select a style it just sets the folder value in the following string in a header A5W page that sits at the top of every A5W page, and TabbedUI if appropriate:

<link rel="stylesheet" type="text/css" href="css/theme/default/style.css">

[Steve Workings]

Re: User-selected CSS

OK, I had initially semi-rejected Pat's response because of the huge number of AJAX windows my app uses. But, as long as the popups are designed to "use parent style" which most or all of them are, this should work. And, since every page has a single pagetop.a5w at the top of it, this may be easier than I thought. I'll give 'er a try one of these days.