Change List Navigation Text

Change List Navigation Text

  

Hello,


I noticed that I can change the css of the default ListNavigation under RichWidgets. But how do I change the previous and next text? I don't have the option of cloning it and referencing it.

There is not a way to do this at this moment, what I would do is the following:

- Open the richwidgets espace (right click open espace)

- It will clone the espace since you can't edit it.

- In the cloned espace search for the List_navigation webblock.

- Copy paste that webblock into your own espace.

- Edit the webblock for your needs.

- Use your own created webblock ;)


Greetings,


Niels

Hi Amos,

You could also achieve this simply using CSS. Here's an example that changes the navigation text to "Forward" and "Back":

.ListNavigation_Next, .ListNavigation_DisabledNext {
    visibility: hidden;
}

.ListNavigation_Previous, .ListNavigation_DisabledPrevious {
    visibility: hidden;
}

.ListNavigation_Next:after, .ListNavigation_DisabledNext:after {
    visibility: visible;
    content: 'Forward';
}

.ListNavigation_Previous:after, .ListNavigation_DisabledPrevious:after {
    visibility: visible;
    content: 'Back';
}

Aurelio Junior wrote:

Hi Amos,

You could also achieve this simply using CSS. Here's an example that changes the navigation text to "Forward" and "Back":

.ListNavigation_Next, .ListNavigation_DisabledNext {
    visibility: hidden;
}

.ListNavigation_Previous, .ListNavigation_DisabledPrevious {
    visibility: hidden;
}

.ListNavigation_Next:after, .ListNavigation_DisabledNext:after {
    visibility: visible;
    content: 'Forward';
}

.ListNavigation_Previous:after, .ListNavigation_DisabledPrevious:after {
    visibility: visible;
    content: 'Back';
}


Hi! Thanks for your answer, how do I remove the spaces from visibility hidden though? It looks a little strange.

Niels Favreau wrote:

There is not a way to do this at this moment, what I would do is the following:

- Open the richwidgets espace (right click open espace)

- It will clone the espace since you can't edit it.

- In the cloned espace search for the List_navigation webblock.

- Copy paste that webblock into your own espace.

- Edit the webblock for your needs.

- Use your own created webblock ;)


Greetings,


Niels

Hello! Thanks for your answer! I tried it but it doesn't seem to work. I think the clone has to be published in order for me to use it?


Amos Jian wrote:

Aurelio Junior wrote:

Hi Amos,

You could also achieve this simply using CSS. Here's an example that changes the navigation text to "Forward" and "Back":

.ListNavigation_Next, .ListNavigation_DisabledNext {
    visibility: hidden;
}

.ListNavigation_Previous, .ListNavigation_DisabledPrevious {
    visibility: hidden;
}

.ListNavigation_Next:after, .ListNavigation_DisabledNext:after {
    visibility: visible;
    content: 'Forward';
}

.ListNavigation_Previous:after, .ListNavigation_DisabledPrevious:after {
    visibility: visible;
    content: 'Back';
}


Hi! Thanks for your answer, how do I remove the spaces from visibility hidden though? It looks a little strange.

Hi Amos,

What spaces exactly are you talking about? Can you post a screenshot or an OML?

Aurelio Junior wrote:

Amos Jian wrote:

Aurelio Junior wrote:

Hi Amos,

You could also achieve this simply using CSS. Here's an example that changes the navigation text to "Forward" and "Back":

.ListNavigation_Next, .ListNavigation_DisabledNext {
    visibility: hidden;
}

.ListNavigation_Previous, .ListNavigation_DisabledPrevious {
    visibility: hidden;
}

.ListNavigation_Next:after, .ListNavigation_DisabledNext:after {
    visibility: visible;
    content: 'Forward';
}

.ListNavigation_Previous:after, .ListNavigation_DisabledPrevious:after {
    visibility: visible;
    content: 'Back';
}


Hi! Thanks for your answer, how do I remove the spaces from visibility hidden though? It looks a little strange.

Hi Amos,

What spaces exactly are you talking about? Can you post a screenshot or an OML?

Hi,

Because we are using visibility hidden, the previous text still takes up a space. Would it be possible to remove that space as well? 


Amos Jian wrote:

Aurelio Junior wrote:

Amos Jian wrote:

Aurelio Junior wrote:

Hi Amos,

You could also achieve this simply using CSS. Here's an example that changes the navigation text to "Forward" and "Back":

.ListNavigation_Next, .ListNavigation_DisabledNext {
    visibility: hidden;
}

.ListNavigation_Previous, .ListNavigation_DisabledPrevious {
    visibility: hidden;
}

.ListNavigation_Next:after, .ListNavigation_DisabledNext:after {
    visibility: visible;
    content: 'Forward';
}

.ListNavigation_Previous:after, .ListNavigation_DisabledPrevious:after {
    visibility: visible;
    content: 'Back';
}


Hi! Thanks for your answer, how do I remove the spaces from visibility hidden though? It looks a little strange.

Hi Amos,

What spaces exactly are you talking about? Can you post a screenshot or an OML?

Hi,

Because we are using visibility hidden, the previous text still takes up a space. Would it be possible to remove that space as well? 


Oh, I see. You can try setting a negative margin for the ":after" CSS classes, to force the visible and hidden elements to overlap.