DotNetNuke Skins and Resources by ThinkofDesign

Here is what you 'll find in the zip file you download:

1) skins folder: in this folder there is the beyondcss.zip which is the zip file with the skins you have to upload to your portal.
2) containers folder: in this folder there is the beyondcss.zip which is the zip file with the containers you have to upload to your portal.
3) about.htm: installation info, license and copyrights.

When you 'll have both skins and containers installed, in your admin  > site settings or admin  > skins you 'll find the following:

Skins:
beyondcss : 1column (1 column skin without menu. You can use this skin for the registration page.)
beyondcss : 2columns (2 columns skin with vertical menu. You can use this if you don't need a right pane. Panes available: LeftPane, ContentPane.)
beyondcss : 3columns (3 columns skin with vertical menu. Panes available: LeftPane, ContentPane, RightPane.)

You 'll find three more skins with a _speerio addition in the name where instead of the CurrentDate skin object there are the Speerio Skinergy accessibility tools.

* All skins include also a BannerPane in the header.

Containers:
common : A common boxed style container.
notitle : The same boxed style container without title.

How the Speerio Skinergy accessibility tools work:

The tools don't need additional skins to implement the accessibility options.
For the skin's width and font size there is a prefs folder in the skin with the CSS styles that will override the default styles.

The color templates implementation is not that simple... Two additional files needed to make it work: the skincolor.css and palettes.xml.
In the skincolor.css we set the CSS styles we need to have dynamic values. In the palettes.xml we set the color values for each palette.

Example:

For example if we want to have different body background color for each palette we do the following:

In skincolor.css:
html,body{background:[Background]}

The dynamic color value above is the [Background], so when we 'll choose the "Hi-Contrast" pallete, the [Background] value becomes #000 as you can see in palettes.xml below.

In palettes.xml:

< Palettes >
...
   < Palette name="Hi-Contrast" >
       < Color name="Background" value="#000" / >
       < Color name="Foreground" value="#FFF" / >
       < Color name="Link" value="#FFF" / >
    < Color name="LinkHover" value="#FFF" / >
       < Color name="Link2" value="#FFF" / >
    < Color name="Link2Hover" value="#FFF" / >
    < Color name="Color1" value="#036" / >
       < Color name="Color2" value="#369" / >
       < Color name="Color3" value="#69C" / >
   < /Palette >
...
< /Palettes >

If you need more clarifications on how the BeyondCSS skin works, so you can create your own variations, just let me know and I 'll try to help.

Cheers,

Vasilis

Hello Vasilis

I have tried to create alternatives to your beyondcc skin.  However, I seem to have hit a problem.

I have tried to add a bit more colour to the skin than just a basic background without success. I have found that some of the background colours within the < Palettes > are ignored.

For example I am trying to change the colour of a box within a box but nothing happens to either box, except the change of font colours within the box. I don't understand why the colours stay the same. I presumed that the colour would change for any given token.

Is this problem caused because I am trying to change colours other than the basic background colour, which BTW I left as default #999 behind the first larger box.

Any sugestions? Thanks in advance.

Regards

Lynn

Hi Lynn,

All CSS styles can have dynamic values.

I made some changes to the forums and now you can attach txt or image files (jpg,gif,png) with your posts.

So please copy your code in one or more txt files and attach the files so I can take a look.

Cheers,

Vasilis

OK Lynn,

You have just misunderstood how the skincolor.css works!

Here is how it goes:

.CSSClassName{ CCStyleWeWantToApplyDynamicValue:[DynamicValueFromPalettes.xml] ; }

Examples:

.box1{ color:[color1] ; background-color:[background1] ; border-color:[color2] ; }
.box2{ color:[color2] ; background-color:[background2] ; border-color:[color2] ; }

Of course after that you have to set the dynamic values in the palettes.xml

I hope you got it now!

Cheers,

Vasilis

Hi continued .....

I have attached a text document showing extracts from the various files, reference the background colours I am trying to change.

This time I have also included the background wrapper in the hope that this might jolt things into action.

However, I have found that it does not help either.


Lynn

Hi Vasilis

Thanks for your reply.  Nope I haven't got it yet!!  Dooh....
 
But thanks to you I have managed to get the inner boxes to change colour. But  I am obviously still misunderstanding something, because the outer page wrapper and the main box remain the same colour.  Maybe the box is just too complicated to alter, or I am just too dumb to get it to work.

Perhaps this skin is too ambitious for a beginner and I should concentrate on something more basic. I have tried for hours and find myself going around in circles.  I have obviously bitten off more than I can chew, trying to run before I can even walk.

I have attached a text file containing the relevant latest coding, maybe you can see immediately, where I am going wrong.  If not, it's ok I'll try something less complex and build up until I can fully grasp how it all works.

Thanks in advance

Lynn

 

Hi Lynn,

I am not sure of what you are trying to accomplish... Your code is a bit confusing.

Maybe if you can post a visual so I can take a better idea, I 'll be able to tell you something!

What I can see now is that you use values in skincolor.css that you haven't set in palettes.xml... the values: [box] , [background2], [background3] don't exist in your palettes.xml

You should have along with the other values:

< Color name="background2" value="#FFFF00" / >
< Color name="background3" value="#FF0000" / >
< Color name="box" value="#FFFFFF" / >

The color values are examples... you set your own.

Cheers,

Vasilis

Cont.............

Yes the code is confusing.  I will try something much more basic.

I have attached an (skin.html) image of the skin, of which I am trying to change the colours.

The large light grey atypical box as seen in the middle and the background colour stay the same.


But I did manage to change the colours for inner values  (Box) (Background2) (Background3). So I didn't include the values within the previous text attachment to save cluttering it up with extra stuff.

Thanks again

Regards

Lynn

I search manual Speerio Skinergy

Thanks

Would you please post or email me about how to specifically only use the TEXT SIZE changer aspect of this code in DNN 4.8.2??

Thank you, Tom

Where BeyondCSS can be downloaded?