New (powerful!) CSS tool for designer

Be ready, the new CSS option for designer is there!
What is it? It's a tool that will give you the ability of editing the entire designer's stylesheet.
In one word: it's a simple tool that will allow you to really transform the RTD into anything you want!

Considering it allow you to fully alter the RTD generated stylesheet, you need to be extremely careful while using it: some wrong setting could really mess up everything.

You will find it in SYSTEM OPTIONS => Styles Setup, the new command is the "DIRECT CSS" link on top.

Initially it will be empty, and this means the normal options from "OTHER STYLE OPTIONS" will be used.
While empty, you can click the "prefill" button to import the full stylesheet as is now, based on your "OTHER STYLE OPTIONS" settings.
If saved, and so no more empty, the "prefill" button will disappear.
The "remove" button will simply erase the file, and so you'll be back to the "OTHER STYLE OPTIONS" settings only.

As using this tool requires a mix of CSS knowledge and good planning on the results you want, there will soon be some more reference to help you understading it. I have the permission to say that Mycustomhoodies, which helped me in creating and testing this feature, will write here to go in depth on the feature and provide you some working material.

So, unless you want to start testing immediatly, waiting for his inputs would be recommended.

Talk to you soon!

Thanks for this tool. Excellent. Would save time if perhaps someone could do a quick description of each of the 47 items. Some are obvious and others are not. Here's a list of the default CSS items as I see it:

#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
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

First note again, use this tool VERY CAREFULLY.
You're going to alter the default CSS of the designer, so trying tweaking options you're not extremely sure about could even prevent your designer from working properly.
What is to be absolutely avoided is to try tweaking options related to items into the design area, because you could affect their positioning calculations: this actually means more than half of the entries Cos posted above!

Mycustomhoodies should soon post something more about how he used this tool (we envisioned it together).
The main fact, assuming you know CSS well enough, is the ability to alter current items as well as adding completely new effects.
The best way to determine "what is what" is currently to use Firefox and the Firebug extension.

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;
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 is is, no matter if you have scrollbars or even if you scroll while it is shown. Needless to mention it is an extremely useful property especially if you have scrollbars, or if in any case you want to be sure the block will be visible.

Couple of questions / requests...

It would be great if some of the inline styling could be taken out of the code, as far as I know, you can't over-ride inline styling with CSS.

for example:
<div id="userbuttons_addcustomclip" style="display: block;"> (most of the buttons are this way)

should just be

div id="userbuttons_addcustomclip">

it will still display as a block since that's already built into the code as a #div attribute.

or you could add css to do the same thing as having it as an inline style: #userbuttons_addcustomclip {display:block;}

