Small width layout Medium width layout Maximum width layout Small text Medium text Large text
     Search
Downloads Downloads Directory Directory Forums Forums Forge Forge Blogs Blogs        Marketplace Marketplace Careers Program Careers
Community › Forums Register  |  

DotNetNuke Marketplace
  Ads  
OnyakTech
 


  Sponsors  

Meet Our Sponsors

The Official Microsoft ASP.NET Website
Portal Webhosting - Hosting For Developers
Red-Gate Software
MaximumASP
SourceGear - Tools for Developers
.: CounterSoft :.
 


DotNetNuke Forums
 
  Forum  General DotNetN...  Make it Hot! ( ...  Login link CSS class?
Previous Previous
 
Next Next
New Post 6/21/2006 8:57 PM
User is offline Dave Galatte
8 posts
10th Ranked


Login link CSS class? 
I've created a custom skin and everything is working fine except for the login link.  What class name should I use in my CSS to set the style for the login link?
 
New Post 6/22/2006 1:20 AM
User is offline Lee Sykes
279 posts
www.dnncreative.com
9th Ranked


Re: Login link CSS class? 
Hello,

If you are using DNN with the default settings the class will be .SkinObject

This also styles the Search, Date, Breadcrumbs, Copyright, Terms, Privacy.

It is also possible to set your own CSS class name for skin objects. - So you could style the login links without affecting the other tokens listed here.

If you are skinning using a skin.htm file, you specify the CSS class in the skin.xml file. - To give you an overview of how this works:

The skin.xml file is used when you are creating a skin using the skin.htm method. When you upload your skin, DNN takes these two files and combines them together to create a skin.ascx file.

So, if you are working with a skin.ascx file you do not need to create a skin.xml file.

Ok, that's the overview - The actual skin.xml file:

Within this you setup each of your tokens that you want to use in your skin.

If for instance I use the code at the bottom of this page within my skin.XML file, you can see that under the LOGIN token you specify the CssClass - Here it is called: SkinItem.

So, to style the [LOGIN] token you will need to add to your skin.css file: (Remember Login is actually a link, so you need to style the link element of the .SkinItem class - details below)

.SkinItem {
font-size: 20px;
}

So for this to work with the settings we have specified in our own skin.xml file we would use:

.SkinItem {
    font-weight: bold;
    font-size: 15px;
    color: orange;
    font-family: Tahoma, Arial, Helvetica;
    text-decoration: none;
}

A.SkinItem:link {
    text-decoration: none;
    color: red;
}

A.SkinItemvisited  {
    text-decoration:    none;
    color: purple;
}

A.SkinItem:hover    {
    text-decoration: none;
    color: blue;
}

A.SkinItem:active   {
    text-decoration: none;
    color: green;
}

If you look at the Skin.XML file you will see that each token can have its own css class, in the example I have set all of the tokens to use a class named SkinItem - you can name each one to a different css class if you wish and specify the details in your skin.css file.

Hope this makes it clearer, thanks,

Lee


** Example Skin.XML File **

<Object>
        <Token>[LOGIN]</Token>
        <Settings>
            <Setting>
                <Name>CssClass</Name>
                <Value>SkinItem</Value>
            </Setting>
            <Setting>
                <Name>Text</Name>
                <Value>Login</Value>
            </Setting>
        </Settings>
    </Object>
    <Object>
        <Token>[BANNER]</Token>
        <Settings>
            <Setting>
                <Name>BorderWidth</Name>
                <Value>0</Value>
            </Setting>
        </Settings>
    </Object>
    <Object>
        <Token>[BREADCRUMB]</Token>
        <Settings>
            <Setting>
                <Name>Separator</Name>
                <Value> ... </Value>
            </Setting>
            <Setting>
                <Name>CssClass</Name>
                <Value>SkinItem</Value>
            </Setting>
            <Setting>
                <Name>RootLevel</Name>
                <Value>0</Value>
            </Setting>
        </Settings>
    </Object>
    <Object>
        <Token>[COPYRIGHT]</Token>
        <Settings>
            <Setting>
                <Name>CssClass</Name>
                <Value>SkinItem</Value>
            </Setting>
        </Settings>
    </Object>
    <Object>
        <Token>[CURRENTDATE]</Token>
        <Settings>
            <Setting>
                <Name>CssClass</Name>
                <Value>SkinItem</Value>
            </Setting>
            <Setting>
                <Name>Dateformat</Name>
                <Value>MMMM dd, yyyy</Value>
            </Setting>
        </Settings>
    </Object>
    <Object>
        <Token>[DOTNETNUKE]</Token>
        <Settings>
            <Setting>
                <Name>CssClass</Name>
                <Value>Normal</Value>
            </Setting>
        </Settings>
    </Object>
    <Object>
        <Token>[HELP]</Token>
        <Settings>
            <Setting>
                <Name>CssClass</Name>
                <Value>SkinItem</Value>
            </Setting>
        </Settings>
    </Object>
    <Object>
        <Token>[HOSTNAME]</Token>
        <Settings>
            <Setting>
                <Name>CssClass</Name>
                <Value>SkinItem</Value>
            </Setting>
        </Settings>
    </Object>
    <Object>
        <Token>[LINKS]</Token>
        <Settings>
            <Setting>
                <Name>CssClass</Name>
                <Value>CommandButton</Value>
            </Setting>
            <Setting>
                <Name>Separator</Name>
                <Value> | </Value>
            </Setting>
            <Setting>
                <Name>Alignment</Name>
                <Value>Horizontal</Value>
            </Setting>
        </Settings>
    </Object>
    <Object>
        <Token>[LOGO]</Token>
        <Settings>
            <Setting>
                <Name>BorderWidth</Name>
                <Value>0</Value>
            </Setting>
        </Settings>
    </Object>
    <Object>
        <Token>[PRIVACY]</Token>
        <Settings>
            <Setting>
                <Name>Text</Name>
                <Value>Privacy Statement</Value>
            </Setting>
            <Setting>
                <Name>CssClass</Name>
                <Value>SkinItem</Value>
            </Setting>
        </Settings>
    </Object>
    <Object>
        <Token>[SIGNIN]</Token>
    </Object>
    <Object>
        <Token>[TERMS]</Token>
        <Settings>
            <Setting>
                <Name>Text</Name>
                <Value>Terms of Use</Value>
            </Setting>
            <Setting>
                <Name>CssClass</Name>
                <Value>SkinItem</Value>
            </Setting>
        </Settings>
    </Object>
    <Object>
        <Token>[USER]</Token>
        <Settings>
            <Setting>
                <Name>Text</Name>
                <Value>Register</Value>
            </Setting>
            <Setting>
                <Name>CssClass</Name>
                <Value>SkinItem</Value>
            </Setting>
        </Settings>
    </Object>
  <Object>
    <Token>[SEARCH]</Token>
    <Settings>
      <Setting>
        <Name>Submit</Name>
        <Value>Search</Value>
      </Setting>
      <Setting>
        <Name>CssClass</Name>
        <Value>SkinItem</Value>
      </Setting>
    </Settings>
  </Object>
</Objects>
Lee Sykes - DNN Creative Magazine - 366 Video Tutorials, Articles, Interviews - January Issue 40 out now!
DNN Creative Magazine for DotNetNuke

Twitter: www.twitter.com/leesykes

Lee Sykes's Facebook Profile
 
New Post 6/25/2006 9:13 AM
User is offline Dave Galatte
8 posts
10th Ranked


Re: Login link CSS class? 

dnncreative - Thanks for the great explanation.  I've tried what I think you told me to do but I'm still not having any luck in getting the login link to be the correct color.  My skin.css & skin.xml file are below, if you have the chance to take a look and see what I'm doing wrong, let me know. 

When I view the source of the web site, SkinObject is still the css class for the login link, I'm not sure why. 

I thought by setting StingerLogin as the css class in the skin.xml file for the Login object that this would set the css class to be StingerLogin and then use the style settings in the skin.css file to render the Login links. This isn't working.

The URL for the web site is www.vhstingers.com.

Any help would be greatly appreciated.

Thanks!

 

skin.css

___________________

/*

================================

Skin styles for DotNetNuke

================================

*/

.pagemaster {

width: 100%;

height: 100%;

background-color: #000000;

}

.skinmaster {

height: 100%;

background-color: #000000;

BORDER-RIGHT: #7994CB 1px solid;

BORDER-TOP: #7994CB 1px solid;

BORDER-LEFT: #7994CB 1px solid;

BORDER-BOTTOM: #7994CB 1px solid;

moz-border-radius-bottomleft: 15px;

moz-border-radius-bottomright: 15px;

moz-border-radius-topleft: 3px;

moz-border-radius-topright: 3px;

}

.skinheader {

}

.skingradient {

BACKGROUND-IMAGE: url(gradient_stinger.gif); HEIGHT:30px;

}

.controlpanel {

width: 100%;

background-color: #DFE5F2;

}

.toppane {

width: 100%;

background-color: transparent;

padding-left: 6px;

padding-right: 4px;

padding-top: 6px;

}

.leftpane {

width: 175px;

background-color: transparent;

padding-left: 6px;

padding-right: 4px;

padding-top: 6px;

}

.contentpane {

width: 100%;

background-color: transparent;

padding-left: 6px;

padding-right: 4px;

padding-top: 6px;

}

.rightpane {

width: 175px;

background-color: transparent;

padding-left: 6px;

padding-right: 4px;

padding-top: 6px;

}

.bottompane {

width: 100%;

background-color: transparent;

padding-left: 6px;

padding-right: 4px;

padding-top: 6px;

}

.MainMenu_MenuContainer {

background-color: Transparent;

}

.MainMenu_MenuBar {

cursor: pointer;

cursor: hand;

height:16;

background-color: Transparent;

}

.MainMenu_MenuItem {

border-left: #CAD5EA 0px solid;

border-bottom: #CAD5EA 1px solid;

border-top: #CAD5EA 1px solid;

border-right: #CAD5EA 0px solid;

cursor: pointer;

cursor: hand;

color: Black;

font-family: Tahoma, Arial, Helvetica;

font-size: 9pt;

font-weight: bold;

font-style: normal;

background-color: Yellow;

}

.MainMenu_MenuIcon {

background-color: Black;

border-left: #CAD5EA 1px solid;

border-bottom: #CAD5EA 1px solid;

border-top: #CAD5EA 1px solid;

cursor: pointer;

cursor: hand;

text-align: center;

width: 15;

height: 21;

}

.MainMenu_SubMenu {

background-color: Black;

z-index: 1000;

cursor: pointer;

cursor: hand;

filter:progid:DXImageTransform.Microsoft.Shadow(color='DimGray', Direction=135, Strength=3);

}

.MainMenu_MenuBreak {

height: 1px;

}

.MainMenu_MenuItemSel {

background-color: Yellow;

cursor: pointer;

cursor: hand;

color: Black;

font-family: Tahoma, Arial, Helvetica;

font-size: 9pt;

font-weight: bold;

font-style: normal;

}

.MainMenu_MenuArrow {

border-right: #CAD5EA 1px solid;

border-bottom: #CAD5EA 1px solid;

border-top: #CAD5EA 0px solid;

font-family: webdings;

font-size: 10pt;

cursor: pointer;

cursor: hand;

}

.MainMenu_RootMenuArrow {

font-family: webdings;

font-size: 10pt;

cursor: pointer;

cursor: hand;

}

.StandardButton {

background: Transparent none;

color: Black;

font-family:Verdana, sans-serif;

font-size: 11px;

font-weight: normal;

}

.TreeViewMenu {

width: 175px;

background-color: Yellow;

BORDER-RIGHT: #7994CB 1px solid;

BORDER-TOP: #7994CB 1px solid;

BORDER-LEFT: #7994CB 1px solid;

BORDER-BOTTOM: #7994CB 1px solid;

moz-border-radius-bottomleft: 15px;

moz-border-radius-bottomright: 15px;

moz-border-radius-topleft: 3px;

moz-border-radius-topright: 3px

}

.TreeViewMenu_Header {

BACKGROUND-IMAGE: url(gradient_LtBlue.jpg);

}

.Head {

font-family: Tahoma, Arial, Helvetica;

font-size: 16px;

font-weight: bold;

color: Black;

}

.SkinObject {

font-family: Tahoma, Arial, Helvetica;

font-size: 12px;

font-weight: bold;

color: Yellow;

}

.StingerLogin {

font-weight: bold;

font-size: 12px;

color: yellow;

font-family: Tahoma, Arial, Helvetica;

text-decoration: none;

}

A.StingerLogin:link {

text-decoration: none;

color: yellow;

}

A.StingerLogin:visited {

text-decoration: none;

color: yellow;

}

A.StingerLogin:hover {

text-decoration: none;

color: yellow;

}

A.StingerLogin:active {

text-decoration: none;

color: yellow;

}

------------------------------

end of skin.css

-------------------------------

 

start of skin.xml

---------------------------

<Objects>

<Object>

<Token>[BREADCRUMB]</Token>

<Settings>

<Setting>

<Name>Separator</Name>

<Value>![CDATA[&nbsp;&raquo;&nbsp;]]</Value>

</Setting>

<Setting>

<Name>RootLevel</Name>

<Value>0</Value>

</Setting>

</Settings>

</Object>

<Object>

<Token>[LOGIN]</Token>

<Settings>

<Setting>

<Name>CssClass</Name>

<Value>StingerLogin</Value>

</Setting>

<Setting>

<Name>RootLevel</Name>

<Value>0</Value>

</Setting>

</Settings>

</Object>

<Object>

<Token>[TREEVIEW]</Token>

<Settings>

<Setting>

<Name>bodyCssClass</Name>

<Value>Normal</Value>

</Setting>

<Setting>

<Name>CssClass</Name>

<Value>TreeViewMenu</Value>

</Setting>

<Setting>

<Name>headerCssClass</Name>

<Value>TreeViewMenu_Header</Value>

</Setting>

<Setting>

<Name>headerTextCssClass</Name>

<Value>Head</Value>

</Setting>

<Setting>

<Name>level</Name>

<Value>root</Value>

</Setting>

<Setting>

<Name>nowrap</Name>

<Value>true</Value>

</Setting>

<Setting>

<Name>treeIndentWidth</Name>

<Value>5</Value>

</Setting>

</Settings>

</Object>

</Objects>

-------------------

end of skin.xml

-----------------
 
New Post 6/25/2006 11:50 AM
User is offline Gilbert Vanden Borre
390 posts
www.stabiton.net
8th Ranked


Re: Login link CSS class? 
Modified By Gilbert Vanden Borre on 6/25/2006 1:52:37 PM)

