Help Making the background of an accordion transparent? And horisontal accordions.

[Carroline]

Hey!

I'm a little stuck. I want to know if it's possible to make the background inside of an accordion transparent (while still keeping the text non-transparent)? And if so, how?

Also, how do you stack accordions next to each other horizontally? Do ju put a limit on their length and then "nobr" it? I'm a little confused.

Here's some basic example code I've been working with to try and figure this out and what it looks like:

[class=pic] position: relative; background-image: url(https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60); overflow: hidden; [/class] [class=bg] position: relative; margin: 10px; background: red; opacity: 0.75; [/class] [class=op] opacity: 0; [/class]
[div class=pic] [div class=bg] Hello

Test 1

Info

Test 2

Testing

Test 3

Stuff

[/div] [/div]

Spoiler

[nobr]
[class=pic]
position: relative;
background-image: url(https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
overflow: hidden;
[/class]

[class=bg]
position: relative;
margin: 10px;
background: red;
opacity: 0.75;
[/class]

[class=op]
opacity: 0;
[/class]

[/nobr]
[nobr]
[div class=pic]
[div class=bg] Hello
[border=0px solid white]
[accordion]
{slide=[bg=red] [color=black] Test 1  [/color] [/bg]}Info{/slide}
{slide=[bg=red] [color=black] Test 2  [/color] [/bg]}Testing{/slide}
{slide=[bg=red] [color=black] Test 3  [/color] [/bg]}Stuff{/slide}
[/accordion]
[/border]
[/div]
[/div]
[/nobr]

 

[Fable]

You'll have to start with a transparent accordion and go from there: Tutorial - BBCode Assistance Thread

[class=pic] position: relative; background-image: url(https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60); overflow: hidden; [/class] [class=bg] position: relative; margin: 10px; background: rgba(255, 0, 0, 0.75) ; [/class]
[div class=pic] [div class=bg] Hello

Test 1

Info

Test 1

Testing

Test 1

Testing

[/div] [/div]

This just had the transparency div with your red bg choice since you didn't say how you wanted the content to actually present. Having it entirely transparent for the text with a background image would make it hard to read so I assumed and left it as this.

I'm not sure what you mean by stacking. There are a few methods to have accordions line up horizontally, but it depends on what you want. Do you want them with a visible gap? Shared parent wrapper div? I mean you can just use row/column and get this:

[class=pic] position: relative; background-image: url(https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60); overflow: hidden; [/class] [class=bg] position: relative; margin: 10px; background: rgba(255, 0, 0, 0.75) ; [/class]
[div class=pic] [div class=bg] Hello

Test 1

Info

Test 1

Testing

Test 1

Testing

[/div] [/div]

[class=pic] position: relative; background-image: url(https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60); overflow: hidden; [/class] [class=bg] position: relative; margin: 10px; background: rgba(255, 0, 0, 0.75) ; [/class]
[div class=pic] [div class=bg] Hello

Test 1

Info

Test 1

Testing

Test 1

Testing

[/div] [/div]

But that has a gap, but they are aligned horizontally.

 

[Fable]

Carroline Edited, I forgot to remove your opacity in class, lol.

 

[Carroline]

Carroline Edited, I forgot to remove your opacity in class, lol.

Thanks, I'll have a look! It's not for me, so I don't really know what they meant. But, I'll go ask and see if this is it.

I interpreted it as having the background inside the accordions transparent, so that the original photo beneath becomes the only background in those places.

For the horizontal part I think they meant having the accordions as "tabs", ie stacking the sliders next to each other on a horizontal line. Instead of on top of each other. Either like they are now, expanding downwards just narrower. Or by having them as long vertical lines that expand to the right. How would one go about that?

 

[Fable]

Carroline Might be best to send them here to relay exactly what they are looking for. There are varying levels of coding skills needed based on what someone wants and know exactly what they are looking for helps determine if they should code themselves or see if they can request someone to code for them (there are many amazing members who code for others).

The problem again with making any part fully transparent means that the text gets 'eaten' visually by the background image:
[class=pic] position: relative; background-image: url(https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60); overflow: hidden; [/class] [class=bg] position: relative; margin: 10px; [/class]
[div class=pic] [div class=bg] Hello

Test 1

[/bg]

Info

Test 1

[/bg]

Testing

Test 1

[/bg]

Testing

[/div] [/div]

The accordions are still there, they still have the read BG, but on light theme you can't see any text. :\

As far as tabs goes, there are the basic BBCode tabs which are very easy to set up. The fancy tabs are more complex and can get insane depending on what someone wants to do. They are also a bitch to edit, not gonna lie. I have tabs for a lore page and it's a pain to edit any new info in because I have to dig through all the massive amount of content in the post. Not to mention making them mobile friendly is a concern since if done incorrectly it can cause mobile users to just nope out because they can't read anything.

 

[Carroline]

They don't want to change the "outside" of the accordions, with the title. Only the background inside when a slide is opened. In theory you could just change the text colour to make it visible against the "photo"-background. But, I'm no sure how that would work with the themes here. And accessibility is a whole different discussion.

For mobile users it should be fine to just incorporate flex box with max width/minwidth. But, I don't think they care enough to ask a lot of people. It's probably fine the way it is with the same coloured background(just changing the photo and colors). But, I got really curious as too what was the limitations of accordions and changing their properties.

For the second question, it wasn't really about tabs. More about how flexible accordions are in terms of rotating them, mirroring etc. Is it possible to take the accordion above, rotate it 90° and then change the rotation of the text? So that each slider is a long vertical line, with vertical text, and when pressed they expand to the right instead of expanding down?

I've done similar things in HTML and CSS I believe, but it's been a while. I don't really know how flexible the bbccode is. Otherwise it might be easier to just try and write it with HTML/CSS instead? But, I don't know how much of HTML/CSS will work here. Is it possible to write code using almost exclusively HTML/CSS for a function like a collapsable button? Is it fine as long as it's put inside a class or div? Or are there other limitations to using it?

 

[Carroline]

Sorry for all the questions, but I would also love to see if you had an example of more advanced uses of tabs? I'm having a difficult time envisioning the possibilities and would love to get some inspiration.

Also, now that you mentioned dark theme I couldn't help but wonder - is there a way to code for dark/light theme? Like is there a variable/tag for what theme a user i using that we can use to show different code depending on the user's theme?

 

[Fable]

Carroline It'll be a while before I can sit down to reply. I have to make dinner, eat, dishes, etc. There is a thread pinned at the top of this forum, a directory, it links quite a lot of resources. You can also find a basic tab example in the BBCode+ guide.

 

[Carroline]

Fable Oh, don't stress it! I've checked the resources and I'll definitely check them again. Now it's mostly me being frustratingly curious that makes me wonder.

I'll be very grateful if you have the time and energy to answer. But, it definitely does not have to be today or even this week.

 

[Alteras]

Uhhhh, let's see. Using pure BBCode (or rather keeping a bbcode accordion), what Fable showed is the best that can be done.

This is the basic layout of it:

[div=visibility: hidden;][accordion]
{slide=[div=visibility: visible;]Test[/div]}
[div=visibility: visible;]lorem ipsum
lorem ipsum
lorem ipsum

[/div]{/slide}
{slide=[div=visibility: visible;]Test[/div]}
[div=visibility: visible;]lorem ipsum
lorem ipsum
lorem ipsum

[/div]{/slide}
{slide=[div=visibility: visible]Test[/div]}
[div=visibility: visible;]lorem ipsum
lorem ipsum
lorem ipsum

[/div]{/slide}
[/accordion][/div]

Because of how bbcode does the html replacement for accordions, you have to apply divs to the whole thing. You can't have normal titles with non-normal slides.

Since you are more familiar with HTML and CSS, it would be easier to just do it as so. Here's some good guides for how classes and bbscript (our version of js) works on the site:
Tutorial - RpNation - BBCode+ Guide
Tutorial - A Beginner's Guide To Classes
Tutorial - A Guide to Animations using CSS Transitions and BBscript (BBCode+ has since updated to include CSS animations, so this is slightly outdated)

As for putting things side by side. If you want to stick to BBCode, we have a Columns tag that easily accounts for device sizes. Likewise, using classes and such, you can use flexboxes or minWidth= and maxWidth= arguments in your class tag. [class name=NAME minWidth=length maxWidth=length]

 

[Alteras]

As for examples of how complex you can get, allow me to refer you to these two workshops:

Resource -   ¬ FEVERDREAMS ⸥ alt × sugar

[div class=root] Template: fever dreams 10 fever dreams 10 aster & edelweiss 9 endgame 4...

www.rpnation.com

Closed - Star of Arcadia ☆ Workshop (Freebies)

[div class=container][div class=glaze][div class=tabsContainer][div class=tabNames] Title Screen Introduction Requests BBcode List [/div][div class=tabs] 1fa-tv fa-fw 2far fa-user fa-fw 3far fa-comments fa-fw 4fa-code fa-fw [/div][/div][div class=contentContainer] [div class=Title]Star of...

www.rpnation.com

 

[Alteras]

As for figuring out what theme it is... currently there's no way. The only useful thing i've been able to find is just the css color value currentColor which just uses the color of the current text.

 

[Carroline]

Alteras Thank you so much for the information! So inspiring to see what you've done. I'll definitely try to code things in CSS directly instead. So excited to try out animations now as well haha