Help with Alvina!
Replies
I've recently decided to start working on my pet profiles again, partly in thanks to Helix and their lovely customizable templates.
Only... I'm stuck on Alvina. See... I cannot get her background to stop repeating, no matter what I do.
I'm also trying to figure out how to make the 'spoiler' text (e.g, 'Answer Yes..' 'Answer No...') isolated. I'm not sure how explain. I want the first initial yes/no to be the only visible options, which then takes you to the next set of text/questions...
Perhaps that's a little ambitious? I swear I've seen pet profiles that did something similar.
Any and all help is greatly appreciated!
To prevent repeating of a background image use property below.
background-repeat: no-repeat;
Although this will stop repeating of the image but then you have a part not covered by your background. So I suggest adding a property called "background-attachment" and have it set to a value of "fixed". So this will cause the background not move when you scroll, I think it's nice but that'd be your choice in the end.
background-attachment: fixed;
=======================================================================
For the second thing I think I know what you mean but suspect that I may be misunderstanding what you mean though. So I put some code into one of my pets, do keep in mind it's bare minimum styling just to demonstrate. The appearance can be change a lot so no need to worry about that.
https://subeta.net/petinfo.php?petid=5856443
So the blue text is clickable and will sort of act like an answer being given. I left them so they can be clicked again to deselect/un-respond to an answer so not annoying to explore. Anyway when an answer is chosen, any non-selected ones will disappear, and response also appears and more choices can also appear. It can act differently than I have it currently like also hiding the selected answer.
If I was right about the second part please let me know. If this is not what you meant or not acceptable could you please try again to explain what you mean and I look into it. Or if I am right or this is acceptable I can give code and explanation into what I put together.
Kept things brief so if you need or want further explanation/details feel free to ask. Hope this is helpful so far.
Sorry for the delay in response, I had an earlier shift than usual at work yesterday and felt too wiped out to go online last night. Thank you SO MUCH! I had tried the no-repeat at one point before making this thread and was going crazy with the amount of empty space towards the bottom.
And yes! For the second part, that's pretty much exactly what I meant! :D It was just late at night and my brain had fizzled.
Okay, Well I'll provide the basic code for this set up. If you need help with the styling let me know. I left my example text in so please replace with the contents you want to have. Anyways the code is below:
<style>
input,
input[id=No1]:checked ~ label[for=Yes1], input[id=Yes1]:checked ~ label[for=No1],
input[id=No2]:checked ~ label[for=Yes2], input[id=Yes2]:checked ~ label[for=No2],
.answer, label[for=Yes2], label[for=No2] {
display: none;
}
input[id=Yes1]:checked ~ .answer.first.yes, input[id=No1]:checked ~ .answer.first.no, input[id=Yes1]:checked ~ .furtherResponse, input[id=Yes2]:checked ~ .answer.second.yes, input[id=No2]:checked ~ .answer.second.no { display: initial; } </style>
NOTES:
So this works using inputs, then styling based on that. The inputs themselves are invisible but can interaction happens through the labels. This is achieved by two attributes using "id" on the input and "for" on the label when both are the same value they're linked. The inputs have been changed to radio types this makes it so answers can't be unselected once selected unlike the ones I have on my pet to demonstrate. Obviously the labels are the answers and the divs are responses to the answers. The easiest way to know what is what is the attribute "for" for the labels and "class" for the divs, the values set are quite readable (or at least in my opinion) For CSS blocks the first one makes the element hidden, the selectors that are most special out of the group are the ones that look like "input[id=No1]:checked ~ label[for=Yes1]" this makes it so the answer not selected become hidden. The second/other CSS block makes things visible depending on what answers were replied to. Also just to mention the way I set up the class attributes allow quite a bit of flexibility with styling like the answers of no can be selected easily, or can select a particular one as well.
Additional note a selector below selects all answers and does some basic styling to it, also a slight change when hovered over
<style>
.response div {
color: ;
font-weight: bold;
background-color: antiquewhite;
border-radius: 25px;
padding: 12px;
text-align: center;
margin-bottom: 14px;
}
.response div:hover { color: lightsteelblue; } </style>
Kept it brief again so if you need more details, if anything is confusing, or if you need anymore help just let me know. Hope this is helpful.
It's absolutely perfect! Thanks again!
Great, if you need additional help in the future don't hesitate to ping, smail or comment me.
for the background, i would actually recommend using cover sizing. this will make it so that the background automatically resizes with the viewer's window, so the entire image is more visible to everyone (otherwise someone like me on a laptop can't even see alvina in her little window!). the code for that would look like this:
background-image: url(INSERT URL HERE);
background-size: cover;
background-position: right center;
background-attachment: fixed;
i used right-center positioning because that's where the most important part of your background image is, which means that area of the image will essentially stay static while the other edges get "trimmed" to adjust to whatever aspect ratio someone's browser window might be in.
