[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 456
  • Last Modified:

Joomla. Use images instead of numbers on page navigation at the bottom

Hi
on http://new.bogense-heldagsskole.dk/ we have page navigation at the bottom of the front page.
(first, next, last etc)

We want to replace this with first.gif, next.gif etc... Images instead
I am getting into CSS by now but this seems more hardcoded into the php files

I have not been able to find out where i have to enter to edit this. Can anyone help me?
Can someone also be helpful on an example how i get the number "1" replaced with 1.gif ?


Thanks for all your help
0
morten444
Asked:
morten444
  • 7
  • 6
1 Solution
 
Panagiotis Sweb developer - designer Commented:
0
 
rashgangCommented:
Hi
In template.css
.joomla15 .pagenav Please create b ackground
0
 
morten444Author Commented:
Hi
I have tried to follow the first instruction but no joy.
I can see that it affect the view of it so the file is taken and read, but it does not look right

I have saved the "pagination.php" in the root of html folder in my template
then i have created all the icons with the same name as in the link and saved them in

templatename/images/vintage/
images/vintage/
root of html

but no matter what it does not look right. I cant see the icons.
I have saved all icons with same name as in the example and as .png

The secound suggestion to edit in template.css
I am not sure how i can do this by setting background in CSS
If possible, can someone give me an example howto?

Regards
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
Panagiotis Sweb developer - designer Commented:
0
 
morten444Author Commented:
Hi panagiotiss
Thanks for your suggestion
I tried that and end up with the same problem as the person in the tread had.
It takes the pagination.php file ok
but nomatter what I do in CSS it does not add the picture
Its like the css is not called
I know the image is in the right location as i have copied path from other css statemend and put the pictures in the same location.. Have also put the pictures in the root directory of /html just to try, no joy

I have pasted the view sourse of that line and also the css that should affect it below.
Do you mind having a quick look to see why I can not get the image to load.
I also want the text and the star to go away so we are only left with image

Thanks again for all your time

if I do a view sourse that line returns:
<p><ul class="pagination"><li class="Forrige"><strong><a href="/index.php" title="Forrige">Forrige</a></strong></li><li>Næste</li></ul></p>

Why does this CSS not affect the layout?

.pagination li.Prev a {
    width: 32px; height: 32px;
    background: url('../images/logo/back.png');
    text-indent: -9999px;
}
.pagination li.Next a {
    width: 32px; height: 32px;
    background: url('../images/logo/next.png');
    text-indent: -9999px;
}

Open in new window

0
 
Panagiotis Sweb developer - designer Commented:
try to put the
.pagination li.Prev a {
    width: 32px; height: 32px;
    background: url('../images/logo/back.png');
    text-indent: -9999px;
}
.pagination li.Next a {
    width: 32px; height: 32px;
    background: url('../images/logo/next.png');
    text-indent: -9999px;
}

in the template.css at the end of the file
0
 
morten444Author Commented:
Hi
Thanks for your reply.
Yes i had already done that. I  treid also to copy / paste from yours and no joy

I am using Artisteer template
The only class i can see is something called
.joomla15 .pagination

Would that affect the way i write it in to the CSS file?
0
 
Panagiotis Sweb developer - designer Commented:
you have to clear first the way pagination is presented in your template and then write the new one
0
 
morten444Author Commented:
Hi
Sorry for beeing so "green" :)
I still have issues to get the CSS to play together with my "pagination" class

I have removed the following from CSS file:
.joomla15 .pagination
{
    margin: 0;
    padding: 0;
      text-align: center;
}

.joomla15 .pagination span
{
    margin: 0;
    padding: 0;
}

.joomla15 .pagination a
{
      padding: 2px;
}

.joomla16  .pagination
{
    margin: 0;
    padding: 0;
      text-align: center;
}

.joomla16  .pagination ul
{
      list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.joomla16  .pagination li
{
      display: inline;
    padding: 2px 5px;
    text-align: left;
    margin: 0 2px;
}

.joomla16  .pagination li.pagination-start ,
.joomla16  .pagination li.pagination-start  span,
.joomla16  .pagination li.pagination-end,
.joomla16  .pagination li.pagination-end  span
 {
      padding: 0;
}


I HAVE THEN ADDED:

.pagination li.Prev a {
    width: 32px; height: 32px;
    background: url('../images/logo/back.png');
    text-indent: -9999px;
}
.pagination li.Next a {
    width: 32px; height: 32px;
    background: url('../images/logo/next.png');
    text-indent: -9999px;
}
BUT I STILL CAN NOT GET IT TO WORK

I am using Firefox with Firebug. Normally when you hold the mouse over the affected line it should show you what class is applied, but I see none with pagination.
When I removed the old joomla15. pagination classes, the text did move a bit to the right, so something was applied before that is not applied anymore.

Anyone able to maybe use firebug to see what the problem is. Why the Css class is not applied?

Regards
0
 
Panagiotis Sweb developer - designer Commented:
try this

ul .pagination li{}
0
 
Panagiotis Sweb developer - designer Commented:
moreover you have to see this too

.art-post ul > li {
    background-image: url("../images/postbullets.png");
    background-repeat: no-repeat;
    overflow-x: visible;
    overflow-y: hidden;
    padding-left: 17px;
}
0
 
morten444Author Commented:
Hi
I can not follow.
Try this: You mean I should se this class and paste the CSS code from before into that?
I did that but can not get it to work. Once I got the picture (back and forward) on top of the text but it was not linking, only the next above it

Have to see into this too:
That is the standard list. If I remove this class I guess I remove it from the whole page

What I want to achieve is a Previous and Next picture under the "page 1 of 2" in the center.
The one that has a link (next) shoud show that there is a link like it is now
If you are on the first page of course there is no link on "previous"

I start to get a little desperate to move on now as probably stuck on this for over 10hours.
Just cant figure it out

I would be willing to pay 40USD for anyone who can go ind and make the fiew changes needed to get it to work (any solutiion as long as I get a previous and next picture that works.
I can pay via paypal on completion

Regards
0
 
morten444Author Commented:
Hi
Closing this now as no final resolution, but i give you the point for you trying and pointing me in the right direction
Thanks
0
 
Panagiotis Sweb developer - designer Commented:
thanks
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 7
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now