css class styles
Last Post 09/14/2010 6:59 AM by Joseph Craig. 8 Replies.
Author Messages
Bo
Nuke Master
Nuke Master
Posts:215


--
08/26/2010 4:41 PM  
Hello There, I am designing a website for a new client under DNN 5.4.4 and have added a few css classes to my skin.css file and while I see them in this file I cannot find them when I am editing content in a text/html module. In otherwords when I click on edit content in a html module I get the fckeditor screen now I think tereik and one of the options is to apply css class style. When I scroll down to look for the class styles I had manually added to my skin.css file and uploaded fia ftp I could not find them in the list? Do you guys have any idea why this might be. Am I suppose to use DNN application to add styles via the stylesheet editor opposed to using something like visual studio 2008 to add styles and than upload the file. Could it be that doing things the way I did them causes the web application not to "know" they exist within the context of the edit content of html module so doesn't show them up. I notice that a lot of the css styles that DNN put in there show up but non of the ones I added show up under the list of applyable css styles but they do work in the site just not able to advise my admins how they could apply a custom style they wanted to use that I created for them via the apply css class feature. Thanks, Bo
Bo
Nuke Master
Nuke Master
Posts:215


--
08/26/2010 9:58 PM  
Ok I didn't realize you guys had already tackled many of my questions via your latest issue of DNN Magazine. Great Job =)

I do have a couple questions for you however after watching your tutorials. The first is in regards to the use of multicolor websites.

I have a client who has mocked up a design for me to implement on the web which makes use of a gray background for the left column and a yellow background for the rest of the page both which would have text/html modules inside of them.

As I took a look at your videos I noticed you did demonstrate how one might change the background of the Telerik text/html editor window so it corresponded to how it would look once you save your changes. However in my situation I am guessing that wiring a background color to a body tag wouldn't address the problem given I am dealing with a two color website both of solid colors with text in them.

If I opted for example to make the body gray and wire this to the telerik editor than it would be great when the admin was working on editing content in the grey portion of the website but what about when the admin needed to edit content in the yellow portion of the website using your example on the video tutorials wouldn't you still receive a grey background in your telerik editor even if you were working on a yellow portion of the site given that you can only have one body background color.

There is no way somehow for the Telerik editor to "intelligently" sniff a background color you might be using on a table that overlays the body background or perhaps a background-color in a div tag and show yellow background in the editor when working on a text/html module in the yellow part of the site and a gray background when working in a text/html module in the gray portion of the site?

