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 ForumsDocumentsDocumentshow to change columns width ? how to change columns width ?
Previous
 
Next
New Post
10/27/2009 5:41 AM
 

Hi,

I put some Documents modules in my site, but the column for the title is very small (si the title is on 2 lines) and the summary column is too large... I would like to reduce the column for summary and so expand the column width of the title ? Is it possible ? I was searching the ascx file in my site but was not able to find it..

Thank you for your help !

Jocelyn

 
New Post
10/27/2009 10:39 AM
 

Hi Jocelyn,

The answer is yes, this is possible.  You can do this by editing the site CSS stylesheet.  The Documents Module dynamically assigns CSS classes to each cell in the data grid on the view form.  The CSS style it assigns takes the name of the column (as defined in the local resource file for the module) and concatenates "Header" to it.  If you add the appropriate styles to your stylesheet you can assign a width (as well as any other style attributes).  For example, to style the title and summary columns enter the following into the site stylesheet via "Admin > Site Settings".

.TitleHeader {width: 200px;}

.SummaryHeader {width: 50px;}

Remember, CSS styles ARE case sensitive so make sure you get the class name exactly as it is defined in the LocalResource file.  If things aren't working correctly you can "View Source" and look for the class name assigned to the column in question.  Also, after making CSS style changes I have found that sometimes I have to restart the application in order to get the changes to take affect.

One more thing... in addition to the above which shows you the classes assigned to the header columns, additional classes are assigned to the data columns.  The classnames assigned to the data columns sould be TitleCell and SummaryCell.  Using these classes you can style the header columns and the data columns individually to do things like put a background color on the header columnss and change the font on the data columns, etc.

I hope this helps.

Chuck

 
New Post
10/27/2009 11:04 AM
 

OK thanks for that. Could I ask you for 2 other questions ? :

1/ I would like to change the download link with an image? how could I do that ?

2/ How could I change the whole width of the module ? exemple : I would like that my Documents module is only 70% of my content pane.

Many thanks
Jocelyn

 
New Post
10/27/2009 2:34 PM
 

Greetings again Jocelyn,  Well, there's good news and bad news...

Regarding question #1 (Good News) - yes, with a little CSS trickery you can do the following.  These style changes should only affect links that are within the "DownloadCell" CSS Class so we shouldn't affect links on other pages.  Note however that they WILL affect all instances of the Documents Module that you have on this site as they all use the same CSS classe names.

  • To apply an image to the download column add the following to your site style sheet.  in the Background-image attribute enter the path (relative to the root of your website) to the image you want to use. Then determine the exact heightand width of your image and set the height and width attributes.  This adds the image to the download column.  
.DownloadCell A {
   background-image: url(/Portals/0/aspnet.gif);
   width: 120px;
   height: 60px;
}
  • Next, there is no way I know of that we can remove the text that's automatically gets assigned to the link by the module's code but we can use CSS to hide it from view.  The following CSS sets the text color to "transparent" for all the various link "states" (i.e. hover).
.DownloadCell A:link, A:visited, A:active, A:hover {
   text-decoration: none;
   color: transparent;
}

Now for question #2 (Bad News)...

  • The Documents Module does place a div (named "DNN_Documents") around it's content however that affects only the content that is rendered inside the skin container that is associated with the module.  The margin around the container itself is a function of the styling of the "ContentPane" within the skin CSS file.
  • There is no way that I am aware of to change this without modifying the actual skin and it's CSS.  I don't recommend messing with this unless you are very sure of what you are doing.  Messing up the skin can make the site unusable!!!  Do so at your own risk. 
  • If you do elect to experiment with modifying the skin create a copy of the skin and apply the copy to a single page that has content that you don't care of you loose. 
  • The answer to this question may be better sought in the skinning forum (Make It Hot!).

Hope this helps some more,

Chuck

 
New Post
10/27/2009 6:29 PM
 

RE: Item #2

What about creating a container for the documents module with width set to 70%?  That should do it.


 
Previous
 
Next
HomeHomeDNN Open Source...DNN Open Source...Module ForumsModule ForumsDocumentsDocumentshow to change columns width ? how to change columns width ?


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.

Copyright 2014 by DNN Corp Terms of Use Privacy
Request
a Demo
See Evoq Live
Latest Blog
How to Make Advocate Marketing Work for You
Read It
Watch the Replay
Top 5 Reasons to Consider a Branded Online Community
Watch