WebDev is definitely a great environment for developing Web based business applications. But as with any environment, there is a limit to what can be achieved out of the box. This week we will review a few methods that I have used on projects to push the Look and Feel envelop of WebDev. We will be looking at some CSS tricks, Jquery Tricks, but most importantly we will be looking at how I use Chrome Developer tools to examine the generated WebDev code in order to figure out what and where my tweaks need to be.

It turns out my first example was more in depth than I thought, so this will actually be a serious of articles and webinars. In these first installment we will look at using CSS files for Private Branding.

Using CCS files to Private Branding

Our first example comes from a site I am working on that will be private labeled for several clients. It will be a hosted solution with a single site and database, but the look of the site will need to match each clients site, Based on a “SiteID” parameter sent for the first page.

We decided to do nongraphic buttons because this site also supports multiple languages, and that becomes a nightmare with graphics.

Here is an example of our button

And here it is when the mouse is hovered over it.

All of that is easy to do using a WebDev Style, in fact lets look at it as a WebDev Style.

You can see the CSS style is set to local, we will revisit that shortly. We have the color of the text set to Black, 12 pt Arial Bold. We have a radius of 12 pixels,to give us that nice rounded shape to the button. and we have the background set to light gray.

You can also see that we don’t have any images defined for the button.

The final step to setting up this style was to press the more options button which brings us to this interface.

Notice there is a Normal Option and an Over Option (Mouse hover). If you select the Over Option you will see we have everything set to Undefined, except the color. We set the Color to Red. Undefined means, “Use the setting from the Normal Option”

The only other setting we change for Over is to have the background color be gray instead of light gray.

This gives us a button that is light gray with black text, that becomes dark grey with red text when the mouse moves over it, “Lighting up the button”

This would all be well and good, except with this particular site we want the client to be able to control all of his colors, etc. Which means we need to let him provide us with a CSS file. So we need to do things a bit different. First we go to the Page Menu and Choose Styles -> Edit the CSS Styles.

We click the “New” button to create a new CSS Style

Then we click rename and name our CSS style the same as out WebDev Style “RoundTextButtons”

And now we set all the same settings for normal, although a few are in different spots.

And then we set the two settings for the Over Option.

And finally save our new CSS style by clicking the green check box.

Now we go back and edit our WebDev Style,

And we set the CSS style to our newly created “RoundTextButtons”

If you were to test the page you would see that the button looks exactly the same as it did before, so what was the point, you might ask? Well its all about how the HTML code is generated.

Let’s take a look at the code via Chrome Developer Tools. The other browsers have similar tools, chrome is just the one I use. So I run a test of the page. I right click on the button, and

Which create a split screen window, that allows you see both the visual page and the generated code. Similar to this

This tool is a very handy tool that you will see me use constantly as I push the envelop of WebDev. In some of the other examples you will see some of the more advanced features available via the developer tools.

What we want to look at in this case, is the classes assigned to our button, you will see there are several include one called “1-3”. That is a dynamically generated class that WebDev generated based on our WebDev Style. Of course that name could change we we add a button to the screen or anything, so that wouldn’t work well as a CSS class to override.

Now lets look our second example, using a CSS style on our WebDev Style.

Notice the difference? It now includes our CSS class called RoundTextButtons, so now we put that to use? If you are familiar with HTML coding, then you know a CSS style can be overriden by a CSS style sheet, so all we need to do is create a CSS style sheet and reference it in our page.

So step one is to create the style sheet. Which we could do by doing a bunch of googling and figuring out all the CSS settings that match that WebDev CSS interface, but I like short cuts, how about you?

Instead we go back to the Edit CSS styles screen. Select our RoundTextButtons CSS Style and Duplicate it. The reason we are duplicating it will become obvious in a moment.

So that created a CSS classed called “Copy_of_RoundTextButtons”, select it and press the CSS Export Button. Which ask for a name and location for the file. Notice it offers to save it in our project folder, but in the case we are just using this for a temporary purpose, so instead I saved it to my temp directory.

Now what we just did was tell WebDev that the “Copy_of_RoundTextButtons” CSS style is no longer define in the WebDev interface and instead comes from this file. So it removed it from the Project Styles interface and instead added it to the External References tab. This would be great if we only wanted to have one CSS file that we can tweak. But what our end result is we want to be able to have a different CSS file for each client. We just used the feature as a short cut to generated the CSS for us.

So we want remove the external reference, which will completely remove the “Copy_of_RoundTextButtons” function that we created.

So lets take a look at the CSS file that just got created.

Notice the Class names are incorrect, so we need to change them.

The purpose of this article isn’t to teach you CSS but if you take a look at that file you should notice how must of the lines correspond to settings we made in the interface.

One last change we need to make. Due to the nature of how WebDev generated all the CSS classes, etc. Sometimes one generation order happens in a way that causes another WebDev class to override our CSS file. To avoid that situation, we use the CSS keyword Important for all of our settings which will keep them from being overridden. I am sure this makes CSS purist cringe, but we do what we have to do! So now our file looks like this:

So now we the settings for our CSS file, we just need to come up with logic to use it for each client. Here’s my method:

• Each Client has a Client ID
• Under the Web Folder there is a directory called ClientFiles
• In that directory are all of the files, graphics, etc. that are used for overriding the interface with each client.
• I use the Client ID as part of my naming convention.

You can see my directory structure here

So now we just save a copy of our css folder in both directory 1 and 2, calling it Custom.CSS in both directories.

Of course if we were going to leave all the settings the same then it really would make sense to do all of this work would it. So lets edit the file for ClientID = 2, which is in Folder 2. See now slick that is 🙂

When testing my CSS overrides I like to use really obnoxious and obvious changes, that makes it easy to see that the change takes place, even for my color blind buddy Andy! So here is my Custom.CSS for Client 2.

I changed both the text and background colors, for both normal and hover. I made the font Italic, and I even made the button square instead of rounded.  You might think I could make the button Square by just removing the Radius lines, however remember this is an Override file, so if we don’t have any radius setting in our CSS style, then the ones from our WebDev style will be used and we will still get a rounded button.

One thing to note is when testing and tweaking your CSS files, you might have to force the browser to refresh so that the new CSS file gets loaded. I have a trick for that as well, but that’s for another day!

So now all we need to do is have our page load the correct CSS file for us.

First we add a parameter to the page in order to get our ClientID. In the real site this is handled via some global class logic.

And then during the init we add some HTML code to our page to load our Custom.CSS file.

Notice that I am adding my code to the end of the HTML page. The reason for that is CSS files are prioritized in the order they are loaded, so I want my file to be the last one loaded.

If we run another test of our page passing in ClientID = 1 the page looks identical to how it did before. But now if we run it for ClientID = 2 our button looks like this

And like this when the mouse is over it.

Not the most attractive button, but we definitely know that our CSS settings are taking effect!

So now we have a site that can have a custom look for each client, by simply having a different CSS file for each. Of course there are limits to the changes that can be made. For instance if you were to make the font to large, then the caption would no longer fit, and would create overflow issues etc. But within reason you can definitely have a different looking page for each client.

This concludes our first example, in the coming weeks we will look at some additional CSS tweaks as well as some JQuery tweaking that can coming in handy as you strive for that “Perfect WebDev Site”

[suffusion-the-author display=’author’]

[suffusion-the-author display=’description’]

• WEBDEV