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

HomeHomeDNN Open Source...DNN Open Source...Module ForumsModule ForumsRepositoryRepositoryChanging CSS Style of input controls in repositoryChanging CSS Style of input controls in repository
Previous
 
Next
New Post
6/8/2008 11:53 AM
 

Hi there,

I recently purchased a new skin for my website but am having some issues with some parts.

e.g.

http://www.djabstraction.com/dnn/Mixes/tabid/56/Default.aspx

The text in the 3 input boxes at the top of the repository has white text on white background.  I would like to change this for *all* input boxes if possible but am not quite sure how.  If I can solve the repository skin then I should hopefully be able to sort the rest of the site.

Unfortunately i'm no CSS guru, any help would be greatly appreciated.

Nick.

 
New Post
6/10/2008 3:11 PM
 

any ideas anyone?  I'm pretty keen on finding out how to change the style of the input boxes as it is a "skinnable" repository after all.

Cheers.

 
New Post
6/10/2008 4:19 PM
 

Sorry for the delay in responding ...

Since the changes you want to make are in the header section, you'll need to make 2 changes in 2 places.
1. setup a class to define the foreground and background color you want to use
2. edit the XML file to instruct the template engine to use your new class when rendering certain controls

Recommendation:
Create a copy of the repository template you are using and edit your copy, so upgrading or re-installing won't overwrite your changes. In this example I'll use the 'default' repository template.
1. copy /DesktopModules/Repository/Templates/default  to  /Portals/0/RepositoryTemplates/default

If you don't have a RepositoryTemplates folder in your Portal root, just create it.  If you're using a different template, just make sure to copy the folder of the template you want to change from the DesktopModules folder structure to the Portals folder structure.

Ok, now here we go .. make sure your seatbelt is fastened and your computer is in an upright position..

1. Since the header.html file is rendered only once per repository module, it's a good place to define your custom class. Edit the Header.HTML file in your copy folder using notepad or any text editor

2. At the top of the file, add the following lines to create a new class definition.. set the foreground and background to whatever you like. In this example I will reverse the normal colors and have white text on a black background.

<style type="text/css">
.ReverseStyle
{
  color: #ffffff;
  background-color: #000000;
}
</style>

3. Save the file.

4. Open the Header.XML file in notepad or a text editor of your choice. find the Token tags for the control that you want to use your new class for, and set the CssClass Named setting to your new class name. For example. I find the CATEGORIES token and see that the CssClass is set to "normal". Change it to use my new class.

<Token>CATEGORIES</Token>
<Settings>
  <Setting>
    <Name>CssClass</Name>
    <Value>ReverseStyle</Value>
  </Setting>
</Settings>

5. Save the file.

6. Now, if I browse to the web page with my repository module on it .. I will see that the Categories drop down list is now rendered with white text on a black background.

7. I can do the same thing for the [SORT] token

8. Here's a BIG gotcha though .. there's a bug in the template engine, when looking in the XML file for [SEARCHBOX] token, it looks in Template.XML instead of Header.XML. So you'll have to add a new token named [SEARCHBOX] to the Template.XML file and set it's CssClass setting there instead. ( sorry )

That should do it for you. If you have any problems, or other questions, just ask anytime :)

 
New Post
6/10/2008 5:03 PM
 

AAAAH!!  That's fantastic, you're a star, I was digging around with that file earlier thinking it might have something to do with that.

I really appreciate your help, that's very comprehensive and was easy to follow.

I now have everything except 1 small thing with the correct colours in, and that's the little "GO" button next to the search box.  What would be the tag for that?

Again, thanks a million for your help :)

 
New Post
6/11/2008 8:30 AM
 

There's a User's Guide for the Repository module that you can download from the project's downloads page. It contains a token reference.

The token for the GO button is  "SEARCHBUTTON", and the module correctly looks in the Header.XML file for the settings. :)

Link to the downloads page

 
Previous
 
Next
HomeHomeDNN Open Source...DNN Open Source...Module ForumsModule ForumsRepositoryRepositoryChanging CSS Style of input controls in repositoryChanging CSS Style of input controls in repository


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