PhocaGallery Pagination Navigation Layout orientation

[DevByStarlight]

Hi Pholks! (mean "Folks" as in "Guys" "Gals" "Fellows" .. apologies if that's a naughty word in some language )

Using Joomla 1.5.22, PhocaGallery 2.7.8, Firefox 4
Occurs in Categories view ... or anywhere pagination is displayed.

Issue is the pagination "Next 1,2,3,4, Prev" defaults to a vertical layout with bullets.

I've fiddled with the CSS to get the layout horizontal, centered, and without the disc bullets. (Like it is on the Phoca site's gallery demo pages)

For example, here was a previous attempt ...:

Code: Select all

/* Override/Customize: Phoca Gallery Plugin layout*/
#pg-pagination{}
#pg-pagination ul
{
    background: #FF0000;   /* red to help visualize affected areas */
    color: #FF00FF;
    list-style-type: none;
}
#pg-pagination ul li
{
    float: left;
}

I temporarily removed all of my custom CSS from the entire site and the same thing happens.

Suggestions?

[Jan]

Hi, the pagination should be stylized by the template so check some template which has the design you need.

[DevByStarlight]

Hi Jan,

Custom template. Custom CSS.
I removed all CSS and cleared cache - and firebug indicates that element doesn't have any CSS overrides applied. Not even using a "reset CSS" so this seems to be the default.

Yet the gallery displays with the vertical pagination section.

So, say there was no CSS assigned to the page at all.

What CSS definitions would be necessary to have the pagination (ul,li) appear horizontal
("Prev 1 2 3 Next")
rather than vertical:
("Prev
1
2
3
Next")

And, more specifically, should I 1) modify the joomla template's CSS or 2) the phoca CSS (which is linked into the page after the template's CSS settings) or 3) manipulate the style in the page/component/module itself.

[DevByStarlight]

Perhaps the reason for the difference is a difference in how the pagination navigation elements are generaated.

Namely the section "<div class="sectiontablefooter"..." generated by PhocaGallery is an unordered list for the 1,2,3,4 page links.

However, the demo page does not have a UL for the same section of the page
(https://www.phoca.cz/demo/gallery-catego ... a-category).

~~

For example,
* demo 32-picasa-category contains ...

Code: Select all

<[b]div[/b] class="pagination">
&laquo;
<span>Start</span>
<span>Prev</span>
...

* The page generated for me uses a UL ....

Code: Select all

<[b]ul[/b] class="pagination">
<li>Start</li>
...

• * Which of global PhocaGallery options parameters toggles or sets this <ul> versus <div> behaviour?
  * Or maybe it was a change between PG versions? Which version is on the demo site?

~~
Meanwhile ...

The CSS style for the <div> class section on the demo page is simply:

Code: Select all

.pagination {
    border-top: 3px solid #F8F8F8;
    margin: 10px;
    padding: 10px;
    text-align: center;
}

... doesn't really help style the list element created by PG2.7.8.

[Bluestone]

I fixed the same problem with:

Code: Select all

#phocagallery .pagination #pg-pagination  ul {
	margin: 10px auto;
	text-align: center;
}
#pg-pagination  ul li {
	float: left;
}

in CSS-File /Loomla/components/com_phocagallery/assets/phocagallery.css

and got the paging in only one line.

[DevByStarlight]

Thanks bluestone!
I'll give that a go and see what happens :)

[DevByStarlight]

Followup ... Problem Solved (for me at least)

The CSS from bluestone didn't quite solve everything. I fiddled with it until achieved the look I wanted. Namely, "Start Prev 1 2 3 4 5 Next End" in a single horizontal row below the "Display Num" pulldown selection ... with the "Page 1 of 5" appearing one line below the Start/Prev.

Notes:

• I placed the following in a separate CSS file which happens to be included after the phoca gallery's CSS. However, it does not appear to collide with any PhocaGallery CSS definitions (for v2.7.8 at least) but it's something I'll keep an eye on for any future releases.
• Main advantage of a separate CSS, besides fitting in with my own style sheets, is I didn't need to modify ("hack") the PhocaGallery CSS (or PHP) files.
• The "ul.pagination" definition is not technically necessary for my pages given prior CSS definitions. But I left it in to be explicit in case I make changes elsewhere later.
• (side note) In tracing through the PhocaGallery PHP code, I was surprised to discover every occurrence of generated code seems to output <div><span> html for the pagination footer section and not the <ul><li> list format which is appearing in my pages. In other words, I hadn't yet found the code outputting the list elements. But I suppose since I have a solution now I'm not going to worry about it. :)

Here's the CSS I'm using:

Code: Select all

.pagination {
    border-top: 2px solid #F8F8F8;
    margin-top: 8px;
    margin-bottom: 8px;
    padding-top: 8px;
    text-align: center;
    list-style-type: none;
}
ul.pagination {
	float: none;
	display:block;
}
ul.pagination li {
	display:inline;
	padding: 0 4px 0 4px;
}

[Jan]

Hi, great to hear it, thank you for the guide.

Jan

[mediaLinux]

Hi

I tried the CSS but it doesnt work with the latest PG, unfortunately. This is really annoying since it looks ugly and wasting so much space. Will this (i call it a design bug) be fixed soon ? Maybe a setting for the layout ? Tried this also with some of my other Templates, same annoying thing. Please Jan, tell us how to fix this

[Jan]

Hi, did you understand the topic correctly. There is no bug, the pagination is designed by your template not by Phoca Gallery, so this must be done in the template.

Jan