Dear czone

You can set a login class like you want in your XML-file like dnncreative has explained...
XML-file

 <Object>
  <Token>[LOGIN]</Token>
  <Settings>
   <Setting>
     <Name>CssClass</Name>
     <Value>Login</Value>
   </Setting>
  </Settings>
 </Object>

Css-file
a.Login:link, a.Login:visited
{
 color: #305f25;
}
a.Login:hover
{
 cursor: pointer;
 cursor: hand;
 color: #26bf00;
 text-decoration: none;
}
a.Login:active, a.Login:focus
{
 color: #197f00;
 text-decoration: none;
}
a.Login:active:hover
{
 cursor: pointer;
 cursor: hand;
 color: #26bf00;
 text-decoration: none;
}

Vriendelijke groeten
Gilbert Vanden Borre
 
New Post 6/26/2006 3:40 AM
User is offline Lee Sykes
279 posts
www.dnncreative.com
9th Ranked


Re: Login link CSS class? 
Hello,

Yes I can see .SkinObject is still set for the loginlinks. - You need to check that you are actually installing the latest skin to your portal correctly. - If I come across this problem, I rename the skin zip file to "myskinname2" and then upload it and select it as the new skin in the admin / site settings.

This ensures that the new edits are definitely being used, as sometimes I upload the new version into the wrong area by mistake ie. the portal area or / host area which then means I am still using the old skin, so renaming the skin helps to confirm that you are uploading and using the latest skin that you have created.