(that way if we don't want the button to show up we can just switch it to display:none)

Looking through the code there seems to be lots of inline styling (just not sure why when this could be taken care of through use of normal css)

______________________________________________________________________________

also there are a lot of elements that don't have ID's:
example:
the "instructions" section (in the admin panel it's the "Configure Generator Help Labels -> SHORT DESIGNER INSTRUCTIONS"
the table that holds add text, add shape, clipart, etc
the table that holds buy now, view cart, etc..
the table that holds "product", design, and get help buttons


Any help or thoughts are appreciated, this new CSS feature is awesome, i think it just needs a little more organization for more granular control.

-Austin

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, becasue you CAN over-ride inline styling with CSS.
You just need to use the !important suffix.
For example:

#userbuttons_addcustomclip {
display: none !important;
}

---

As for other elements without IDs, that's precisely the meaning of this thread.
Adding IDs would not be a problem, so now that we provided a way to do the CSS, what is missing can be added without any problem.
Also, another thing i would ask your help for (in future) would be to create a thread in "howtos and tutorials" about some nice CSS tricks that can be used.
Possible examples are the basic lightbox simulator i posted above, this !important thing, or something like this other nice one to style buttons:

#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... you know!

Another nice trick to use is to remember many text labels accept HTML, as well as header/footer code. This means that by combining the CSS and those labels, you could be able to even add new containers by yourself. It'll just be a matter of creativity, at some point.

Now I am already busy on other tests, but tomorrow i'll look to add IDs for the sections you mentioned.
I love this feature too, so we will make this tool a monster of flexibility together. Promised!

Guys again so sorry, I have been so busy lately and just want to let you know that at some point i am still going to go over ids and tricks you can do with css, just have to find the time to do it.

I'm starting a new CSS topic in General Discussions about adding cancel button to popups.

Ah, I see, thanks for the info!

Some controllers added.

instructions_container - ID of a DIV, container of the "instructions" section

commandstable_container - ID of a TABLE, container of the add text, add shape, [...], clear commands
Beware this container also contains "sub tables", but their number can be different for each company, as related to the value of the "MAX MAINBUTTONS PER ROW" variable in "Configure layout".
For this reason, i also added a class to control them:
commandstable_container_subtables - CLASS of TABLES nested into "commandstable_container"

About the "product", design, and get help buttons:
I noticed those commands are nested into 2 tables. First one only contains the 2nd one, which at the end contains the buttons.
Not sure why i did this, but if i did... perhaps there were a reason (more likely, some compatibility thing for IE6?)
However, the double table could provide some added control too, so i simply assigned an new ID to both.
Here they are:
usertabs_first_container - ID of a TABLE, top container of the "product", design, and get help buttons
usertabs_second_container - ID of a TABLE, main container of the "product", design, and get help buttons

About the last one psgraphics mentioned, so the table that holds buy now, view cart, etc..
Here i'd like to understand what to do.
There is an upper table which includes lot of thing, including BGcolors for example (actually, everything from "CURRENTLY SELECTED PRODUCT" to the last line becofre the instructions table).
But tht table is ALREADY into a dedicated containser, which is the BottomCommands ID.
Isn't that enough to control that area? If you think you need more, could you tell me what?

Thanks!

MainBody / super_container/ tbody/ tr / td / BottomCommands / table / tbody / tr / th / table <-

that way I can space that section out a little bit... I could do this using a compound selector (#BottomCommands table tbody tr th table but I think it would be easier for everyone if it had an ID.

Ok, so be it. To me, not really a problem.
Added an ID to that table, it's BottomCommands_containertable

Can you please add ID's to all the images and buttons please? Such as the other three user buttons "redo", "undo" and "clear"? Basically it would be great if each element had an ID so you could move things around like a puzzle if needed.

Kevinrys,

Adding to EVERY element would be a very long task, and perhaps not really needed.
To keep everything under control, I would prefer to add what's needed from time to time.
So, about your request, I've added the following ID's relative to all images that may appear on that row of the commands table:

- userbuttons_indesigner
- userbuttons_undo
- userbuttons_redo
- userbuttons_cleardesign

Naturally I'm more than curious to see what is possible to do with this tool: If in the future you'll like to, I'd be very happy to see what you will be able to do!

Thanks for the quick reply and action! I actually was able to edit what I needed with some tricky margin settings, but I might go back and fix this to more simple code.

Can you please add an ID for the "Current Selected Product" section?

Things would be made easier if the tables were removed and it was all simply floating DIVs, but this is a project for farther down the road I'm sure.

I'll probably have more requests as I dig into this so I hope I'm not too much of a bother. I appreciate your hard work and dedication to your product.

Also if you could add ID's to the seperate Tables within the BottomCommands section that would help move items such as the Preview Price and Add to Cart buttons in one fell swoop, instead of invidually moving each button.

And and ID to the row below pandisplay_container which holds the text for Font Type and Color sections

And an ID for the "Get Help" icon

Woah...

I see you also sent me 4 PMs about very similar topics, so just to keep everything in order a new thread could be useful.
As i wrote in the PM's reply, would you mind opening a new thread in general discussion to quickly report to others the questions you had and the answers i provided?
Also, you may add in there other things you may need, so that we could keep everything more readable.

Just one extra note about the tables: they're still there for two main reasons:
1st is simply... the age of the code. When some basics of the RTD were written, using tables was still a normal practice
2nd is more important, and it's about legacy support. Specifically, support for older browsers with problems in tableless designs. For example, even if not that many, i can say that in August (so, 8 days so far) the RTD received at least 597 contacts by users still using IE 6.0

Out of that, the ability of editing directly the CSS code of the designer is a very recent test: this just to say it wasn't meant to be edited directly at all, and so there were no need of a liquid-like structure. Personally, I think that removing all tables is something that should be done, but most likely in the FAR future, to be realistic.