grBlue css theme

[richard2007]

is it possible to add to the built in CSS styles so that the border of a text field will change colour when it has the focus?

[StephenP]

Re: grBlue css theme

You can modify any of the themes (you just have to use the new modified name). Or you can just add additional CSS info in the Properties -> CSS -> Local CSS definitions property box.

The snippet you need to add looks like this (just specify your color):

.GrBlueEdit:focus {
border: 1px solid #800000;
}

[Steve Wood]

Re: grBlue css theme

You can add to the official style.css by opening it in the editor and adding new rules, or you can create your own stylesheet. If you create a new rule similar to below then every text box will have an orange border when the field has focus:

.grBlueEdit:focus{border:2px solid orange}

Here is same for mouse over:

.grBlueEdit:hover{border:2px solid red}

This affects ALL text boxes. If you want to affect only particular ones, you need to do this in the inline CSS settings per field or set it inside <style> tags on the A5W page where the form resides.

Thanks for the reminder, I may add this to my standard css as it helps with data-entry.

Edit: Sorry, I see I cross-posted with Stephen.

[richard2007]

Re: grBlue css theme

this is what i was looking for; this is something i want throughout the application.

.GrBlueEdit:focus

Thanks for your help.

[richard2007]

Re: grBlue css theme

thanks Guys, ive put this in and altohugh its only a little thing, it looks quite cool and will be useful to the users.

[Fulltimer]

Re: grBlue css theme

You can add to the official style.css by opening it in the editor and adding new rules, or you can create your own stylesheet. If you create a new rule similar to below then every text box will have an orange border when the field has focus:

Steve,

You mention "official style.css". Can you list a breadcrumb directive how to get to this file from the top most level?

Secondly, if I change something there, is it negated if I also use something like .Grblue? I don't want to go around on all my pages making this kind of update. I've worked with styles but never the style sheets themselves. I don't know where they are!

[richard2007]

Re: grBlue css theme

Tom,

if you open your project properties you can see your style sheet at the top, click to open it and then on the right hand side you can click 'edit style'. i believe this then makes a local style for you to do what you want with.

if you want to edit in a text editor, you can open the sheet directly - this is the path to mine - C:\Users\Richard Harris\Documents\Alpha Five V11\Mortgage Manager\Mortgage Manager.WebProjects\Default.WebProject\css\GrBlue

[Steve Wood]

Re: grBlue css theme

Thinking about this long term, I would suggest not altering Alpha's style sheet and instead adding your own; it would be too easy to accidentally wipe out your style sheet modifications.

Instead, just create a new style sheet named anything, "default.css" or "mystyle.css". For your example, just add one line like ".GrBlueEdit:focus {border: 1px solid #800000;}" and save the file in the CSS folderand publish it to your site.

Then you need to make one final step to link that new style sheet to your web page(s). If all of your grids are inside a TabbedUI, then add the new style sheet to the Property named CSS > CSS Linked Files, enter something like this: "css/tabbedui.css". If you need to link the style sheet to a particular A5W page, open that page and click Format > Link Style Sheet and select your custom file.

Be sure to clear your browser cache and refresh the browser.

This also keeps you from having to make a local copy of Alpha's style sheet; I always do that step, but its totally possible to skip that step if you never need to alter their style sheet.

Here is how mine looks after implementing this nice feature:

[Steve Wood]

Re: grBlue css theme

I've refreshed my understanding of this and if you are going to add CSS selectors to Alpha's official CSS files, here are some things you should be aware of:

Alpha has two style sheet editors: the Web Style Builder shown in attached image 1, and the "simple" editor shown in image 2 (I don't know that it has an official name).

The simple one can edit any style sheet, Alpha's or your own custom style sheet. The Properties area to the right allows edit for most, but not all, possible CSS properties, but you can easily switch to code view and apply any rules needed.

The Web Style Builder however, is specifically designed to manage style for Alpha's components (grid, dialog, menu, etc.). You can add selectors to it but they will NOT appear on the first tab called "Parts". Instead, you will have to select the "Selectors" tab to see your custom edits. "Parts" is where the editor organizes the selectors in to logical categories.

If you are going to add to Alpha's style sheet, I would put your additions and modifications at the very top. If Alpha updates their style sheet (like they recently added CSS for the slider object), then you can easily find your alterations to apply to the new CSS file.

As mentioned earlier, one good reason to add your own custom style sheet is you can continue to use the "stock" Alpha style sheet and not make a local copy. That way you can switch styles with a little more ease.

[richard2007]

Re: grBlue css theme

it was a little too late for me to make my own as i startd ammending Alphas some time ago, however recently i have made a change to the css that i need to reverse. i have gone through the style sheet with a fine tooth comb in code mode and directly in EW4 and i cant see where to make the change.

its only on one type of control which is a text box that has a control inside it such as lookup or date. please see attached pic. if anyone knows the name of the object id be really grateful. i have removed all shadow code from the CSS yet the shadows persist.

Drop_Shadow.PNG