Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

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

HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Page not visible in FirefoxPage not visible in Firefox
Previous
 
Next
New Post
6/15/2008 1:10 PM
 

Howcome my skin is invisible in Firefox?

     www.amgdraftinganddesign.com

Thanks,

~Bee

Edit:

I have struggled and struggled trying to make a tabless skin. The concept is great, and it looks great in Dreamweaver, but when trying to make it into a skin I have had nothing but one problem after another.

  1. The div content panes don't play nice and float like they are told. I had to put an extra div around each content pane div to make them float.
  2. The div content panes don't collapse like tables cells do with no content, and there is no existing command I can find to make that part work because the browsers don't support visibility: collapse;  I have changed the content panes back to tables.
  3. Using divs to style the background makes a blank page show up in Firefox. I had to change the background styling to tables.
  4. Using divs to style the background messes up the DNN control panel. The control panel would go behind the div and disappear. Or, if I tried using the z-index to fix the problem, the control panel would have a transparent background and be barely readable.
  5. My action controls for containers also kept disappearing. Thinking it might be a doctype problem, I fixed a skin.doctype.xml file and voila! my skin was once again totally messed up as though it had been through a blender.

I am sick to death of revising this skin over and over and over. It's been 2 weeks and I should have been working on my content already a long time ago. Can't we get someone to put a sticky at the top of this thread that would help people avoid some of these gotchas in advance?

Does anyone have any advice for me on the messed up skin that now sort of shows up in Firefox? (Monday morning).

~Bee

 
New Post
6/16/2008 11:21 AM
 

ok for the menu, try adding float:left    to cssmenu a

That should get your menu to float like you want it. I didnt have a way to test it in IE but it fixes the problem in Firefox, safari, and opera.

Now for the other pieces.

1.) It does work best to put a div tag around some of the content panes. Remember content panes are rendered runtime, so styling them can be a bit difficult. Its no different though then using a table cell to incase the the content pane. So there really is nothing different, you just used a table cell to incase the content pane instead of a div tag.

2.) DNN codes / uses a CSS style called DNNEmptyPane which is added to any content pane that is empty. Just use this auto applied style with your contentPanes name to get the results you want.

3.) Not sure how you coded the divs, but shouldn't be any different then table

4.) You need to include the control panel token in the correct div tag. If you let DNN auto place the control panel it looks for the first div / table break it gets and inserts it there. By using the token you resolve most of those issues.

5.) If you use absolute positioning and solpartmenu for the container things blow up. Solpart uses javascript for much of its work which doesnt play well in a realitve environment. Many options work, can use a CSS based menu, or dropdownlist token for the menu as well. Granted both are not nearly as easy, but do work. We are hoping DNN 5 will resolve some of the issue.

Oh forgot to mention. If you have firefox, make sure you get the web development tool bar, and firebug,

The web development tool allows you to edit CSS "live" and see the changes, Firebug will allow you to "inspect" or mouse over any item / object on your page and it will tell you all the CSS styles applied and which ones are overwritten and where. Both are big helps for anyone wanting to do CSS based skinning.

Beyond that you just have to practice with your CSS and with how DNN renders it's skins.

 

 
New Post
6/16/2008 12:30 PM
 

Thank you for the detailed response! I have printed it out and am going to use all of your suggestions as soon as I have time between work and school to try fixing this again. (I wasted the whole weekend trying to get it to work!)

Anyway, I have a couple of questions about what you said:

Here's an example of my panes. Which version below explains what you mean about how to set  it up?

contentpane
pane1 pane2 pane3
pane4 pane5
pane 6 pane7
footerpane

1. Version one, create layout with table, then put divs inside for content panes? 
2. Vers 2, create layout with divs, put tables inside for content panes?
3. Vers 3, create layout AND panes with either all divs or all tables?

Using the example, what kind of property could I use with DNNEmptyPane to make those empty divs go away at runtime and not leave a piece reserved browser real-estate behind? I know this is not a problem with table cells which automatically collapse.

I agree that the Solpart menu is causing me problems. What alternative would you try if you were me?

Thank you so much! By the way, this is my third skin. The other 2 I used tables without any guilt and did not have these kind of problems!

