Page 1 of 2
PhocaGallery Pagination Navigation Layout orientation
Posted: 27 May 2011, 04:05
by 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?
Re: PhocaGallery Pagination Navigation Layout orientation
Posted: 27 May 2011, 17:49
by Jan
Hi, the pagination should be stylized by the template so check some template which has the design you need.
Re: PhocaGallery Pagination Navigation Layout orientation
Posted: 27 May 2011, 18:46
by 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.
Re: PhocaGallery Pagination Navigation Layout orientation
Posted: 28 May 2011, 06:03
by 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">
«
<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.
Re: PhocaGallery Pagination Navigation Layout orientation
Posted: 31 May 2011, 15:55
by 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.
Re: PhocaGallery Pagination Navigation Layout orientation
Posted: 31 May 2011, 16:04
by DevByStarlight
Thanks bluestone!
I'll give that a go and see what happens :)
Re: PhocaGallery Pagination Navigation Layout orientation
Posted: 01 Jun 2011, 07:59
by 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;
}
Re: PhocaGallery Pagination Navigation Layout orientation
Posted: 01 Jun 2011, 12:11
by Jan
Hi, great to hear it, thank you for the guide.
Jan
Re: PhocaGallery Pagination Navigation Layout orientation
Posted: 08 Jun 2011, 13:47
by 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
Re: PhocaGallery Pagination Navigation Layout orientation
Posted: 08 Jun 2011, 20:54
by 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