This is what I would check out first, thanks,
Lee Sykes - DNN Creative Magazine - 366 Video Tutorials, Articles, Interviews - January Issue 40 out now!
DNN Creative Magazine for DotNetNuke

Twitter: www.twitter.com/leesykes

Lee Sykes's Facebook Profile
 
 Page 1 of 1
Previous Previous
 
Next Next
  Forum  General DotNetN...  Make it Hot! ( ...  Login link CSS class?
 


Forum Policy

These Discussion Forums are dedicated to the discussion of the DotNetNuke Web Application Framework.

For the benefit of the community and to protect the integrity of the project, 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 DotNetNuke.
2. Discussion or promotion of DotNetNuke product releases under a different brand name are strictly prohibited.
3. No Flaming or Trolling.
4. No Profanity, Racism, or Prejudice.
5. Site Moderators have the final word on approving/removing a thread or post or comment.
6. English language posting only, please.
 


Cestus Websites
DotNetNuke websites en services in Nederland. Cestus Websites levert websites, projectmanagent, skins, modules, training en gespecialiseerde hosting op basis van het CMS DotNetNuke.
www.dotnetnuke-websites.nl 		FREE Skins, Modules & Control Panel!
Choose how much you want to pay on our Skins, Modules, Containers and Control Panel - Starting from FREE!
www.dnngroup.com 		Disgrafic
Diseño y creación de portales web dinámicos :: Desarrollo de módulos personalizados :: Soluciones a medida :: Imagen Corporativa :: Tu proveedor DNN en España
www.disgrafic.com

DotNetNuke Corporation   Terms Of Use  Privacy Statement
DotNetNuke®, DNN®, and the DotNetNuke logo are trademarks of DotNetNuke Corporation
Hosted by MaximumASP