Learn More





Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

HomeHomeDevelopment and...Development and...Building ExtensionsBuilding ExtensionsSkinsSkinsSkinning of default tables and imagesSkinning of default tables and images
New Post
4/16/2013 4:36 AM

I'd imagine that the table/img element in a skin gets some styling, so when modules display tables or images, the view is consistent throughout the site.

Is this assumption true? and if so, do I style the table/img element itself, or are there specific classes I should style?
I've noticed that for a button, I should not style the html buttons themselves, but instead style a class called 'CommandButton' and assign that class to all buttons.

Also, sometimes you'll want to display tabular data, without showing the table itself. The CSS-purist will say I shouldn't use tables for that, but tell that to the content-manager who uses the wysiwyg editor. Is there a class that is used for that within dnn?
The same is true for images: in general you'll want to style your images in a consistent way (with padding and some nice border), but sometimes you might not want to style an image, e.g. when inserting a smiley.

Ideally different levels of table classes (major table, minor table and invisible tabel?) and image classes would exist, just like the 6 different header classes, but I think that's asking too much.

So: Should I style the html tables and images in general, or use some specific classes? (which ones?) And are there other table/image classes to style, for example for an invisible table?

New Post
4/16/2013 9:09 AM

Not quite sure if this is the sort of info you are after, but I'll give a brief overview of how I do it.

 I base styles on containers and panes. Hence for example I can apply a default style of float right with a 5px padding and 1px grey border to all images in the Content Pane, when the container is specified.

 So, for eg I have a class of "ContentPane" applied to my content pane div, and all the images I want to apply the default style to will be in a specific container and the content pane only, the container code would look something like:

<div class="DefaultContentContainer">...</>

and the container.css would have

.ContentPane .DefaultContentContainer img {border:1px solid #ccc; padding:5px; float right;}

It takes a bit of planning about how you will allow content to look depending on the combination of pane and container, but it does allow you to do some pretty nifty targeting of elements, and really helps the user by taking a lot of the styling requirements off their plate. So much easier for them when images are just styled without any work, as opposed to having to pick the correct style from a dropdown, and figure out any style conflicts.

 Good luck :)

 Oh p.s. - in my view tables are most definitely for tabular data! Whilst those data can be styled with CSS, that would actually be invalid, as the markup then doesn't describe the data correctly. So tables still have their place :-)

New Post
4/16/2013 10:44 AM

That's a nice way of working, I'm trying to avoid having to style everything, containers indeed take care of that. Although a container feels a bit like sneeking style back into the content.

However, in my specificsituation this approach would not even work. I've made a module which displayed a list of properties and their values, followed by a table with dates.
For the first part I use a table without borders, padding, colors, etc. to align the data properly, for the second part I use a table, because it's a table.

My original question was wether DNN already defines those hiddentable and fancytable class names and what a default table looks like.

I've now found a styleguid as part of the DNN7 awesome cycles site. There is styling for tables included: A table without any styling is styled as a hidden table, while the visible table in the styleguide gets the 'tableDefault' class. Who thought that not showing the table by default and calling an alternate table style (= not the default) 'tableDefault' was a good idea? Now when inserting a table, the content editor needs to change the class to actually display the table as a table. It's easier to misuse a table than to use it the proper way. And the class name... This is such a horrible approach that I'm very unlikely going to do the same.

In the skin I'm going to style the html table element in some basic way, style the tableDefault class exactly the same, make a class 'hiddentable' which defines a table without any visual formatting and optionally create some containers to define fancier tables.
And I'll probably also define a container where tables are hidden for modules that use both default tables and 'TableDefault' tables and expect the firs kind not to show.

New Post
4/16/2013 10:47 PM
Yup, I hear your pain. I often wind up overriding default styles in my skin.css

Seems like double handling huh?

Couple of other options for you to consider - use HTML templates with CK Editor. I've had great success with these to enable content editors to work with some heavily styled content, while only having bold and list buttons enabled on the editor.

Use 2Sexy (free, in the Forge) - it separates data from layout right at the front end. Would work well for what you are doing. I like it a lot and think it should be core. It works kind of like the node approach used by Drupal. A little. Sort of..... Just try it, it's useful :-)

Finally you *could* use jQuery to apply a class to an element based on content (eg the table header text). I'd use one of the first two methods though. Much less chance of a stuff up.
HomeHomeDevelopment and...Development and...Building ExtensionsBuilding ExtensionsSkinsSkinsSkinning of default tables and imagesSkinning of default tables and images

These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.
Try Evoq
For Free
Start Free Trial
a Demo
See Evoq Live
Need More Information?