DOCman colors/css

I have started using DOCman and it seems like a great component, looks nice and works well, but an issue i have with DOCman is that I can’t seem to change the colors for the submit screen when uploading (where you name the file and all that)

it won’t let me change it from light gray over white, which is completely unbearable.

This is an example:

Does anyone know where I can change that?

I have managed to get everything behind the text headings black (by putting background-color: black; in a ton of spots), but it made it look even worse and i want an actual good solution for this, and I can’t seem to figure it out myself.

Please help a newbie out (again) :slight_smile:

The CSS can be a bit tricky, but you just need to identify which class or id is being used for that part of the display you are unhappy with and modify that.

If you are using FireFox, grap the “WebDeveloper” extension, which lets you display all the CSS information “inline”, and lets you “play” with editing the CSS directly from within the browser for testing. Even if you don’t normally use FF, this extension alone makes it worth installing it just to have access to that feature.

To do the same thing “manually”, go to the page where you have the unacceptable display colors, and “view source” to see what CSS classes/ids are being used for the parts of the display you do not like - that will point you to where you want to edit the CSS.

Bear in mind that if DOCman is using “standard” Joomla! CSS (which I believe it is - you can always check the templates/docman dirs to be sure no other stuff is being loaded), CSS changes you make will be reflected across your Joomla! site wherever the same classes/IDs are used.

If these tips don’t get you pointed in the right direction, set up a “test” account under your docman install, and forward the credentials to me via PM, and I’ll take a look at it for you.


I’m using the Web Development tool, but I still can’t find which thing I have to change.

I think it’s just not in the CSS that i am changing. i’m trying to change stuff via the DOCman Themes “Edit CSS” button, but it’s just not helping.

Here’ a picture of the id’s/classes:

I have changed what I think the issue would of been (pretty much all things .dm related), but to no avail.

I saw the .png, but that won’t help - it is the code of the page that I need to see. :wink:

I doubt that most of the CSS is DOCman uses is in the DOCman “theme”; many of the sites where I have viewed the code seem to only use the standard Joomla! CSS in the pages DOCman displays to a user who is not “adding” an item.

It could also well be that the colors you are struggling with are actually part of the WYSIWYG editor’s CSS - and this can be tricky, as it has its own CSS, which, if present, takes precedence over the main Joomla! themes CSS. Are the colors you are struggling with actually part of the WYSIWYG editor? :wink:


that is the coloring that I am having trouble with.

i’m not 100% sure what that editor is, but i’ll dig around and try and find a css file to mess around with.

i’m using a joomla theme, too, and i’ve tampered with that css file as well to try and get rid of this problem.

nevermind - it appears as though a WYSIWYG editor is something like dreamweaver, which I have never used.

The .png does not let me inspect the CSS, or other code, that is being used to “style” the page - it shows what it looks like, but not how it was made to look like it does.

From my earlier post:

While it can be fun/frustrating to twiddle with the various CSS you may find, that is really not the best way to approach the problem; unless you understand the cascading involved (The “C” of “Cascading Style Sheets”) you might break a bunch of other styling on your site when/if you find something that changes the colors on that DOCMan page display. :wink:

The editor is nested pretty deep within the Joomla! directory structure - searching for CSS and TinyMCE on the Joomla! forums will point you in the right direction.


PS: Edited - Oops I now see the classes/ids in the latest .png - It looks like the stuff you are going to want to change is the standard Joomla! CSS - I can’t tell for sure, as I don’t have the DOCMAN CSS file, but if the DOCMan CSS file does not “re-style” the basic

text used in the form (or some other container - the .PNG has stuff covered), then that light grey on white text is being derived from some other style definition.

The WYSIWYG editor I was referring to is the javascript code that allows a user to “easily” format html in the “description” box that shows at the bottom of your page in the .PNG - it is a part of Joomla!

IF nothing in the DOCMAN CSS is impacting that text you are unhappy with, it is probably in your Joomla! theme CSS file - and will be the same wherever that CSS is called for throughout your site. :wink:

That is the “Joomla!” CSS I was referring to in my previous edit to my last post. The theme CSS sets the standard Joomla! classes for the site, and unless something else modifies those (like the javascript WYSIWYG editor, or the DOCMan CSS), that is where you change how text/backgrounds are displayed.


Do you know how to get to the standard Joomla CSS?

I can’t seem to find it - i have a theme installed and I can find that css easily (/templates/js_empire/css), but not “default” joomla.

and in response to your “breaking other things” aspect, i’m just adding background-color: black which shouldn’t really affect too much (i hope :P)

It is in your “theme” CSS - the theme uses certain “standard” Joomla! classes to style how “parts” of Joomla works. :wink:


in that case i don’t believe that is the issue - i modified the theme CSS and nothing seemed to fix it.

can you pinpoint exactly what class i should be checking/changing, or is it unclear?

i really want this to actually look decent, and thanks for all the help you have given me so far. :slight_smile:

I could try, if you arrange for me to display that page on my computer so I can see the code, and loaded css files. :wink:


wow i just ran into another problem

tried creating an account and i never received the email from the website to confirm it :expressionless:

edit: ok i turned off email confirmed stuff (although i would like it on :/)

you can login and try here:


click Downloads on the left menu

you’re going to need to submit a file (doesn’t matter what it is, just make sure its small so it goes faster for you)

then once its uploaded it will take you to the screen in question.

thanks =]

it appears as though i made more of it black (without even realizing), and it looks decent.

i just need to get the rest of the white to go away so it looks perfect. =]

Then it sounds like you are on the right track … the cascading part of CSS makes it less than obvious sometimes what to change! :wink:

Good Luck with it!


yeah but i honestly don’t have the slightest clue to what changed it, so i don’t even know which file to look in to finish it off. :frowning:

He he … well, that’s good argument for changing one thing at a time, and keeping good notes!There are few things more frustrating than “twiddling” a bunch of stuff, and not knowing when you are done which “twiddle” changed what appearance. :wink:


Sorry, I somehow “missed” this post … I would have logged in and looked around, but you included no credentials …(best to have sent them via PM) :wink:


i posted the credentials earlier, but when you replied you seemed like you didnt feel like it anymore, so i edited them out :stuck_out_tongue:

i’ll pm them to you.

Actually, I just “missed” the post with the credentials - I have received your PM and will now go take a look! :wink:


I finally got a chance to look at the page you were unhappy with, and here is the fix to get rid of the “white” space around the upload details form:

In the file “tabpane.css”, find the section:

[code].dynamic-tab-pane-control .tab-page {

border: 1px solid rgb( 145, 155, 156 );
[color=#0000CC]background: rgb( 252, 252, 254 );[/color]
z-index: 2;
position: relative;
top: -2px;
font: 11px Tahoma, Helvetica, sans-serif;
color: #333;

/244, 243, 238/
/* 145, 155, 156*/
padding: 5px;
width: 97%; /* stupid stupid stupid IE!!! */
float: left;
}[/code]and change the [color=#0000CC]line in blue[/color], above, to:background-color: #000000; or background: rgb( 0, 0, 0 );There ya go! Those “tabs” are a bit confusing, but if you play with them with FireBug or WebDeveloper plugin you can figure out how they work. Tweaking CSS just takes practice and exploration; understanding the whole cascading thing doesn’t hurt either. :wink:

To twiddle with the CSS for the WYSIWYS editor, you want to change the CSS in the editor_ui.css file, and if you change anything there, it will be reflected all over the site. Frankly, as that space is for entering text, I’d leave it alone (I don’t really think it looks bad at all, as it is “balanced”, unlike the tabbed “Enter file details” form.