Where there be a way to make the popup on text instead of button? It can get quite cluttered when listing names who need context to!
Silly question if not, but is it possible to change the color of the box? Blue clashes w/ my theme.
The first line of the code is the button, this is for the button:
<p>Whatever text you want here, the ? button will appear after it.<a class="btn btn-sm btn-primary p-0 collapsed" data-toggle="collapse" href="#popup"> ? </a></p>
Hi! I'm very new to Html but I wanted to ask:
If i wanted multiple buttons on one line (but words still between) how would you do that?
For example:
This line of text is for an example [button] However you could keep reading here [button] for more silly words.
The first line of code is the button, the rest is the popup.
Button:
<p> is a paragraph so you would want all the buttons to be inside of a <p></p> to be on the same line. The <p style="text-align: center;"></p> part is just creating a line for the button to be centered on. The <a class="btn...</a> is just the button and you would add it between text where you want a button. The text after the # in href="#popup" is the id will need to be different for each button+popup (the id won't be visible and can be sensitive to certain characters like numbers so it's safest to name it plain text with no spaces or numbers, ex: exampleone, moreinfo, whatever. In this code it was popup).
Popup:
This appears on top of the page, it's not really sensitive to where you place it in the code so you can put all the popups at the end of the code to keep them out of the way. The id of the popup should match the button that opens it, it's on that first line of the popup <div class="collapse" id="popup">
Example of just the buttons, no popup code added so nonfunctional:
<p>This line of text is for an example <a class="btn btn-primary collapsed" data-toggle="collapse" href="#popupone">button<br></a> However you could keep reading here <a class="btn btn-primary collapsed" data-toggle="collapse" href="#popuptwo">button</a> for more silly words.</p>
This line of text is for an example button
However you could keep reading here button for more silly words.
The Bootstrap doc has more info on stylizing buttons, or you may want to switch them to a link that opens a popup by putting a # with the popup id instead of a website link.
This user is not visible to guests.
Hi! Could you try putting the top line of the code:
"<p style="text-align: center;"><a class="btn btn-primary collapsed" data-toggle="collapse" href="#popup">Popup button<br></a></p>"
Right after where it says "Content" and before the </li>.
After that, delete the <p style="text-align: center;"> and the </p> on the ends of the same line. The button should then appear on the same line as the rest of the content. Let me know if it works!
This user is not visible to guests.
love this but when i try to put it in my code it makes the spacing all fucky - do you have any idea whats going on here? :') im a huge beginner sorry aaa
This user is not visible to guests.
Hi! I'm having issues getting the button to be clickable. I'm having the same issue with a link I put on the profile as well. I did try to put z-index;2 into the code, but It's still not working. If you could help me out that would be amazing :D
Here is my code: https://pastebin.com/Sxtifghg
The code you are using is overlaying an image on top of the text boxes which would make buttons in them under the image unclickable. They're using float classes on some images which can sometimes override z-index.
Z-index also goes in style="" instead of class="", which appears to be enough to fix it:
I put z-index in style=, but It doesn't seem to be making any changes at the moment.
Do you know how I could get the same visual effect while not having the image on top of the text, buttons, and links? I'm Frankenstein-ing some F2U templates and I'm newer to coding in general, so I end up doing stuff like this that accidentally bugs the code lol.
Here are the Codes/Templates I'm using: https://toyhou.se/10790673.computer-screen-02 https://toyhou.se/8715742.computer-screen-01 And just the header text and replaced the spinning loading symbol with a wheel https://toyhou.se/10837055.computer-screen-03
(I'm planning on putting all of those as link buttons at the very bottom of the code)
I'm not too sure. You could convert it to a background to be displayed behind all the content, but then you would have to rework the images too if you want visual effects on them. You might also be able to use the class card-transparent to make invisible boxes to put text/link/buttons into then use z-index to position those above the image instead of trying to fix clickable elements individually.
How do you change the size of the button? It's large instead of fitting nicely into my text
<p>Text here <a class="btn btn-sm btn-primary p-0 collapsed" data-toggle="collapse" href="#popup">popup button text</a> more text here</p>
Text here popup button text more text here
This is just the button part of the code, you have to grab the rest of the code for the popup part and should be able to paste that anywhere.
Popup Code's Comments