Add any comments or questions regarding the Skinning with DotNetNuke Super Stylesheets - DNN Layouts tutorial from Issue 56

Lee,

Great tutorials on Super stylesheets! I just have one problem...even after I apply all of the code that you showed in the SEO .css file, I still have about a 2 or 3px whitespace gap with the scroll bar still showing. Do you have any suggestions on how I can fix this?

Also, I meant to add, the gap is not just on the SEO skin, but on all of the skins....(3Col,2Col,1Col,MultiLayout,Portal,and Blog)

Thanks,
David

Have you checked the width of the menu? Does the menu expand beyond the width of the page?
You can reduce it by setting the width of the menu for instance to 95%

I thought this was a very interesting article.
There were two things I wasn't crazy about.

• Using the dropdown Listbox for the admin menu
• Moving the admin bar to the bottom of the page.

I will try to play with the design and see if there is a way to avoid these choices.

Thanks again for an article with incites into the latest techniques.

I prefer the Listbox just because it removes some extra code out of the source code, but of course you can use the default menu.

The admin bar at the bottom is only necessary if you wish to do the SEO technique with absolute positioning, it is not necessary to make use of the superstylesheets.

Great tutorial! I do have a question though. Is it possible with the DNN version of the YUI library to have two columns each 50%. I know that it is possible with the YUI version. I may be missing the obvious. Thanks. <!--EndFragment-->

Good question, I don't think it is possible, you basically have those 5 template options available and you can change the width using the classes:
14em, 16em and 18em.

It is possible to use the Yahoo YUI library though, the stylesheets are already included with DNN at:
Resources / Shared / StyleSheets / YUI

Okay... Thanks for the response and thanks for this great resource.

Lee...When I add the code for the search bar to be at the top right, its added as expected, however the search area is double the size now. To fix this I simply changed UseDropDownList="true" to "false", which removed that little icon. Even though I problably won't use the drop down option, at this time, I'd like to have the option for the future. Did I miss a step somewhere? also if I set both ShowWeb="false" ShowSite="false" will it default to the site or just simply not work? Thanks and great work.. Bo

I haven't gone through all the video yet, but was wondering is the option of setting up the default menu vs the list menu in one of the CSS Skinning tutorials, if so which one. I tried to compare one of the Vortex container.ascx files and I can see some differences but honestly I'm still a bit confused. Thanks, Bob

Hello,

For the search box, those options can be re-configured at any point in the future to re-enable them. Yes you can set both to false and it will just search the website.

You may want to view:
How to style and skin the search box in DotNetNuke

The menu in the vortex skin is the SolPartMenu that came as default with DNN. With the latest version of DNN, it now comes with the Nav Menu, you can learn about how to use the Nav Menu here:
DotNetNuke Nav Menu
Nav Menu v2 for DotNetNuke v5

Those 2 tutorials will show you how to setup a menu in the easiest way for DNN 5 and they will work with a CSS skin. However if you want a pure CSS unordered list based skin you would need to use the HouseMenu (covered in the CSS tutorials) or Snapsis menu.

Hope this helps,

Thanks for the info Lee, however I may not have asked my Menu question correctly. I was trying to refer to PSpeth's question about not using the dropdown Listbox for the admin menu. I'd perfer to use the default menu vs. the Listbox menu on the containers. I can't seem to find what all tokens and/or code i need to change or add to make it use the default admin menu. I did some research and I think I may need to use the [ACTIONS] and/or [ACTIONBUTTON]tokens but not sure of the formatting, I even looked through the MinimalExtropy containers and didn't really get it. Thanks, Bob

Hello,

For the containers you will want to use the [ACTIONS] token for the menu.

[ACTIONBUTTON] is for elements such as the print icon, RSS icon, edit module link etc.

If you are styling with an ascx skin you need to add these lines of code: (spaces added so the code displays in the forum)

(at the top)
< % @ Register TagPrefix="dnn" TagName="ACTIONS" Src="~/Admin/Containers/SolPartActions.ascx" % >


(in the body of the container)
< dnn:ACTIONS runat="server" id="dnnACTIONS"  ProviderName="DNNMenuNavigationProvider" ExpandDepth="1" PopulateNodesFromClient="True" / >



Styling with object code in a html file (DNN 5): (spaces added)

     < object id="dnnACTIONS" codetype="dotnetnuke/server" codebase="ACTIONS" >
                < param name="ProviderName" value="DNNMenuNavigationProvider" / >
                < param name="ExpandDepth" value="1" / >
                < param name="PopulateNodesFromClient" value="True" / >
            < / object > 


Styling using tokens: (spaces added) (you can view this code in DNN4.9.x Minimal Extropy Containers - it works in DNN5)
In the html file
[ACTIONS]

In the container.XML file
< Object >
        < Token >[ACTIONS]< / Token >
        < Settings >
            < Setting >
                < Name >ProviderName< / Name >
                < Value >DNNMenuNavigationProvider< / Value>
            < / Setting >
            < Setting >
                < Name >ExpandDepth< / Name >
                < Value >1< / Value >
            < / Setting >
            < Setting >
                < Name >PopulateNodesFromClient< / Name >
                < Value >True< / Value >
            < / Setting >
        < / Settings >
    < / Object >

Hi,
Do you know of a way to force the footer to the bottom of the screen when using the super style sheets?

Do you want to force the footer to be at the bottom of the screen?  You could use absolute positioning.  The SuperStyleSheets tutorials show how to put something at the top of the screen with absolute positioning in CSS.  You could do the same at the bottom, though I can think of a number of ways that this might be messy or unappealing.  It all depends on the user's screen size and the size of the content within the page.

Thanks Lee! I think I see what I was missing now.. Bob

I know I'm a little late to this thread but I just finished watching and working on these tutorials. I too had a question about using the dropdown lists for the container menus. It seemed like you switched to this method to avoid incomplete drawing of the menu when the container height was small. I'm seeing the same problem in my custom skin but not in the Minimal Extropy skin as a reference. I'm using the same container (I think) so I don't understand why my container menus are getting cut off.

Hope that makes sense.

Thanks,

Tom

Lee,  I loved the Super Stylesheet Video and worked along with them.
The last video (12) I was unable to get my ASCX file to read a different (new) stylesheet.
I created the new stylesheet, gave it the same name as the skin, added the tags and saved.
It is still reading the "Skins" stylesheet, with the Logo, Menu and Breadcrumb sitting under the footer.

Instead of creating a new folder to avoid changing tags that are being used in a different skin, I would love to have the option to add a new stylesheet.

Thanks so much for any help getting it to See the new stylesheet!
Debbie

This video is GREAT!

I wonder , how can i set the width of thee skin? i want 980px witdh in all skin, and be centered.
Can you help me?

Thanks you

You do that in the skin.css file. That should be covered in the other skinning tutorials. Check the "DotNetNuke ASCX Skinning for Professional Skinners" first.

Basically you will set a width for the div that contains the guts of the skin. You will have something like:

.myContainingDiv{ width:980px; margin:auto }