Chapter 14 - CSS - Cascading Style Sheets

Earlier, in the chapter covering the Catalog, we discussed using the built in CSS tool. The catalog was built from the ground up to be controlled with CSS. A more recent development is the use of CSS within the designer. Using CSS, the internal defaults of the designer can be altered or overridden. A good primer on CSS can be found at: http://www.w3schools.com/web/web_css.asp You can have a CSS file for each of the 10 Styles in the STYLE SETUP > DIRECT CSS section described in the Designer chapter.

A good tool to have if FIREBUG for Firefox. You can get it at: http://getfirebug.com/ Firebug will allow you to find and identify IDs and Classes style-able via CSS. You can then make changes right inside Firebug to see the effects immediately. A word of caution… The use of CSS in the designer is very powerful, which can be translated to DANGEROUS. This is not for the novice. You should be very fluent in CSS before attempting to manipulate the CSS for the designer. Keeps copies of your CSS files on your local machine. If you mess up you can revert to a previously saved copy. The staff at RealTimeDesigner offers this powerful tool, but does not provide any official support for it. Any changes made are at your own risk. There are a few dedicated RealTimeDesigner users who have mastered CSS

The RealTimeDesigner Forum http://www.realtimedesigner.com/forum/index.php has several threads showing tips and tricks regarding the Designer CSS manipulation.

Here is a partial list of the ID's and Classes that others have identified. There are lots more available which can be identified using Firebug. #MainBody #MainBody_orderpopup .WarningMessages .ActiveTab_Product .InactiveTab_Product .ActiveTab_Design .InactiveTab_Design .Tab_Empty .AllPanels_div_loading_Nullify .AllPanels_div_loading_LoadingMask INPUT.SizesStyle INPUT.SizesStyleAddItem INPUT.TextsStyle TEXTAREA.TextsStyle TEXTAREA.TextsStyle_small 126 SELECT.SelectStyle .pandisplay_container .pandisplay_image .pandisplay_container_notenabled .imgcontent .imgcontent_border .imgcontent_notenabled .imgcontent_highlight .sq1 .sq2 .sq3 .sq4 .sq5 .sq6 .sq7 .sq8 .sq9 .AdminOptions .pointercursor .pointercursor_border .ThinBorder #imageContainer #tableclass_main_display_area #tabs_floatingdiv #tooltipdiv #allpanels_controlbox #cart_view .images_all_class .images_all_fg_class #super_container #super_container A, A:LINK, A:VISITED, A:ACTIVE #super_container A:HOVER

The following code snippets are pulled from the forum. Hopefully they will give you insight to some basic CSS techniques.

One example of what you can do by having the full access follows. At the end of the default “prefilled” version, try to add a block like this: #generating_progressbar { position: fixed; top: 40%; left: 25%; width: 50%; height: auto; 127 padding: 30px; border: 1px solid black; background-color: white; z-index:201; } This will cause the progress bar shown when adding a design to cart to be centered on screen and fixed in position. Simulate a basic lightbox effect in some way. The most interesting property is however the “position: fixed;” one: it will cause the block to remain where it is, no matter if you have scroll-bars or even if you scroll while it is shown. Needless to mention it is an extremely useful property especially if you have scroll-bars, or if in any case you want to be sure the block will be visible.

Almost all of the inline styles are there for valid reasons, so removing them may not be safe, sometimes. For example, some divs have the display attribute because there are admin options to allow you to show/hide them: so, at the end, that inline style is just the result of an admin option (you see it as code, but in reality it's a PHP variable printed as code) However this is not a big problem, because you CAN over-ride inline styling with CSS. You just need to use the !important suffix. For example: #userbuttons_addcustomclip { display: none !important; }

#panel_sizes INPUT[type=“button”] { background-color: red !important; } This one, for example, allows you to change the color of the buttons used to set the size in ranged sized products. Same syntax also allow to change the button's text color/font/style.