This week’s Uncle Pete’s corner will be covering Custom CSS.

In WebDev we have Skins, Palettes, WebDev Styles, CSS Styles. What’s a programmer to do! If you add a web designer (not WebDev programmer) to your team the first thing they are going to ask is how you can incorporate their CSS into your WebDev site. We will look at a couple of simple things I have done with custom CSS and have a general discussion about CSS and WebDev Styles.

Let’ start with some general information about all the options that effect the look and feel of your WebDev sites. Then we will get into the details.

WebDev Skins

• Defines the general look and feel of your site
• Is set in the Project Description, but can also be set on a page.
• There are several provided by pcSoft
• They provide a good starting point for your customization
• You can create your own, but that is beyond this discussion

Color Palette

• Defines the color scheme for your site
• Also set in the Project Description , but can be set on a page as well
• Think of it as setting “Constants” for your colors
• Tip: I always copy an existing Palette and create a project specific one to start a new project
• Tip: Try to use Palette settings when setting up styles, as that will let you change your color scheme by just changing the Palette.

WebDev Styles

• A complete set of style setting that can be applied to a control
• The skins come with several styles to start with
• Tip: Copy the existing styles and create project specific ones, that way it will be easier to change later
• Tip: You much checkout the style sheet in order to edit styles

CSS Styles

• Web “standard” color and font settings
• Can be applied to a WebDev Style
• You edit them via the WebDev Interface, not a CSS tool
• Using a CSS style instead of the “Local to Control” setting will decrease generated web page size. But as we will see it may not be worth it.

So Skins and Palettes make a lot of sense, but why the heck do we have WebDev Styles and CSS styles, and why are the so convoluted? I of course don’t have any inside information but from an outsider looking it, it seems to be that they started with the Style interface they already had for WinDev, but because the web already has a “style” standard, they had to also support CSS styles, so they tried to cobble the two together. I would much rather seem then fully embrace CSS and create one style interface that is 100% CSS under the covers. But for now we have to work with what we have so let’s move on to the real meat and Potatoes of this article.

The purpose of this article is to show you where and how I have used CSS in my WebDev sites but I think we need to start with where I don’t and why I don’t.

Tip: Remember if your project is in the SCM, you will need to check out the style sheet in order to modify styles. From the SCM tab, drop down “Style Sheet” and select “Check out the style sheet from this project”

So let’s look at the style interface for a typical edit control. From the description for the control, chose the Style tab.

Then on the WebDev Style popup page, click on the choose button.

Which brings you to the Editing the style Sheets window.

Duplicate the style, so we can edit a copy of it, by pressing the Duplicate button. You will notice it made a copy of the style and added it to the list.

Click the Modify button to edit the newly created style. Again this article isn’t specificly about WebDev styles but we need to see a few things about then to understand how CSS plays into the mix. On the WebDev Style editing screen you will see a drop down for “Element” this let’s you select the different parts of the style to configure. The listed “Elements” will be different based on what type of control the style goes with. The Elements available for an edit control are Caption, Input area, Border/Bckgrd, Background image, Overflow, Calendar button, and Effects.

Notice that Caption and Input area have “(CSS)” behind them. This indicates that these two areas can be set via a CSS style. And there is the rub for me. Notice to set backgrounds and borders, etc. you have to do via the WebDev styles, not CSS styles, to me this seems to make some busy work if I try to use CSS styles, I still have to setup WebDev styles for backgrounds and borders, which when setting up cell and tables is very important. And if I have a Web designer involved he is only giving me CSS stuff and I have to mix and match. Problem 1

So now let’s look at the settings, chose Caption from the Element drop down.

You should notice that there is a CSS Style selection, that lets you select one of the CSS styles from your project, and there are also specific font settings as well.

This screen looks very much like the style editing screen for a specific control but operates a little differently. Notice some of the specific font settings are set to “Undefined” this means that it will use the setting from the selected CSS style.  Any settings that are not “Undefined” will override the settings from the CSS style. For instance changing the CSS style to “Warning_Red” does not change the Color of the caption so we don’t really get the effect we expected from “Warning_Red”

No problem you say. Just set Color to “Undefined”. When you do that, you will notice that it also changes the CSS style to Local

We will discuss Local more later, but for now just know that it means that all settings for this style are locally defined and not linked to a CSS style. Since the style is no longer linked to a CSS style we are not getting the Warning_Red we are expecting either, in fact what will happen now if the default color of the page will be used.

So you think, reselecting the “Warning_Red” CSS style will now take care of it since we have the color set as undefined.

Wrong again! Its a crazy game of Wack-a-Mole that I can’t figure out. Problem 2

Remember I said the editing screen looked the same as the editing screen for a specific control, but works differently. Let’s go to back to the Style tab for the Edit Control.

Choose any other CSS style on this screen, and notice that all of the Font specific settings change to the selected style.

What the heck? Just the opposite of the behaviour we saw on the style editing screen that looks exactly like this. Problem 3

So if we now reselect the “Warning_Red” CSS style we get the intended effect.

This issue is that this is done as an Override of the base style, and only effects this one control. Notice it shows that we now have 4 Overloads of our base style