The above would also be true of the font color since what would look good on dark gray would be bad on light yellow and vice versas. The color behind these two is actually red and the client wants these three colors as they are the companies color so we have red background with a grey left column going all the way down the site and the majority being a yellow area beside it with red surrounding the footer (which wouldn't be touched with text/html modules.

The other question I was curious about was could I style a whole container tag such as a div tag. I know I probably can't use id's since just by the words apply css class suggests adding a id opposed to a class would not work out but I was wondering if it was possible to select a div tag in the wiziwyg (i.e. design mode) environment and apply one of the custom classes similiar to how you could do this on a p tag which I believe is a block style tag as is div.

Thanks for your help with these two questions I found myself having.

Bo
Bo
Nuke Master
Nuke Master
Posts:215


--
08/26/2010 10:10 PM  
Last question just out of curiousity what community version of DNN was it before Telerik editor became the default editor for DNN.

I ask this because I have just set up a client on a fresh install of DNN which was actually 5.4.4 and by default Telerik editor is being used. I have another client who has been using DNN since 4.5 and little by little I have been upgrading them till I now have them up to 5.4.2 and still fckeditor seems to be the editor that launches when you click edit text/html but I noticed that even in 5.4.2 under provides/HTMLeditors telerik was one of the folders underneath fck so certainly it had already been integrated into the community edition by this version. I also heard that as early as DNN 5.2.3 or so RAD controls were starting to be implemented so I guess my question is the following:

Since my older client has come to DNN 5.4.2 bit by bit through upgrades of the database opposed to a fresh install right from that version will I need to do something manually to invoke the use of the telerik engine as the default htmleditor opposed to fck editor which appears to be the one that launches now just by looking at the controls or will an upgrade to 5.5 automatically swap out the fck editor for the telerik editor as the default editor that launches when editing html modules.

If I do have to do something manually what should I do so my client can start taking advantage of the telerik engine that has already been integrated into the 5.4.2 distro but not being used by default as the editor for html module editing.

Thanks again for all your help in answering these questions I found myself having.

Bo
Joseph Craig
DNN MVP
Posts:11667


--
08/27/2010 6:51 PM  
If you upgrade a site, by default the editor is not changed.

If you want to change the editor, you will need to do some edits to the web.config file.    There are some good instructions here.  Before you start editing web.config, ALWAYS make a good copy of the file so that you can revert if you do something wrong.


Joe Craig, Patapsco Research Group
Complete DNN Support
Bo
Nuke Master
Nuke Master
Posts:215


--
08/29/2010 3:14 PM  
Thanks Joe for the heads up in regards to changing editors. I am wondering still on the multibackground department if their is perhaps some token or something that can be used to ensure that when I place a text/html module in a yellow solid background that the telerik editor gives me a yellow background with say black letters and when I place a text/html module on the grey part of the background that the telerik editor will display a grey background in the body with say white text or some other light color as I chose via CSS.

It seams like in the latest tutorial by Lee Sykes for August 2010 the demo in regards to giving the RAD editor the same look and feel as your actual background has was to wire up a .css file that included that color in the body tag of the CSS which is ok when your page is either totally grey, green, black, etc... but when one vertical column is grey and the rest of the site is yellow as is the case for me where I have a table that has 1 row but two columns one column being grey and one being yellow I am assuming that the demo Lee Sykes did with his wiring up CSS files that included grey in the body definition would not dynamically allow the RAD editor to pick up the background of whatever the text/html module was inserted into but rather as I stated earlier would render a specific color as specified in the CSS body so one of the columns would be correct in regards to look and feel of the editor matching the websites actual background but the other column would not be correct as the body would still be showing for example grey even though the text/html module was in the area of the site whose background was yellow so even if the text/html module was found to be in the yellow area when I go to edit the module I would receive what ever color was specifically specified in the CSS Body tag hence not matching in 50% of the design.

Anyway thanks again for taking a look at this part of the question and thanks Joe for answering the editor issue.

Bo
Bo
Nuke Master
Nuke Master
Posts:215


--
09/01/2010 9:36 PM  
anyone have anymore insight on this issue with applying contextual background color to the telerik editor depending on what color the text/html module is on in a page with multicolored layout that is solid and which require text/html module on both the colors.

Just didn't want this thread to get lost site of in the mix as I could see this might be an issue others run across as they are trying to make their telerik editors better match the feel of what ever background color their module is laying on in a multibackground page context.
Joseph Craig
DNN MVP
Posts:11667


--
09/02/2010 5:35 AM  
I'm afraid that I don't have anything helpful to offer here.

Joe Craig, Patapsco Research Group
Complete DNN Support
dansoy
Nuke Newbie
Nuke Newbie
Posts:1


--
09/14/2010 6:05 AM  
How to use html/css class with different element types?
I have several different element types, that use the same class type. Now how do I apply this in a CSS style sheet?
http://www.enbtransport.com/
Joseph Craig
DNN MVP
Posts:11667


--
09/14/2010 6:59 AM  
You will find a nice little description here.

For example,   "the following is a what a specific class (which in this case selects a blue text color with a transparent background and has a 12 point font size) looks like:

span.LargeBlueText {
  color: blue;
  background-color: transparent;
  font-size: 12pt;
}

The fact that it starts with an element name rather than a dot is what makes this a specific class - in this case specifing that this class is only to be used with the span element and no others."

Joe Craig, Patapsco Research Group
Complete DNN Support


---