- Change all icons at once
- Specific component
- Specific module
- Specific view
- Find your class name
- Why so much code?
DOCman comes with a couple of different icon sizes used on the frontend. When you want a size other than the default you can use CSS to make the change.
We expect you to have a good understanding of CSS for this article.
Change all icons at once
Add the following snippet to your custom CSS file to change the icons to 32x32 pixels for both the DOCman component and modules and the FILEman component:
The following snippet will only change the icons within the DOCman component:
The following snippet will only change the icons within the DOCman module:
The following snippet will only change all the icons within the DOCman filtered table view:
Find your class name
So how can you find out what CSS class you need? In the above examples you can see we only changed the middle part. Respectively, we added:
You can find these class names by using the web inspector for your browser.
By inspecting the page elements you can see that we are adding a
<div class="koowa"> with either an extra
mod_docman class. The child of this container will contain the name of the view.
For example, on the default hierarchical view the class name of that inner
<div> would be:
docman_list_layout--default. And would would look like this:
- The whole extension:
- All table layouts:
- Filtered table view:
- Only headers in Lists:
The rest of the CSS will always be the same. Only the new rules you make will affect any change.
body .koowa.koowatargets all elements with the
koowaclass within the
bodyelement. This will make sure only icons in our views get targeted. The reason we added
koowatwice is to make sure we get a higher specification without the need to use
!importanteven if the custom CSS file gets loaded first.
[specific classes]is the one you need. Leaving this out will change all icons for all our extensions on all views.
.koowa_header__imagelooks for elements that have the
koowa_header__imageclass making sure that custom images get scaled as well.
[class^="k-icon-"]looks for elements that start with the
[class*=" k-icon-"]looks for elements that contains the
k-icon-class starting with a space.
- Both classes with
:beforeare needed because the actual icon is placed in this pseudo selector.
Why so much code?
The code is so explicit to make sure our extensions look great in any Joomla template. Using a “better safe then sorry” approach means you need to override all classes.
Let our developers personally assist you. You can ask development related questions in our Support Center. Only for Business or Agency subscribers.