168
Views
7
Comments
Change List Navigation Text
Question

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.

2022-07-07 18-45-50
Niels Favreau

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

UserImage.jpg
Amos Jian

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?


2019-09-30 07-35-56
Aurelio Junior

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';
}
UserImage.jpg
Amos Jian

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.

2019-09-30 07-35-56
Aurelio Junior

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?

UserImage.jpg
Amos Jian

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? 


2019-09-30 07-35-56
Aurelio Junior

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.


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.