Hello -

I am attempting to develop a new skin for the first time. So far I am having success, thanks in part to the great tutorials on this website! However, I am having trouble applying css values to tokens on my site (login,user,search).

I am attempting to create the skin in .ascx, as opposed to the traditional html style. I have found multiple tutorials and threads on how to edit these values via html tokens, but I can not figure out how to do it in .ascx

I think my real question here is, how do I know or set the css ID for a token, so that I can edit it in my .css file.

Thanks!
Alex

This reference is still pretty good: http://www.dotnetnuke.com/Portals/2...oc%204.pdf

Basically, you can assign IDs and classes to the skin objects in your ascx file. Some of the skin objects also support attributes that can assign classes to specific parts of the skin objects. You can also look at the source of the rendered pages to identify IDs and/or classes to which you can refer in your css.

Thanks for the quick reply Joseph.

I viewed the page source as you suggested, and confirmed that the css class of my tokens is SkinObject.

I added the class to my skin.css file, and I can successfully change the font size of the text in my skin token with the font-size parameter.
However, I am unable to change the "color" and "font-weight" parameters. It looks to me like css is pulling those values from somewhere else, as it is display the default blue color font. I am having the exact same issue when trying to style the font weight for my menu inside the superfish.css menu file.

I am fairly new to the hierarchy structure in css, but I can tell you that I am not using any in-line css code, and I am linking only one css file to the skin. The default skin.css file. Does this sound like hierarchy issue to you?

Alex

Alex,

The items to which you refer are links, so you will need to supply CSS styles for links, too.

So, for items in the SkinObject class, you will want to have something in your CSS file that styles .SkinObject a. You can also style hover and visited links.

You should also be aware that there are other CSS files: default.css, portal.css, possible module.css files, container.css files, etc. If you use something like Web Developers' Toolbar or the developer tools in IE or Chrome, you can see where skin.css appears in the hierarchy.

Excellent. Thanks Joseph.

I just discovered the magical tool that is the web developer toolbar. I can display ID and class details for the whole site. Yay!

Alex

There are also developer tools in IE and Chrome.

Chrome has tools that let you edit the entire DOM. It can be quite powerful. There are also some good tools in IE. I find that I often switch around, depending on what I'm trying to do.