layout (4) Four rows horizontal sub-categorie

Phoca Download - download manager
User avatar
DannyBranderhorst
Phoca Newbie
Phoca Newbie
Posts: 5
Joined: 04 Jul 2021, 19:08

layout (4) Four rows horizontal sub-categorie

Post by DannyBranderhorst » 22 Jul 2021, 19:09

Dear co-users,

I myself have been searching and trying for quite some time how to get not a single vertical row of sub-categories, but rather distributed across the screen in 4 or 5 rows horizontal and vertical.

All information is welcome.

Below an example of how I would like to have this:
https://imgur.com/a/Dm9ZJiG

Version: Phoca Download (latest one)

User avatar
DannyBranderhorst
Phoca Newbie
Phoca Newbie
Posts: 5
Joined: 04 Jul 2021, 19:08

Re: layout (4) Four rows horizontal sub-categorie

Post by DannyBranderhorst » 23 Jul 2021, 13:26

Anyone, tips and tricks how I can do this?

christine
Phoca Hero
Phoca Hero
Posts: 2215
Joined: 28 Nov 2010, 17:20

Re: layout (4) Four rows horizontal sub-categorie

Post by christine » 23 Jul 2021, 13:58

Hi,

Example from demo: https://www.phoca.cz/joomla3demo/phoca-download-demo

Code: Select all

#phoca-dl-categories-box div.pd-categoriesbox {
    width: 28%;
    position: relative;
    float: left;
    margin: 1%;
    padding: 1%;
}
e.g. width etc. If you for instance, delete temporary the: float: left, than it becomes vertical.

Maybe we could say more, if we can see it live. (which template?)

Kind regards
Christine

User avatar
DannyBranderhorst
Phoca Newbie
Phoca Newbie
Posts: 5
Joined: 04 Jul 2021, 19:08

Re: layout (4) Four rows horizontal sub-categorie

Post by DannyBranderhorst » 23 Jul 2021, 14:33

Hello Christine,

Many thanks for the quick reply. I will test something with your comments. After that sharing this what my results are, personally I don't have a lot experience so all the information are really welcome. We keep in touch... Greetingz Danny.

User avatar
DannyBranderhorst
Phoca Newbie
Phoca Newbie
Posts: 5
Joined: 04 Jul 2021, 19:08

Re: layout (4) Four rows horizontal sub-categorie

Post by DannyBranderhorst » 24 Jul 2021, 12:40

Dear super programmers of the world,

I would especially like to thank Christine (and of course Jan) for her tip. I managed to get not one long vertical row of subfolders underneath each other but a number of them next to each other. This tip of yours Christine was the right one, will also added pictures and link to see what I have adjusted.

\...\media\com_phocadownload\css\main\phocadownload.css

Code: Select all

#phoca-dl-categories-box .pd-subcategory, #phoca-dl-category-box .pd-subcategory {
    padding-left: 57px;
    height: 15px;
    background: #e3171700 url(../../images/folder-oxygen-yellow4949.png) 2px no-repeat;
    width: 172px;
    position: initial;
    float: left;
    margin: 3px 28px 10px 28px;
    padding: 13px;
    text-align-last: end;
    border-radius: 8px;
    border: 1px solid #656565;
}
And a question, if there is an update of Phoca Download, will this also overwrite the PhocaDownload.css. Then I think I should do something with a custom file?

The Template I personally made with Artisteer, because I am not a script developer. I try to do my best with help of the Internet and software tools to get thinks don.

(next step solving) Want to adjust something that is not working properly yet:
  • 1. Counter subfolders, indicates "0" while there are multiple subfolders here. The number of files is correct.
  • 2. Added/Change Back button or Category button and position.
  • 3. Take care on the file view downloads, looks terrible.
Direct link:
https://www.db-communications.nl/index. ... -downloads

Direct link snapshot folders view:
https://imgur.com/6E0KCXl

Direct link snapshot download files view:
https://imgur.com/82PmNQC

So thank you again and maybe there are some more steps that someone could give tips on.
  • 1. Counter subfolders, indicates "0" while there are multiple subfolders here. The number of files is correct.
  • 2. Added/Change Back button or Category button and position.
  • 3. Take care on the file view downloads, looks terrible.
I made the template with the program Artisteer, which helps me a lot and with the help of the internet and forums. And I like it a lot, but the more I learn about it, the more difficult it becomes, hi.

christine
Phoca Hero
Phoca Hero
Posts: 2215
Joined: 28 Nov 2010, 17:20

