Hi,
I know this is probably basic, but how can I change the color of a hyperlink (in the HTML/TEXT module) that is located in a particular pane? I need to change the "active", "visited" and "hover" states. By this, I want other hyperlink colors (in different modules and panes) to remain the same, so this is not a portal wide change of hyperlink colors. Any ideas?

Thanks,
Olafur

Hello Olafur

You might like to try to add a custom hyperlink style to your style sheet and call the style to the induvidual pane in your page.

For example:

.mycustomstyle {background: #fff;}
a.mycustomstyle:link, a.mycustomstyle:visited { text-decoration: none; font: bold 10pt; color:#003366;}
a.mycustomstyle:hover { text-decoration: underline; color: #cc0000;}
a.mycustomstyle :active {text-decoration: none; font: bold 10pt; color: #ABBFEF;}

In your skin you could add your custom style to a specific area to be used by the required module:


<div runat="server" id="CustomPane" class=".mycustomstyle">

Oops!
I see that some of the code did not show up even though I first pasted it into Deamweaver.

Ok in your skin.xml file you might call the style .mycustomstyle.css to a specific token mySTYLE.

Or in your skin if you are using: runat="server"

Inside your html div tags put this:

div id="mySTLYLE" class=".mycustomstyle" div

I hope this shows up.

Lynn

Thanks. I tried this the easy way by (using the Developers Toolbar in Firefox) adding this into the pane I am looking at (bannerleft) in the skin.css (I used #ffffff just for testing purposes):

.bannerleft
{
width: 496px;
height: 154px;
background-color: ;
padding: 10px 16px 10px 16px;
margin: 0px;
background-image: url(top3.jpg);
background-repeat: no-repeat;
background-position: top right;
color: #eecc66;
font-weight:bold;

A:link {text-decoration: none; color: #ffffff;}
A:visited {text-decoration: none; color: #ffffff;}
A:active {text-decoration: none; color: #ffffff;}
A:hover {text-decoration: underline; color: #ffffff;}

Still, this does not change the current colors of the hyperlinks within the module in bannerleft? Should this not work?

Regards, Olafur

Hello Olafur

Have you tried being more specific with your links:

A.bannerleft:link {text-decoration: none; color: #ffffff;}
A.bannerleft:visited {text-decoration: none; color: #ffffff;}
A.bannerleft:active {text-decoration: none; color: #ffffff;}
A.bannerleft:hover {text-decoration: underline; color: #ffffff;}

Also include the class within your "runat-server" it should work.

 id="bannerLeft"  runat ="server"  class="bannerleft"

Or perhaps you could include your links  within a container created  just for this purpose, however, I have not tried this method, so I cannot say 100% that it will work.

Good luck

Lynn

 

 

Hi,
Thanks for the help. Can you tell a novice where to insert the class? Where is the "runat-server" ?

Thanks,
Olafur

Hello Olafur

You create the style in your skin.css file.

Within your skin and in between HTML  <  >  tabs you will need to manually insert your , runat server, also the name you have chosen to call the content pane or  that section of your skin and the class you have created associated with that pane.

runat ="server" id ="LeftContentPane"  class="myleftpaneStyle" 

If you are using Dreamweaver, you can use Dreamweaver extension for DotNetNuke skinning, found here:http://www.thinkofdesign.com/Produc...fault.aspx

You will find that all you need to do is select insert in your tool bar for a dropdown menu of DNN skinning properties which upon selection can then be inserted into your skin as required.

I know it sounds complicated but I suggest you download and view sample skins just to see how they look and how they have been created. It is not as difficult as it seems.

You will find sample skins to download at the above link and also Lee has some sample skins on this site. I suggest also that you view the skining tutorials on dnncreative I think that some skins accompany the tutorials, for you to study.

Good luck

Lynn

Hello Olafur

Alternatively you could use the FCKeditor and just assign your css style directly to the section of links which require your choice of styling.

You will find a tutorial on using the FCKeditor on dnncreative. However since the tutorial, the FCKeditor has advanced a little.

Lynn