~Bee

 
New Post
6/16/2008 1:53 PM
 

Here is an example of one of my CSS skins. It has the below layout.

ContentPane
Tagline   Login controls
Logo    
Main Navigation Bar
Left Navigation

Main ContentPane 

Left Pane  
copyright, date, terms, etc

Comments are in blue to help provide additional information.

<div id="wrap">  Allows me to set background for everything, control total width. For example 98% as to leave a small buffer space in browser
<div id="ControlPanel" runat="server"></div> Forces the controlPanel into the div I want it to belong in
<div id="tagline" class="tagline" runat="server"></div> First Content Pane titled tagline, its floated to the left in the CSS Used to up SEO ratings.
<div id="loginlinks">[USER]&nbsp;&nbsp;[LOGIN]</div> Login controls div is floated to the right, keeping same level as tagline,
<div id="logo">[LOGO]</div> Logo token which uses a float:clear to drop down below login links,
<div id="menubar">[HOUSEMENU]</div> My main menu bar. Note I use housemenu b/c its CSS based, no different really then CSSMenu
<div id="content"> Main seperation div, used to create the main contentpane's "column" it is floated to the right with width set.
    <div id="contentpane" runat="server"></div> just a contentpane div tag, no special formatting given to the div.
</div>
<div id="sidebar"> Next seperation div, makes left hand navigation column. Is floated left, which forces it up next to content div.
    <div id="menubarleft">[HOUSEMENU:6]</div> Control for house menu
    <div id="leftpane" runat="server"></div> Left content pane. no formating applied to it.
</div>
<div id="date">[CURRENTDATE]</div> Clear applied and center text to make it all align in the bottom middle of page.
<div id="footer">[COPYRIGHT]&nbsp;&nbsp;[TERMS]&nbsp;&nbsp;[PRIVACY]</div>
</div>

As you can see you want to use basic div tags to create your layout then come back and inside that layout add divs for all of your content panes. As you can see I used 2 divs to create 2 columns (content and sidebar) then inside of those I created contentpane, menubarleft, and leftpane divs. The 2 main divs allows me to move all my other ones around in "groups" or columns similar to how a table works with rows / columns.

Now for your container menu.

Most of the time you can just use the default, but you need to make a CSS based container to go along, if you use a table based container inside a CSS layout things go wrong, Can try something similar to this simple container I made.

<div class="CAcontainerholder_colorbackground">
    <div class="CAactions_image">[ACTIONS][TITLE]</div>
    <div id="contentpane" class="CAcontainer_image" runat="server"></div>
    <div class="leftactions">[ACTIONBUTTON:1]</div>
    <div class="printandrssactions">[ACTIONBUTTON:2][ACTIONBUTTON:3] </div>
</div>

It's really basic / simiple but it does its job. And will work with almost all CSS layouts around, with just a few tweaks.

If your interested in seeing all the CSS behind the skin let me know. mathomp3 at hotmail.com

In its current state the CSS is a bit messy has lots of HouseMenu styling which might not make sense. I would need to clean it up as to not confuse someone not using housemenu.

 

 

 
New Post
6/16/2008 4:13 PM
 

Thank you so much for your patient explanations. Your description is basically what I had before things started to go wrong. I think my main problems must have been caused by the control panel and the solpart menu.

In the past I used tables to create one basic layout that I could inject modules into wherever I wanted to to vary my layout on the fly. I knew the unused panes would be invisible. It seems to me that with CSS layouts you have to be sure that you are going to use every pane, because they are going to take up space whether they have content or not. I guess this means I need a different version of the skin for each layout, 1 col, 2 col, 3 col, etc if I want to avoid tables. Am I the only one who thinks that is less efficient?

I could have just made this skin with tables. But it seems to be a big deal to everyone to use CSS instead. Why is that? By the time you make all those divs to contain other divs, you could have just had tables that behave better. And I will end up with many different versions of the skin instead of just one flexible one. But maybe by the time I'm done with this project I'll understand what the big deal is.

Thank you again for your kindness. I'm going to see if I can find a link that has classes for the house menu.  

~Bee

 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Page not visible in FirefoxPage not visible in Firefox


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.
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out