How to change font?

Just to add to my previous message, I mean how to change the font-family, and change the size of font in paragraph layer, not the heading layer. Thanks

Hi. The styling of the layers can be done with custom CSS. If you want to target all the paragraph layers, you can use the p.as-layer selector, but if you want to target specific layers, you need to give those layers a custom class, like my-layer and then use that in you code. For example:

.my-layer {
     font-family: "OpenSans", Verdana;
}

Best,
David

That’s great, thanks for the css. Also…

1)What about using a non-standard font such as https://fonts.google.com/specimen/Special+Elite

2)How do we change the font size? And how do we apply those changes across different viewport sizes for responsive design?

First, you would need to import the font and for this you can use a plugin that provides Google fonts or maybe your theme has an option for this.

Then you need to reference the font in the custom CSS. The accordion’s UI offers only basic settings for layers. In order to customize their style, you need to use custom CSS. You can apply other font styling or media queries for targeting different screen sizes, but in your custom CSS. This requires some CSS knowledge.

Best,
David

Thanks, I can do some rudimentary CSS, basic stuff but I was finally able to apply the Media Queries and get the font size and styling I needed, so that is great. The problem I have now is alignment. You don’t have any center alignment settings. I want to have all my text layers set in the middle. It’s ok for desktop but when I go to laptop tablet and mobile the alignment is all over the place. I really like this plugin but its very difficult to make simple adjustments like center aligning text. And for mobile, what is the starting point, is there a default setting? Do I have to create breakpoint settings for all the different phone viewport sizes. I don’t know where to start with Mobile. Here is what I see in the preview, my panels are all bunched up together and the open panel, opens only 25% and you don’t see any text https://postimg.cc/XZ4hpYVV . Hope you can help, thanks and best regards.

• This reply was modified 1 year, 1 month ago by planetboris.

[UPDATE] just to let you know since my last message I managed to solve the center alignment issue and it seems to be working well across different viewports. I just entered “center’ in the Horizontal field in the appearance settings. And also I was able to finally figure out the layout in mobile and is working as I had envisioned. I had to keep “Responsive” checked while switching “Responsive Mode” to custom, and I set height to 88vh, which seems to fill the page…..I will keep you posted, I’m trying to implement the shortcodes into a template to use in a tabs format. Cheers

Hi. Glad you’ve worked it out!

Best,
David

Hi David, I’m having an issue with the shortcodes working together. As I mentioned I’m trying to use the shortcodes in a tabs element. So my goal is to display the first shortcode, and then click on the tab button that will then display the second shortcode. (All of this is for mobile view) I have also tried many other methods such as accordions, content switcher, and templates. I have tried using the same shortcode, and alternating the 1st and 2nd shortcodes in their respective placements within the tabs and accordions. (also tried them in shortcode widgets between 2 html widgets for a content switcher) You can see in the attached screenshots, the first tab, or accordion, looks fine as intended, no problem. But the 2nd shortcode does not display. The text will display, as you can see in the attached images: https://postimg.cc/gallery/nBNJ2rR Its really strange. I have cleared cache on all levels multiple times, restarted browser and computer. Still have the issue. The 2 shortcodes for your Accordion Sliders that I’m using are duplicates, so the only difference is the images and the text. All settings are the same. The attached images are from my last attempt to resolve the issue using a content switcher. But the results are exactly the same when trying within the tabs and accordion widgets. And I have tried several tab and accordion widgets, same result with all of them. In this image you can see another screenshot of the 2nd shortcode, that from the previous image, you could see only the text https://postimg.cc/QKQFtdv7 In that screenshot: you can see all the images because I placed it within the first tab. So it’s the second tab, or accordion position, etc., that is not rendering the shortcode Any ideas? (also just to mention, for the second tab position, which doesn’t render the images, the panels are still functioning, the panels will move depending on clicking or mouse wheel action, and the different panel texts will appear with all the animations working. Just the images are not rendering)

• This reply was modified 1 year, 1 month ago by planetboris.
• This reply was modified 1 year, 1 month ago by planetboris.
• This reply was modified 1 year, 1 month ago by planetboris.

Hi. The problem is that in the second tab the accordion can’t set its size correctly since it’s inside a hidden container which has no size. In other words, the accordion is responsive, its size adjust to the parent container’s size, but if the parent container has no size, this will affect the inner accordion. The solution would be to programatically resize the accordion when the tab is changed. This can be done by either detecting the tab change or the tab click and then calling jQuery('.accordion-slider').accordionSlider("resize").

Best,
David

Thanks for the quick reply. How do I implement the JQuery?

This is the JS code I have tried but it isn’t working: https://postimg.cc/BLQmdKmM

The CSS selector for the tabs is missing a “.” (dot). It should be .e-n-tabs .e-n-tabs-heading assuming the class names are correct.

Best,
David

Yes, I noticed that, I didn’t send you an updated screenshot. I added the dot but still no change. I’ve tried dozens of class names/combinations. That I can do myself, getting right class name, but I don’t know JS at all, just what I pick up from ChatGPT and GIthub, Stackoverflow etc. So the JS looks good? Maybe I should be adding wp_enqueue_scripts because I’m using Elementor. Do I have all the correct number and proper placement of curly brackets, round brackets? https://postimg.cc/9zshXvJ2

• This reply was modified 1 year, 1 month ago by planetboris.
• This reply was modified 1 year, 1 month ago by planetboris.
• This reply was modified 1 year, 1 month ago by planetboris.

[UPDATE]: It works! Finally, here is the successful code: https://postimg.cc/w3thsGYF It looks great, thanks to your great plugin. Also I forgot to ask, how do I adjust the shadow effect?

Glad you’ve worked it out! The final version of the code is similar to the previous one, the difference being that in the second version the click handler works for elements/classes (in this case, the e-n-tabs-heading element) that are added at a later time, while in the first version the selected element must be present in the page when the click listener is added.

For the shadow the accordion uses this CSS which you can adjust if you want:

.accordion-slider .as-panel.as-shadow {
    box-shadow: -5px 0 40px 1px #000;
}

Best,
David