I've seen this on Bortas' new site, and was trying to email him when OP acted up on me, so, I'm coming to the forums instead.
Trying to make my PC listing on the main page jump out when the image is hovered over. Here's what I got that doesn't seem to be working
/* HOVER TRANSITION */
#sidebar .sidebar-party-members.module {overflow:hidden; transition:transform 0.3s ease-out; height:auto; transform:scaleY(1); transform-origin:top; }
#sidebar .sidebar-party-members.module.collapsed {transform:scaleY(0);}
Any help would be greatly appreciated
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
Ive never played with the collapse tag, so I have no real knowledge about how that work. Any CSS trickery you see I only learned from OP - no wizardry here!
Is it the character portrait you are trying to make jump out, or the user portrait (the one associated with the character they are playing, or the one associate with their user account)?
The code for basic settings:
The code for growing:
The code snippets are for both.
Hrm. This post isn't helpful, sorry about that.
-bort
Campaign of the Year - 2018
Actually it was incredibly useful and does exactly what i wanted. Thanks so much
I like it! Makes the players behind the characters obvious only if the user is curious about them. But then... I admit bias.
-bort
Campaign of the Year - 2018
Nice stuff.
Both of your sites are looking fantastic!
-Red
Campaigns: Dragon Age: Requiem
Now if I could just figure out how to apply it to all the buttons on my site, wihtout having to redo EVER SINGLE Page :)
Suppose this is the price I pay for the site having eben intially created before the CSS was even implemented and my remaining old school on that point.
I'm terrible at direct css, so I'm just going to spitball an idea: you might try applying a setting to all links, then exclude out the links in #main-content (because it annoyingly messes with lines of text).
-bort
Campaign of the Year - 2018
How do I apply a setting to all links? Example please? :)
and exclude the links in #main-content???
My CVSS skills are seriously lacking aside from borrowing and sometimes, rarely, figuring something out
I'm sorry to say I don't know the exact code, I just have an idea. I tried messing with it some this morning, but... alas... I'm pretty basic with my CSS knowledge. I cut & paste and slightly modify pretty decently, though. Sorry Keryth :-/
-bort
Campaign of the Year - 2018
I've used CSS exclusions in some of my CSS actually, here is an example of it:
-Red
Campaigns: Dragon Age: Requiem
Well, Alex, you site opens a whole new can of worms regarding 'How'd you do that?" questions :)
I know, right? I thought Morwindl Season 1 was looking pretty good, then Red joined the community, and I was blown away. Gave a whole new bunch of thinks to slave over. His Dragon Age site is top notch.
-bort
Campaign of the Year - 2018
Agreed that Alex's site is really great, but both of your sites, Morwindl and Shadows Over New York have some really great visual features too guys! Don't sell yourselves short!
Johnprime
Where the west is really wild!
The Valley of Life
Morwindl 2 has really come along, especially when compared to my first go of it. Thanks for noticing ;-)
-bort
Campaign of the Year - 2018
Thanks for the compliment Johnprime. Always nice to know my hard work is appreciated. However, in my opinion, no site is ever truly finished. Always places to tweak here and there.
Thanks very much for the compliments all, but I agree with Johnprime that you shouldn't sell yourselves short by any stretch. I just fiddle like anyone else and try to see what actually works here and what doesn't (or at least, I should say, that is what I did when I was still active). It was nice to see that the :not pseudo class worked, to be sure, since it opens up a few more options to mess about with in your approach.
And Keryth, that is the mind of a designer/developer right there. Just don't get to a point where it becomes a bane and keeps you from appreciating what you've accomplished (or enjoy making use of it) - a potential pitfall many stumble into. You've got yourself a pretty slick page going on.
Bort, your Morwindl 2 is simply outstanding to be completely frank. I've found myself trolling over it just looking at some of the awesome stuff you've worked out on there. Keep up the amazing work, it is always a pleasure to check it out.
Now, back off to the shadows with me - I've got tons of work to do still to make deadlines!
-Red
Campaigns: Dragon Age: Requiem
Oh I hear ya and agree @alex_redeye. I will admit that I do wish I had somehow saved a copy of Shadows, before I redid it into its current incarnation, however, I think this version is superior to the one I originally did.
Now...Might I ask how you did your menu bar that is on your Wiki, your Update bar on your main page, as well as the "The Story", "The Code", and "Dragon Age" buttons? Cuz I'd really like to borrow that :)
Oh, absolutely I'd be willing to share. Let me know if you need the HTML that goes with this as well:
News Ticker
Wiki Menu
Hover Magic
-Red
Campaigns: Dragon Age: Requiem
@alex_redeye Thanks for posting your CSS. I'll be looking through it to be sure!
Johnprime
Where the west is really wild!
The Valley of Life
Fun fact - if you're on my DA page you can search for CSS and it will net you some handy information.
-Red
Campaigns: Dragon Age: Requiem
@Alex_Redeye
Thanks for the CSS share. And yes, if you could provide the requisite HTML that would be fantastic
For the ticker you can actually nab that HTML right off my site - if you go to the CSS page there is a link to a "Formatting Test" (or something similar) page that includes the HTML for that. That will help keep this post smaller than the last one with the CSS.
For the Wiki Menu, you'll want to use this (replace things as needed with your own content):
For the "Hover Magic" images, here is the HTML you'll need:
With that Hover Magic the principle is the same on each one of them, as you can see it is pretty easy to change up the text and images involved in it.
-Red
Campaigns: Dragon Age: Requiem
Well, damn, that really jacked the hell out of the HTML code. And the edit post function doesn't help either...
Alright, we'll try this again. First is the Wiki Menu, then the Hover Magic
-Red
Campaigns: Dragon Age: Requiem
Ok - so I can't seem to figure out how to post HTML to this forum without it garbling the hell out of it. If anyone knows what I need to do so it doesn't jack it up let me know and I'll drop the code here.
-Red
Campaigns: Dragon Age: Requiem
What you posted works fine, just have to drop it into a development tool and do a find replace! Find < and replace with <.
What I posted worked.
What I tired to get the HTML tags to show didn't work. So I'm not sure what you can do for that. If I get some time I'll experiment some more!
Johnprime
Where the west is really wild!
The Valley of Life
OK, so, playing around wiht the code Alx shared, on a test site of course. Anyhow, got the Update ticker mostly working. Jus tneed to figure out how to center it vertically in the box.
Test Site: https://test-testing.obsidianportal.com/
Awww, not public :(
-bort
Campaign of the Year - 2018
oops. Should be public now. Sorry. Also trying to figure why the menu bar is screwed up...
Its not settings > style > collapse front page menu, is it?
-bort
Campaign of the Year - 2018
I'd considered doing it for a long time, I finally stole Alex's sweet little ticker plan. Sorry not sorry ;-)
-bort
Campaign of the Year - 2018
Well, I'm glad it is getting some use around these parts.
-Red
Campaigns: Dragon Age: Requiem