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, ...Dynamic CSS SelectorDynamic CSS Selector
Previous
 
Next
New Post
6/13/2006 6:16 PM
 

We have a design that requires a new color scheme two times a month.  The color scheme applies to new tabs (a specific parent tab and its children) while all the rest of the previous tabs retain the previous color scheme. 

 

Specifically, we have a printed bi-monthly newsletter that changes colors.  The tab layout is Past Issues and the children of Past Issues are 1/1/2006, 1/15/2006, 2/1/2006, etc.  In this example 1/1/2006 has a unique color and so do all his children.

 

The skin layout is consistent issue to issue and the color scheme is made with background images via a CSS.  

 

The manual way is to make a new skin every month, I guess.  Then manually apply the new skin to the applicable pages.  Instead, I’d like to figure out a way to dynamically change the skin.css (equivalent) by page instead of creating new skins.  This way I’d only have to modify the CSS to look for different background images.

 

Or, better yet, change the directory of the CSS so I can have unique directories for all the corresponding images.  This way I wouldn’t have to modify the CSS but just have different images (same file names only the directory would be different).

 

Anyone have any experience with this?  Would it work to inject a unique css path in the page Header?  Is there a more automated way (module) to manage something like this? Is this a fantasy?

 

Thanks for any help.

Paul

 
New Post
6/13/2006 6:57 PM
 

I'm very much into theme and efficient use of skinning files -in fact I try to use as little as possible, and use CSS where possible and think globally about my designs and see where we can have common look and feel, as well as the ability to make small but important changes.  And I hate lots and lots of folders in my skinning directory when 1 will do the job with multiple css files to handle it.

It does take a bit of thought and I have a small article that covers understanding the css skinning hierarchy which is an important starting point.

You can in fact, if you're design is planned, simply rename the file, and give it another folder for images, do a copy and replace image locations, change a few colours and your skin should be completely rejuvenated to the new look and feel.

What you need to do is then apply the customised elements - eg.. the montage, text colour, whatever, to the individual css file - so it would look like this.

Issue01.ascx - Issue01.css (and that file would have it's own classes)

Issue02.ascx - Issue02.css (and that file would have it's own classes)

and so on.

And if you design the main global elements - eg.. font size, padding, overall look and feel - and keep that in the skin.css file - then you would have all the elements you need for a simple change.

I hope you understand this overview since you've grasped the crux of the concept of it.

Nina Meiers


Nina Meiers My Little Website
If it's on DNN, I fix, build, deploy, support,skin, host, design, consult, implement, integrate and done since 2003.
Who am I? Just a city chic, having a crack at organic berry farming.. and creating awesome websites.
 
New Post
6/13/2006 9:36 PM
 

This is quite simple with a little bit of Javascript. Basically you take advantage of two things:

1. The DotNetNuke URL Rewriter includes the tab name in the URL, and

2. Most modern browsers allow you to inject a stylesheet on-the-fly with Javascript.

The solution is to name all the child pages with a common prefix and use that prefix to dynamically inject a stylesheet that customizes the appearance of the page. With this approach, you have one skin that works one way for all pages, but works a different way whenever the page displayed has a name that begins with the designated prefix. (Note: You can give the page any title you wish; it's just the page name that has to follow a convention.)

For testing my solution, I created the following:

1. A skin named "Dynamic" with a single template named "Portal.ascx" and a stylesheet named "skin.css". The solution does not care about either of these names...you can use any names you wish.

2. In the "Dynamic" skin folder, I created sub-folders named "01012006", "01152006" and "01262006". In each sub-folder, I created a stylesheet named "overlay.css" with some styles that override definitions in "style.css". You can put any images specific to these styles in the same folder (or a sub-folder) since stylesheet URLs are always relative to the stylesheet file.

3. I created a page named "Past Issues" and set its skin to "Dynamic - Portal". I created child pages "ISSUE01012006", "ISSUE01152006" and "ISSUE01262006". I set the skin on each to be the same, i.e. "Dynamic - Portal".

4. I put the following code in "Portal.ascx" just below the last <%@ Register... statement:

<script type="text/javascript" language="javascript">
// <![CDATA[

function injectStyleSheet(prefix)
{
    var segments = location.href.split("/");
    var issue = "";

    for(var s=0;s<segments.length;s++)
    {
        if (segments[s].indexOf(prefix) == 0)
        {
            issue = segments[s].replace(prefix,"");
            break;
        }
    }

    if (issue != "")
    {
        styleSheet = "<%= SkinPath %>" + issue + "/overlay.css";
        if (document.createStyleSheet)
            document.createStyleSheet(styleSheet);
        else
        {
             var head = document.getElementsByTagName("head")[0];
             head.innerHTML += "<link rel=\"stylesheet\" href=\"" + styleSheet + "\"/>";

        }
    }
}

injectStyleSheet("ISSUE");

    // ]]>
</script>

That's about it. The code kicks-in whenever a page name begins with "ISSUE" (you can change this) is encountered and customizes the appearance.

Nik

 


Nik Kalyani
Co-founder
DotNetNuke Corporation
Blog | Twitter | FaceBook
 
New Post
6/13/2006 9:39 PM
 

Have a look at these blog entries, they should start you in the direction if not get you to where you are going.

 

http://blogs.snapsis.com/PermaLink,guid,105f8d79-ffbc-4859-836c-b747364fa59c.aspx

http://blogs.snapsis.com/PermaLink,guid,148f785b-3892-47ae-b969-0549aeb30b29.aspx


DotNetNuke Modules from Snapsis.com
 
New Post
6/14/2006 11:25 AM
 
Wow!!! Great info and suggestions from all three of you.  Thank You!!
 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Dynamic CSS SelectorDynamic CSS Selector


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