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
morten444Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Panagiotis Sweb developer - designer Commented:
rashgangCommented:
Hi
In template.css
.joomla15 .pagenav Please create b ackground
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
Become a Microsoft Certified Solutions Expert

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

Panagiotis Sweb developer - designer Commented:
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

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
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?
Panagiotis Sweb developer - designer Commented:
you have to clear first the way pagination is presented in your template and then write the new one
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
Panagiotis Sweb developer - designer Commented:
try this

ul .pagination li{}
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;
}

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
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
Panagiotis Sweb developer - designer Commented:
thanks
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Joomla

From novice to tech pro — start learning today.