DNN site with pure CSS menu, tabs and layout

Last post 06-29-2004 2:37 PM by xmlsmith. 35 replies.

Sort Posts:

  • DNN site with pure CSS menu, tabs and layout

    06-19-2004, 3:43 AM
    • Participant
      930 point Participant
    • xmlsmith
    • Member since 11-02-2003, 9:56 PM
    • Orange County, California, USA
    • Posts 186
    I finished the work on pure CSS DNN site solution.
    Because it uses no Javascript it works with browser
    security settings on high too. Javascript based menus
    like Solpart does not work on browser security settings
    set on High level.

    You can view a site made using only CSS stylesheets at
    http://www.expediteship.com/

    All the horizonthal and vertical tabs and the layout are made using a custom
    skin object - XmlSmithCSSTAB, and CSS stylessheets.

    The 1st and 2nd horizonthal tabs are defined that way:
    <div id="HTabBox01">
    <div id="HTab01">
    <ul>[CSSTAB:1]</ul>
    </div>
    <div id="HTab02">
    <ul>[CSSTAB:2]</ul>
    </div>
    </div>


    The vertical tab is defined that way:
    <div id="VTabBox02">
    <div id="VTab02">
    <ul>[CSSTAB:3]</ul>
    </div>
    </div>


    The main reason to use a tabs is that you can see which tabs are pressed
    without roll over with the mouse.

    You place them in the appropriate places in the skin and you have the
    layout and the tabs needed for pure CSS DNN site.

    I'll release the skin object and sample CSS layouts and tabs commercialy
    very soon.



    Automate and Integrate Your DHL Shipping Process:

    http://www.ExpediteShip.com



    Get XmlSmith CSSTAB & CSSNAV 1.0 at

    http://www.snowcovered.com/snowcovered2/Default.aspx?tabid=60&ctl=CatalogItemDetails&mid=813&CatalogItemID=735
  • Re: DNN site with pure CSS menu, tabs and layout

    06-19-2004, 6:56 AM
    Nice Site.

    How do you handle the solpart features used in Admin interface? (Pencil edit etc.) or does Your skin without JS have Security implications that effect only visitors/registered users (no edit rights).

    Seems your method solves certain browser compaitability issues regarding the menu system.

    While checking out your site I noticed you use Speerio Site Map. Doesn't this module use JS?

    Overall I Like it!
  • Re: DNN site with pure CSS menu, tabs and layout

    06-19-2004, 8:29 AM
    • Star
      10,740 point Star
    • nokiko
    • Member since 10-22-2002, 2:36 PM
    • Utrecht, Netherlands
    • Posts 2,146
    Hi

    Nice, I am about to release a css tabs solution soon too. This one will be for free. various versions various levels ( even an nlevel one that kinda mimics solpart with only 12 lines of javascript.

    See mine in use here

    2 instances both with completely different css ( based on the very popular listomatic samples ) - one horizontal one vertical

    all freely available in like a week or so
    Armand Datema
    5 Skins, 4 SkinObject, 38 Containers, 2 Modules and more Euro 50 a year.
    SchwingNuke
    Offshore DNN and ASP.net development
    Container Creator
  • www.expediteship.com

    06-19-2004, 10:40 AM
    • Member
      485 point Member
    • irvmic
    • Member since 03-11-2003, 1:27 AM
    • Posts 97
    The site looks excellent in IE and in Opera.. But it looks real crappy in Firefox.

    Hope you can somehow detect and make a fix for firefox.

    Michael
    Michael

    ps. Please remove my moderation status.
  • Re: DNN site with pure CSS menu, tabs and layout

    06-19-2004, 12:35 PM
    • Participant
      930 point Participant
    • xmlsmith
    • Member since 11-02-2003, 9:56 PM
    • Orange County, California, USA
    • Posts 186
    Thanks. The security issues has been the main
    driving force behind this project. Also now the tabs
    are made very easy if you know how to make CSS styles.
    The menu system now is made from simple lists.

    Still creating CSS styles is not easy and I have CSS styles
    examples with my commercial module.

    I have made a pure CSS style based containers too.
    You define them that way:

    <DIV class=boxSimple00>
    <DIV class=boxSimple00head>
    [ACTIONS]
    [VISIBILITY][ICON][TITLE]
    </DIV>
    <DIV class=boxSimple00body id="ContentPane" runat="server">
    </DIV>
    </DIV>

    It's all CSS styles. I eleminated the tables completely in the containers
    too.

    Speerio site map does uses .js and I've to live with that fact. Very
    soon I'll release pure CSS functionality for trees too.

    Automate and Integrate Your DHL Shipping Process:

    http://www.ExpediteShip.com



    Get XmlSmith CSSTAB & CSSNAV 1.0 at

    http://www.snowcovered.com/snowcovered2/Default.aspx?tabid=60&ctl=CatalogItemDetails&mid=813&CatalogItemID=735
  • Re: DNN site with pure CSS menu, tabs and layout

    06-19-2004, 12:56 PM
    • Participant
      930 point Participant
    • xmlsmith
    • Member since 11-02-2003, 9:56 PM
    • Orange County, California, USA
    • Posts 186
    Hi Armand,

    I visited your site - it's a good site. It has a different
    approach though.

    It's good that the code I published a month ago
    about pure CSS solution raised a lot of interest
    and discussions in this forum.

    I decided to release my solution as a commercial
    solution because I do believe that that way I can
    support this product better. I myself use several free
    modules of course but the problem I face is that
    I cannot get support for them. Even if I have
    the source code - I do not have the time to delve
    deeper in the code and to fix problems, etc. And
    when a new version arrives it obliterates all my additions
    to the code. In other words you cannot maintain
    an open source solution - you are at the mercy of
    the author - if he has the time to fix the problem
    or to add features.

    DNN it's a grand project made from committed professionals.
    Modules for DNN is a different matter - for the free ones
    you cannot get professional and fast support. I personally own several
    commercial modules from Snowcovered. I do receive very good support
    from the authors - usually after hour or two. I have paid for
    the source code for peace in mind if for some reason I don't
    receive a support. But for me is much easier to pay $60 bucks
    and to receive professional support than to spend 1 day to solve
    some problem with the module. Making a portal is not the main
    task if you have a software to sell. The software itself is much
    more complicated.

    These are the realities if you try to run a business and your time is
    precious - you buy ready made solutions with professional support
    and go further to make things not already made.










    Automate and Integrate Your DHL Shipping Process:

    http://www.ExpediteShip.com



    Get XmlSmith CSSTAB & CSSNAV 1.0 at

    http://www.snowcovered.com/snowcovered2/Default.aspx?tabid=60&ctl=CatalogItemDetails&mid=813&CatalogItemID=735
  • Re: www.expediteship.com

    06-19-2004, 1:00 PM
    • Participant
      930 point Participant
    • xmlsmith
    • Member since 11-02-2003, 9:56 PM
    • Orange County, California, USA
    • Posts 186
    Hi Michael,

    Thanks for the note. I do know about this
    incopatibility. IE has been my priority.
    The problem is in CSS stylesheets. Different
    browsers handle CSS a little different. I'll
    find a time to change the CSS sheets but
    it's not my first priority for now. From my
    browser statistics I can see that 95 % of
    my visitors use IE.
    Automate and Integrate Your DHL Shipping Process:

    http://www.ExpediteShip.com



    Get XmlSmith CSSTAB & CSSNAV 1.0 at

    http://www.snowcovered.com/snowcovered2/Default.aspx?tabid=60&ctl=CatalogItemDetails&mid=813&CatalogItemID=735
  • Re: DNN site with pure CSS menu, tabs and layout

    06-19-2004, 1:10 PM
    • Star
      10,740 point Star
    • nokiko
    • Member since 10-22-2002, 2:36 PM
    • Utrecht, Netherlands
    • Posts 2,146
    Fo some great css styles for menus and tabs check here, I have used these various times and its what my skinobjects are based on. The base html code is a simple ordened list and you can use all the css styles on that site.

    If you want more info regarding css tabs just google for 'css tabs' and you will find lots more that you can use.
    Armand Datema
    5 Skins, 4 SkinObject, 38 Containers, 2 Modules and more Euro 50 a year.
    SchwingNuke
    Offshore DNN and ASP.net development
    Container Creator
  • Re: DNN site with pure CSS menu, tabs and layout

    06-19-2004, 1:20 PM
    • Participant
      930 point Participant
    • xmlsmith
    • Member since 11-02-2003, 9:56 PM
    • Orange County, California, USA
    • Posts 186
    These are good examples and there a lot of sites.
    The Eric Mayers' books are very valuable. Still
    making CSS stylesheets for DNN is very far from
    easy. Why?

    Because you have many stylesheets in one time:
    portal CSS, skin CSS, containers CSS, etc.
    Sometimes they are conflicting, you have to choose
    a godd naming convention, etc. You cannot simply
    goto some site and get the CSS style from it and
    use it in DNN.

    Again - this is the reason I'll publish XmlSmith CSSTAB
    and CSSNAV as a commercial modules - it needs support
    and many DNN specific examples in order a pure CSS
    soltion to be used easily with DNN.
    Automate and Integrate Your DHL Shipping Process:

    http://www.ExpediteShip.com



    Get XmlSmith CSSTAB & CSSNAV 1.0 at

    http://www.snowcovered.com/snowcovered2/Default.aspx?tabid=60&ctl=CatalogItemDetails&mid=813&CatalogItemID=735
  • Re: DNN site with pure CSS menu, tabs and layout

    06-19-2004, 1:46 PM
    • Star
      10,740 point Star
    • nokiko
    • Member since 10-22-2002, 2:36 PM
    • Utrecht, Netherlands
    • Posts 2,146
    Hi

    Well my site is far from ready right now im using it to test the css tabs. I am workign on various addons. I have made nice money with dnn custom solutions for big time porjects and companies and the skinobjects will come with its own example site and ill try to support them best as possible.

    Got so much from dnn that ist time to pay back, I have a normal job and I freelance with dnn which right ow I see as funa nd with all the awesoem free and suppported modules out htere its time to follow in some of the footsteps from people like donker (mht module), smcullen ( lots more ) bo nrogaard ( multi content ) and a lot more.

    I like graphic overkill sites but also pure css. Asfor how its now the menu is becoming way too slow. Most people hardly ever use all the new features of solpart menu so its mosly overkill. We have been redoing dnn to pure css based solution from version one and up but nw with version 2 you can do it without tempering on the core toomuch, only for a real solution it could use soem rewrites, but most can be done

    I just found a full css based solution for the standard rounded corners dnn container get it here
    Armand Datema
    5 Skins, 4 SkinObject, 38 Containers, 2 Modules and more Euro 50 a year.
    SchwingNuke
    Offshore DNN and ASP.net development
    Container Creator
  • Re: DNN site with pure CSS menu, tabs and layout

    06-19-2004, 2:17 PM
    • Participant
      930 point Participant
    • xmlsmith
    • Member since 11-02-2003, 9:56 PM
    • Orange County, California, USA
    • Posts 186
    [...]Got so much from dnn that ist time to pay back[...]

    Armand this is all about business matters. Having a real
    company behind a product with professional support can
    be considered payng back DNN community too. When
    you make consulting projects you support your clients
    because they paid to you and you have the obligation
    to support them. This is not about the source code -
    it is all about real people standing behind a product -
    in your case - a consulting project.

    After several months DNN will evolve very fast and will
    get much more complicated and with much more features.
    To support and maintain modules for it will need more time
    and expertize. One example what can happen is DNN 2.1.1.
    You have to install, test it in a sandbox environment
    with all modules you have in the real site. Then to make a
    backup of the site, upload the new code, update, test again.
    This is very time consuming if you have a module to support.
    You have to test it very well and release it in timely manner.

    In order a established business owner to rely on software
    solution he has to be sure that behind a product stands a real
    company committed to support it products. This is a simple
    reality. See what happens with Linux - it goes mainstream now
    because IBM, Novell, etc. stand behind this free open source
    product and support it. Support is everithing in the business.
    Sun plans to release Solaris as an open source soon too.
    This means that the source code is not so important now.
    You get a millions of lines free source code - so what do you
    do with it - read it? No - you go to Sun to get support package
    because they are real company with people standing behind the
    product.

    With source code in hand you have to commit a lot of time to study
    it, test it it and then if you have the time and commitment to expand
    it if you are allowed to do that from the author.

    ABout free modules - if the module is more complicated you get to
    the point you cannot support it anymore if it's free. You get inevitably
    to this point. So now a business gets this free module and after 1 year
    the author chooses different venue - simply stops to supoort it -
    everithing can happen. Now the business has already a solution based
    on free module, whants to expand it, etc. He have to do it itself - this
    is not always possible.

    This is whay I rely on DNN as a free solution, but buy modules in order
    top be sure everithing runs smoothly.





    Automate and Integrate Your DHL Shipping Process:

    http://www.ExpediteShip.com



    Get XmlSmith CSSTAB & CSSNAV 1.0 at

    http://www.snowcovered.com/snowcovered2/Default.aspx?tabid=60&ctl=CatalogItemDetails&mid=813&CatalogItemID=735
  • Re: DNN site with pure CSS menu, tabs and layout

    06-28-2004, 4:42 PM
    • Participant
      930 point Participant
    • xmlsmith
    • Member since 11-02-2003, 9:56 PM
    • Orange County, California, USA
    • Posts 186
    Now you can get it from:

    http://www.snowcovered.com/snowcovered2/Default.aspx?tabid=60&ctl=CatalogItemDetails&mid=813&CatalogItemID=735
    Automate and Integrate Your DHL Shipping Process:

    http://www.ExpediteShip.com



    Get XmlSmith CSSTAB & CSSNAV 1.0 at

    http://www.snowcovered.com/snowcovered2/Default.aspx?tabid=60&ctl=CatalogItemDetails&mid=813&CatalogItemID=735
  • Re: DNN site with pure CSS menu, tabs and layout

    06-28-2004, 5:11 PM
    • Star
      10,740 point Star
    • nokiko
    • Member since 10-22-2002, 2:36 PM
    • Utrecht, Netherlands
    • Posts 2,146
    hey

    good you have it out there, im too busy with cleints stuff but my version is alsmost ready.

    maybe an idea to post some screenshots or samples pf wat we can expect?

    Armand Datema
    5 Skins, 4 SkinObject, 38 Containers, 2 Modules and more Euro 50 a year.
    SchwingNuke
    Offshore DNN and ASP.net development
    Container Creator
  • Re: DNN site with pure CSS menu, tabs and layout

    06-28-2004, 5:22 PM
    • Participant
      930 point Participant
    • xmlsmith
    • Member since 11-02-2003, 9:56 PM
    • Orange County, California, USA
    • Posts 186
    Yes, it's a lot of work and debugging of
    the skinobjects and CSS. I have very good
    examples there how ot make pure CSS Skins
    with 3 layouts - 1 column, 2 columns, 3 columns.
    You can have pure CSS header and footer too -
    usually not possible with CSS but I found a
    solution. Also pure CSS containers examples
    are available when you purchase
    XmlSmith CSSTAB & CSSNAV 1.0.

    Will release very soon a lot more CSS layouts,
    CSS Tabs, CSS Menus and CSS Containers
    working with this solution.

    Better look a t a live site than on screenshots.
    Please, go to http://www.ExpediteShip.com
    and you can see what can be made with
    XmlSmith CSSTAB & CSSNAV 1.0
    Automate and Integrate Your DHL Shipping Process:

    http://www.ExpediteShip.com



    Get XmlSmith CSSTAB & CSSNAV 1.0 at

    http://www.snowcovered.com/snowcovered2/Default.aspx?tabid=60&ctl=CatalogItemDetails&mid=813&CatalogItemID=735
  • Re: DNN site with pure CSS menu, tabs and layout

    06-28-2004, 5:27 PM
    • Participant
      930 point Participant
    • xmlsmith
    • Member since 11-02-2003, 9:56 PM
    • Orange County, California, USA
    • Posts 186
    >Schade Deutschland alles ist furbei :)

    What do you mean by this? ;)
    Automate and Integrate Your DHL Shipping Process:

    http://www.ExpediteShip.com



    Get XmlSmith CSSTAB & CSSNAV 1.0 at

    http://www.snowcovered.com/snowcovered2/Default.aspx?tabid=60&ctl=CatalogItemDetails&mid=813&CatalogItemID=735
Page 1 of 3 (36 items) 1 2 3 Next >