I'm trying to find info about this, but either it's not anywhere or I'm missing it.

I want to update my user profile. I've already got the graphics down (what I want the profile to look like is below). What I'm trying to figure out is how can I get a section of the user profile to appear in its appropriate spot when its clicked on, like my avatar under "avatar"? Also, if I wanted to make the words on the rainbow highlighted when the mouse hovers over them, what would be the best approach?

Image

- Maybe you can help me?

I'm a bit busy today so can't do a detailed response at the moment. But, you want to look into the :target attribute. I wrote a brief explanation of it here (about halfway into the post I mention :target). Basically, :target allows you to style what an element looks like when someone clicks the link to it.

I'll be on later, if you have questions, since I know this was pretty brief. Good luck~

@ Skylar Is this the effect you're looking for: live preview

Please excuse the unrefined styling. At this stage I'm mainly playing around with the effects rather than the actual positioning of different elements. [edit] - MAJOR EDIT

There are three effects that can be achieved with your desired layout. Each comes with potential drawback(s): 1 - Reveal content on click Can be achieved with :target selector, as suggested, but will push down other sections down the list, so e.g. when you click on Avatar all other sections will 'jump' out of the rainbow, so to speak.

2 - Reveal content on hover Can be achieved by using :hover selector, as seen on my temp. profile, but will also push down other sections on reveal of hidden content. Another drawback is that for long sections where you have to scroll, unless you scroll back to the top you won't be able to see the 'button' for that respective section on the rainbow. Rather, you'd see a cutoff part of the content where you were scrolling to previously (please scroll to the bottom of my Pets section and unhover it to see what I mean).

3 - Reveal content on hover without pushing down other sections Can be achieved by using :hover selector, the content on reveal will stay on top of other buttons, while the buttons remain in their designated place on the rainbow. The buttons will be visible again when the mouse is moved away from the hovered content.

If you really really dislike hover effect then this can be a major drawback. Also Wishlist MUST stay at the bottom of the list if you don't want to disrupt the other buttons.

4 - Using spoiler I can't (and don't think we can - but please correct me here if I'm wrong) embed certain sections inside the spoiler tag e.g. Wishlist. Other sections can be modified by creating links and usermade buttons instead of using Subeta's default sections.

Note: Please note that you can change the height of the content to be revealed in all of the above suggested effects. For the preview on my profile I'm too lazy to change the height of each hover div, so they look kind of, well, unsophisticated :P

If you can be more specific as to what effect you're aiming for I think the help would also be more detailed ^^ I'll offer help where I can, though I must admit that I'm not a professional so I might lack skills in some respects. And could you please clarify what you meant by 'highlighting' your username? You want it to glow? Have background colour? Or just change its colour on hover?

I've returned from my nap and I think I'm nocturnal now lol. But uh, I can give proper help now if you have any questions c:

To Maskros- Could you please clarify what you mean by pushing down other sections, for the "reveal on click" thing?

You can probably use positioning to prevent this, I just need to understand what you're referring to first.

Sorry it was confusing :P If I understand the OP right she wants each content to appear under its respective heading, so I imagine something similar to what you achieved with your own profile. By saying 'pushing things down' I mean when opening a section, for example, the column will expand vertically and her other buttons/ links will jump out of the rainbow, just like when you open a spoiler, other spoilers below it would move further down to accommodate the expanded text. I don't know if this makes sense.

Another way to keep the links in place is using anchor tabs, I guess, but I didn't think about it at first because I'm not sure if the content would literally appear 'under' the headings when someone clicks on them, without disrupting the positions of the other buttons on the rainbow. Or rather I don't know how to do it just yet. If there's a way to achieve it I'd love to learn too :)

- I was thinking of having the sections appear when a word is clicked on, not when the word is hovered over. Though, I might use a hover for the comment box. And yeah, I wanted the words to stay in place the whole time.

For highlighting words, I was referring to the words on the rainbow changing color when they're hovered over. I might know how to do that... I'll play around with it.

- I'm not nocturnal. :P So, I'm going to do as much as I can and then I'll ask questions when I can't figure something out. I think examples with pictures would be the best way to show me.

@ skylar Yeah, so I also think that working with the :target selector will get you what you're aiming for. Btw do you want all the sections to align vertically and within the same column with the links/ headings, or are you fine with them appearing to the side (left or right) of the main column containing the links? If it's the former I think working with anchor tabs would be a solution. If you want the section to appear directly below each heading/ link when they are clicked on then I'm not skilled enough to know how to do it, not until I spend some time playing around with things. I think someone more experienced would be able to provide help more quickly ^^

[edit] I meant if you meant the latter (content appearing to either left or right of the column :O I must be really sleepy or air-headed. Sorry :(

- I'm not really sure yet. I pictured all the sections to be aligned vertically and I wanted the headers removed. I'm going to try the targets and anchors and see how well I can do.

Could you maybe draw a picture or diagram of where you want the sections to appear when you click on the words? That's the only part I'm really confused about still, I'm sure I can help if I can understand what it is you are going for.

For highlighting words, here is the thing- The words right now are just part of the image. So, you are going to need a separate image for each of the hover states. I suggest taking the picture of the rainbow and making that its own image, separate from the blue background with the clouds. Then, have different versions of the rainbow image with different words highlighted. Now, you can simply swap out the image on hover (does that kinda make sense?)

- Okay, that's what I thought about the highlighted words. That'll be quick to do!

I was thinking of having the sections appear like the boxes do below. And, I wanted some sections of the rainbow to hold more than one profile section... like "links" having the smail option and a blank section. I'm sorry if I'm confusing. >.< I'm also going to change the wishlist section to the bottom of the rainbow, since I'm thinking of making that just a link to the wishlist page.

Images

Genuine question: Does subeta allow font import? Can we stylise the imported fonts instead of having to make separate images for separate hovers? I've never imported fonts to any profiles on Subeta (either my own user profile or pet profile) so I don't know if it's possible to do so.

Yup, you can. You can see an example of this on both my pet and user profiles. See my pet Looker for example. :)

: Oh thanks. That's really good news XD. Sorry for hijacking your thread :D