Tab Title alignment in accordion

Website-Rookie
40 Posts
Website-Rookie posted this 27 June 2024
Ask a Question

Hello,
I have another question. It has already been answered for someone else in the forum, but it doesn't help me yet because I still don't have the prerequisites.
It's about centering the font in the tab of an accordion. A CSS code for this was provided in an answer, but I don't know how to apply the code correctly.
Can you briefly explain to me how to enter the following code correctly so that it affects the accordion? In my German version there is a field called "CSS-Klasse" (what is a CSS class?) and below it a button "CSS bearbeiten", where a menu for the code opens.
Here is the code provided by support in the other question:

.u-accordion-link span.u-accordion-link-text {
text-align: center!important;
margin-left: auto;
margin-right: auto;
}

I have also added a few screenshots.

PS:
After writing this text, I opened the quick preview and see that "my" CSS code has indeed had an effect, but it's not really centered (screenshot CSS_04). The button on the right to open the accordion can't be that distracting, can it?

Thank you very much.

Hello, I have another question. It has already been answered for someone else in the forum, but it doesn't help me yet because I still don't have the prerequisites. It's about centering the font in the tab of an accordion. A CSS code for this was provided in an answer, but I don't know how to apply the code correctly. Can you briefly explain to me how to enter the following code correctly so that it affects the accordion? In my German version there is a field called "CSS-Klasse" (what is a CSS class?) and below it a button "CSS bearbeiten", where a menu for the code opens. Here is the code provided by support in the other question: .u-accordion-link span.u-accordion-link-text { text-align: center!important; margin-left: auto; margin-right: auto; } I have also added a few screenshots. PS: After writing this text, I opened the quick preview and see that "my" CSS code has indeed had an effect, but it's not really centered (screenshot CSS_04). The button on the right to open the accordion can't be that distracting, can it? Thank you very much.
Vote to pay developers attention to this features or issue.
5 Replies
Order By: Standard | Newest
Support Team
Support Team posted this 28 June 2024

Hi,

The text shifts because of the accordion icon. Please try to use the following code:

.u-accordion-link span.u-accordion-link-text {
    text-align: center!important;
    margin-left: auto;
}

Will it be helpful?
...................................................
Sincerely,
Paul C.
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hi, The text shifts because of the accordion icon. Please try to use the following code: .u-accordion-link span.u-accordion-link-text { text-align: center!important; margin-left: auto; } Will it be helpful? ................................................... Sincerely, Paul C. Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
Website-Rookie
40 Posts
Website-Rookie posted this 29 June 2024

Excellent, thank you very much. It worked perfectly. Sorry for the delay, I only got back to the computer today.

If possible, I would like to ask a few basic questions about the use of CSS, as I would like to understand what I have done and why :-D so that I can perhaps apply the next CSS code without having to bother you...

  1. what does the prompt "enter the class name without "." mean" and what is meant by "CSS classes"?
    Is this to differentiate in the case of my 2nd question - multiple CSS codes on the page in question?
    Do I assign the names individually or is there a list of class names that are used internationally?

  2. if I also need a CSS code for another element on the page, is this entered in the same input window?

  3. is there a separate CSS field for each page of the homepage?

I would be really grateful if you could explain a little more about this.

Best regards from Germany
website-Rookie

Excellent, thank you very much. It worked perfectly. Sorry for the delay, I only got back to the computer today. If possible, I would like to ask a few basic questions about the use of CSS, as I would like to understand what I have done and why :-D so that I can perhaps apply the next CSS code without having to bother you... 1. what does the prompt "enter the class name without "." mean" and what is meant by "CSS classes"? Is this to differentiate in the case of my 2nd question - multiple CSS codes on the page in question? Do I assign the names individually or is there a list of class names that are used internationally? 2. if I also need a CSS code for another element on the page, is this entered in the same input window? 3. is there a separate CSS field for each page of the homepage? I would be really grateful if you could explain a little more about this. Best regards from Germany website-Rookie

Last edited 29 June 2024 by Website-Rookie

Support Team
Support Team posted this 01 July 2024

Hi,

1) This option allows you to apply a custom CSS class for the whole element or block. This works in the following way: you set any CSS class to an element (for example, element1), then open Edit CSS and enter any CSS code to this class.

.element1 {
     width: 50px;
     height: 50px;
}

In your case, you needed to apply a code only to the part of the element. That is why we entered a code with the existing CSS class. To find out the CSS class for an object, view a page with the browser preview, and click F12 to open the browser developer tools.

2) If you apply a CSS code for two or more elements within one page, they will be added to the page settings of the same page.

3) Yes, every page has the page settings with the CSS section. You can also add a CSS code for the whole site under Site Settings ==> CSS.

Let us know if you need our further help!
...................................................
Sincerely,
Paul C.
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hi, 1) This option allows you to apply a custom CSS class for the whole element or block. This works in the following way: you set any CSS class to an element (for example, *element1*), then open *Edit CSS* and enter any CSS code to this class. .element1 { width: 50px; height: 50px; } In your case, you needed to apply a code only to the part of the element. That is why we entered a code with the existing CSS class. To find out the CSS class for an object, view a page with the browser preview, and click F12 to open the browser developer tools. 2) If you apply a CSS code for two or more elements within one page, they will be added to the page settings of the same page. 3) Yes, every page has the page settings with the CSS section. You can also add a CSS code for the whole site under *Site Settings ==> CSS*. Let us know if you need our further help! ................................................... Sincerely, Paul C. Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
Website-Rookie
40 Posts
Website-Rookie posted this 02 July 2024

There is so much to learn... Thank you. Without a doubt, there will be more questions... For now, I am satisfied with the knowledge I have gained.

There is so much to learn... Thank you. Without a doubt, there will be more questions... For now, I am satisfied with the knowledge I have gained.
Support Team
Support Team posted this 03 July 2024

Hi,

Feel free to ask us if you have more questions! We are always ready to help.
...................................................
Sincerely,
Paul C.
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hi, Feel free to ask us if you have more questions! We are always ready to help. ................................................... Sincerely, Paul C. Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
You must log in or register to leave comments