Re: layout (4) Four rows horizontal sub-categorie

Post by christine » 24 Jul 2021, 13:45

Hi,
Thank you for your feedback and infos. I'm not a programmer - just try to give some hints as supporter :-)
DannyBranderhorst wrote:
24 Jul 2021, 12:40

And a question, if there is an update of Phoca Download, will this also overwrite the PhocaDownload.css. Then I think I should do something with a custom file?
Yes: Create a custom.css
The Template I personally made with Artisteer, because I am not a script developer. I try to do my best with help of the Internet and software tools to get thinks don.
Artisteer is not so easy to understand, but if you are happy with it, then it's OK. In principle we can't solve template problems made done with a special generator. There are so many things to check, e.g. which bootstrap is used etc.
(next step solving) Want to adjust something that is not working properly yet:
  • 1. Counter subfolders, indicates "0" while there are multiple subfolders here. The number of files is correct.
if you don't want to see it:

Code: Select all

.pd-subcategory small {
display: none;
} 
or with a Template Override, ca.:

Code: Select all

            if (!empty($this->subcategories)) {
                foreach ($this->subcategories as $valueSubCat) {

                    echo '<div class="pd-subcategory">';
                    echo '<a href="'. JRoute::_(PhocaDownloadRoute::getCategoryRoute($valueSubCat->id, $valueSubCat->alias))
                         .'">'. $valueSubCat->title.'</a>';
                    echo ' <small>('.$valueSubCat->numdoc.')</small></div>' . "\n";
                    $subcategory = 1;
                }

                echo '<div class="pd-hr-cb"></div>';
            }
$subcategory = 0;
I didn't check it further.
  • 2. Added/Change Back button or Category button and position.
Don't understand what you mean. There is:

Code: Select all

<div class="pdtop"><a title="Categories" href="/index.php/new-downloads"><img src="/media/com_phocadownload/images/up.png" alt="Up"></a></div>
an image.
  • 3. Take care on the file view downloads, looks terrible.
Only ideas now: either, or:

Code: Select all

.pd-subcategoriesbox {
  display: flex;
}

Code: Select all

.pd-subcategoriesbox {
  display: inline-flex;
 width:50%; 
}
Kind regards
Christine

User avatar
DannyBranderhorst
Phoca Newbie
Phoca Newbie
Posts: 5
Joined: 04 Jul 2021, 19:08

Re: layout (4) Four rows horizontal sub-categorie

Post by DannyBranderhorst » 24 Jul 2021, 14:39

Thanks for your great Support. I love people who understand the feelings of being a person with both legs on the ground. Don't understand me on the wrong way. I will see if I can update thinks with your input. Also I let it know by sending a reply including the information.

Two small questions,
1. Template override, I hear a lot about it. But I need to go to templates, choose the live one. And just select one of the components, modules our plugins right?
2. Back button, I mean by that the green small icon default right above corner of phoca downloads.
3. Oeps another one, hi. How to preview pdf, jpg before people will pressed the download button?
4. Custom css, just copy paste the data form the default to the custom? Or do I need to changes something else in the general option of the component.

Take your time, and just feel free to give an reaction when you want to. Personally I have 3 weeks holiday so therefor special in the evening spent my time on this. Nice to do and give me extra focus and works relaxing.

By and again many thanks for your support.

christine
Phoca Hero
Phoca Hero
Posts: 2215
Joined: 28 Nov 2010, 17:20

Re: layout (4) Four rows horizontal sub-categorie

Post by christine » 24 Jul 2021, 15:21

Hi,
DannyBranderhorst wrote:
24 Jul 2021, 14:39
Two small questions,
1. Template override, I hear a lot about it. But I need to go to templates, choose the live one. And just select one of the components, modules our plugins right?
generell exmplation about overrides: https://docs.joomla.org/How_to_override ... omla!_core
2. Back button, I mean by that the green small icon default right above corner of phoca downloads.
how do you want to show it?
3. Oeps another one, hi. How to preview pdf, jpg before people will pressed the download button?
See under Options: https://www.phoca.cz/documents/17-phoca ... parameters
Display File View etc.
4. Custom css, just copy paste the data form the default to the custom? Or do I need to changes something else in the general option of the component.
You could use this one: https://www.db-communications.nl/media/ ... efault.css
Or in the meantime: add (new/amended) CSS codes at the end of your template.css

Kind regards
Christine

Post Reply