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, ...Fonts, links, H1 in different skinsFonts, links, H1 in different skins
Previous
 
Next
New Post
2/23/2008 6:25 AM
 

Hi,

I'm using dnn 4.8 and have some troubling with the CSS of dotnetnuke.

I'm having 5 different skin files with different colors: Green, Red, brown, blue and yellow.

The skins are working fine, but i don't have any clue how to change the css of text in the skins. When a person comes on the green skin, the url's and titles should be green, different font. When they come on the page with the red skin, the url's and titles should be red, ... .

So when i use in the HTML module a <h1 -tag, it should automatically get the right font in the skin (with the right colour).

How can i easily control the fonts?

Thx!

 

Thomas

 
New Post
2/23/2008 11:35 AM
 

Hi Thomas,

usually I modify the classes:

H1  {
}

H2  {
}

H3  {
}

H4  {
}

H5, DT  {
}

H6  {
}

TFOOT, THEAD    {
}

TH  {
}

A:link  {
}

A:visited   {
}

A:hover {
}

A:active    {
}

in the skin.css file to manage the style of general text rendered in the skin. This applies to the text rendered in Text/HTML modules too.

Hope it helps,
Dario Rossa.

 
New Post
2/23/2008 1:19 PM
 

Ahh CSS. It can be confusing at first. The problem, or more, lack of results you are having is due to a misconception of what you are doing.

I’m making some assumptions about what you are asking, with lack of code. If you could post your CSS and HTML we could better diagnose the problem.

Making my assumptions…you’re code probably looks something like this:

<h1><a href=”somelink”>sometextforlink</a></h1>

We have to dissect the code a little bit..so I’m going to change it in my example to clarify, by adding a paragraph of text below, and some other stuff, starting the HTML example at the body tag…everything above is irrelevant for this example.


<body>
<h1><a href=”somelink”>sometextforlink</a></h1>
<p> A paragraph of plain old text that does nothing special </p>
</body>

So, in your CSS you probably have:
body{
color:red; /*just using red for an example */

}


Now the result, is all the text in the P tag is RED, but the link itself is still blue eh?
There are a few things, and I haven’t refreshed my memory completely so if I’m incorrect someone please let me know.

What you are misunderstanding is that the “sometextforlink” in the A tag, seems like text..but it’s more than text…it’s a link….therefore OTHER CSS is applying to it from somewhere else(possibly from within Internet Explorer defaults).
So we need to add:

a{
color:red;
}
Now, the text in the A tag is red, BUT remember is it an active link, a visited link, a hovered over link?
Now we need to also apply psudo classes to the A text since it is a link.

a:active
{
color:red;
}

But what about if someone clicked it once already….it’s gunna revert back to the “visited” color that IE defaults to, unless we override it.
a:visited{
color:red;
}

There we go..now it’s red when it’s visited.
I don’t remember off hand all the psudo-classes in CSS, but you can do just that…google “psudo-class” and CSS.

 

 

I hope that helped a little bit and didn't confuse you more :->

Keep us updated!

 


Josh Martin

 
New Post
2/24/2008 2:57 PM
 

Thx a lot, you both helped me out for now :)!

Best regards,

 

Thomas

 
New Post
2/24/2008 4:33 PM
 

I haven't gotten into multiple styles- i.e. red, blue, green pages; since I'm only starting out myself.
I would assume that if you're using HTML for designing the skin and letting DNN create the ascx file(s), you should define a separate css file for each skin type: 
redskin.css, blueskin.css, etc. and include it in the respective skin's html file for DNN to parse when it gets uploaded.

For instance, with the red skin: 
<head>
     <link rel="stylesheet" type="text/css" href="redskin.css" >
</head>

in the HTML, and in the redskin.css file put your code for the skin.
Alternatively, to keep your CSS files' sizes to a minimum you could also do this:

<head>
     <link rel="stylesheet" type="text/css" href="skin.css">
     <link rel="stylesheet" type="text/css" href="redskin.css" >
(or "blueskin.css" or "greenskin.css"... etc.)
</head>

And put everything common to the skins in the "skin.css" file without any color declarations, and only the color attributes into the respective colored skin files.
The upside to this is that the client won't download the 'greenskin.css' file if you're using the 'red' skin, and vice-versa- could be a big deal for slower connections.

When it is uploaded to DNN, or you have DNN 'parse the skin package', DNN should create the necessary entries in the ASCX file for the skin to use the respective style.

Hopefully we'll get some of the skin experts to comment here too, particularly if my idea is wrong. <g>

 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Fonts, links, H1 in different skinsFonts, links, H1 in different skins


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