Remember I said that your generated web pages will be slightly smaller if you use CSS styles with your WebDev styles instead of the “Local to control”. The reason why is that the CSS styles will only be loaded one for the page, so if you have 6 edit controls using the exact same WebDev Style, those font settings are only specified once. If your WebDev style is set to “Local to Control” those font settings will be specified on each of those 6 edit controls. That sounds like a lot, but in reality it is only a few characters, in fact here is what is generated for the “Warning_Red” settings

{font-family:Arial, Helvetica, sans-serif;font-size:9pt;color:#FFFFFE;text-align:center;vertical-align:middle;background-color:#CC0000;}

On most pages this is going to amount to a few hundred to maybe a one or two thousand extra characters. Again sound like a lot, but unless you are designing a site for a specific issue with super slow connections that amount of extra download just isn’t going to be noticeable. Even a slow mobile connection in the US these days is 2 Meg a minute, which means that extra 2000 characters will be 1/20 of a second.

So that coupled with the challenges of setting up WebDev styles with CSS styles is why I just don’t worry about using CSS styles to setup my WebDev Styles. Again just my personal choice, but as a consultant I figure my opinion is what people are paying me for <G>. 

So now that I have spent so much time showing you the challenges to CSS styles and why I don’t use them, you may be wondering what the heck wasn’t this article suppose to be about using CSS styles. Well like any good rule, its meant to be broken and there are times that I have needed to use CSS styles, to accomplish what I needed to do. So lets take a look at CSS styles.

So start with how you Edit and create CSS styles in WebDev. From the Page tab, drop down styles and select “Edit the CSS styles”

This takes us to a screen very similar to the WebDev Style editing screen.

Again use the Duplicate button to create a new style and then select the newly created style and chose modify to edit it.

This screen is identical to the screen that you can get to from the WebDev style editor by clicking the elispe behind the CSS style or clicking the More Options link.

So where do I use CSS styles? In HTML controls. An HTML control allows you to embed HTML code directly into your page. For instance on the IGBT.US.COM website we wanted to directly code the Next and Previous links on the search pages. Again you ask why? If we coded them via a regular button the link would not be a direct link and would get generated using JavaScript code, which would not be as Search Engine Optimization (SEO) friendly. And the key to an E-commerce site is of course, SEO.

Since we are embedding HTML directly we could of course include all of the font settings directly in that HTML. However another design requirement of the site is that we need to be able to create multiple sites based on this site, and those sites all need to have a slightly different look and feel.  As we have discuss that is the reason we use a Palette and WebDev Styles, changing those at the Project Level will give a different look to the site. However if we had coded the font settings directly into the HTML of the Next and Previous buttons, those would not be changed and we would have to track them down and change them. CSS styles are the solution.

So let’s take a look at the specifics.

htmlNextButton = [
<A href="%3?P1=%1&P2=%2&P3=0%3%4" Class="MyLinks">Next</A>
]
htmlNextButton = StringBuild(htmlNextButton,PartNumber,inPageNumber+1,PartialPageurl,BrandParm,ProductTypeParm)
htmlPreviousButton = [
<A href="%3?P1=%1&P2=%2&P3=1%3%4" Class="MyLinks">Previous</A>
]

Most of that code is all about generating the link, which is the subject of a future article, but for now notice the Class=”MyLinks” lines. For those of you that are familiar with HTML and CSS, you know that is specify the CSS code to apply to this HTML element. But where is “MyLinks” coming from. You probably guessed it, that is a CSS style we created in the WebDev CSS editor.

If we edit this style we will see the settings for the next and previous links.

Also notice that there is one setting on the Over (hover over settings).

Which is what causes the links to turn red as you hover over them.

So now when we create a new site, based on this project, all we have to do is edit the “MyLinks” CSS style to change the Next and Previous links to the look of the new site.

You want another example you say? Sure why not. We have a database table that contains the text for the About page, Location, etc. This information is displayed in an HTML Static control. An HTML static allows you to display text on you web page that includes HTML formatting. Again we could embed all the formatting into the text, but then we would have to edit that formatting for each field in the database. So again we created a few CSS styles to accomplish it. and if we look at the content of the About text in the database we will see you can see we are using those styles.

<H1 Class="AboutTxtHeading">Corporate Overview</H1>
IGBT.us.com is a GLOBAL provider of Power Semiconductors AND relate products, services AND solutions TO industrial AND commercial users of electronic components. Headquartered IN Estero, Florida IGBT.us.com serves as A supply channel partner FOR over 1400 suppliers AND 10,000 original equipment manufacturers, contract manufacturers, repair houses AND commercial customers.
<H1 Class="AboutTxtHeading">We provide options AND solutions</H1>

If you go back and look at the list of CSS styles we created for the project, you will see that we created “AboutTxtHeading” and “AboutTextBody”. So once again we are able to just edit those styles to change the look of the text content pages.

So there is a couple of examples of how and when I do use CSS styles with my WebDev Sites. I sure it isn’t what you were hoping for, especially if you come from a Web design background. But it is what has worked for me. It seems that you could based your WebDev styles on CSS styles, but the amount of work required, to organize and create everything just doesn’t seem to equal the payoff. At least not to me.

Be sure to go over to wxLive.us and watch the Uncle Pete’s corner webinar that is the companion to this article.

Uncle Pete’s Corner is weekly webinar on all things WX every Friday, to watch the recorded version of this webinar, many other WX related webinars or to watch future ones live go to wxLive.us

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

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

• WEBDEV