Gemstone Stable
03:01:03 Snow❆Gem
@sky

*gasps* Ohhhh! XD I'm in love!
Dandelion Farms
02:58:01 Sky/Dandy
I am absolutely obsessed with the buckskin coat he's got
-HEE Click-
Bells Crossing
02:55:34 
-HEE Click-

I love how chaotic this boy is!
Versailles
02:55:28 Versa
Look at this little cutie who visited my birdhouse. :)
-Click-
Dandelion Farms
02:55:10 Sky/Dandy
These are my brindle girls
-HEE Click-
-HEE Click-
Greenheart Stables
02:54:58 Green|Gren|Grenlin
-HEE Click-
DD markings 👀
Imperial Warmbloods
02:54:54 Imp/Impie
If we`re sharing colors.. I got these two back-to-back, xd
-HEE Click-
-HEE Click-
Lynx Glory Stables
02:53:27 ⛈ whisper/lynx
- asfa
aw cute
Dandelion Farms
02:53:07 Sky/Dandy
I love the rabi on the warmblood so much!
Asfamoth
02:52:41 Asfa
-HEE Click-
Dandelion Farms
02:52:27 Sky/Dandy
I'm just wanting a RbRb foal that I can get the new rabi on. I love the new rabicano art so much!
Golden Rule
02:51:27 
-HEE Click-
Just rerolled this one
WalkingThroughHell
02:50:40 
I kept this one because of the tiny blanket
-HEE Click-
Lynx Glory Stables
02:50:21 ⛈ whisper/lynx
kind of sad that i gelded him, i dont think i thought about the awesome markings he could have passed on (despite breeding for ratings)
Dandelion Farms
02:50:03 Sky/Dandy
-HEE Click-
-HEE Click-
I love snowcap babies!
Lynx Glory Stables
02:49:40 ⛈ whisper/lynx
yep this one -HEE Click- is my rarest that i own. i've had a few 1/1s but im pretty sure i got rid of them because i mostly breed for ratings xD
WalkingThroughHell
02:49:35 
I have this one
-HEE Click-
Hellion Ridge
02:49:35 Chiral
-HEE Click-
Definitely my favorite unpatterned coat. Ultra sooty
Dandelion Farms
02:49:19 Sky/Dandy
Lynx
Ahh she does!
Golden Rule
02:48:13 
-HEE Click-
This kid is cute i guess
You must be a registered member for more
than 1 day before you can use our chatbox.

Rules   Hide
You are in: Main Chat
View Sales
 Year: 187   Season: Fall   $: 0 Sat 03:02pm CST  
 Forecast: Morning Frost and Afternoon Sunshine


Forums

→ Horse Eden is a fun game! Sign Up Now!

My Subscriptions
My Bookmarks
My Topics
Latest Topics
Following
Forums > Member Help > Guides
   1    2    3 

Den's CSS Guide: Overlapping images + CSS essentials July 19, 2020 04:56 PM


Cherry River Elites
 
Posts: 1000
#742022
Give Award
Thanks so much!
But I have a question. I'm trying to get rid of the header so it's just my dots, but it won't let me remove the default header. How do I do this?
Den's CSS Guide: Overlapping images + CSS essentials July 19, 2020 05:01 PM

Rocky Creek Ranch
 
Posts: 1656
#742024
Give Award
Try adding this at the bottom of your code :
.gameheader {
background: none;
border: 0 !important;
}
Den's CSS Guide: Overlapping images + CSS essentials July 19, 2020 05:12 PM


Cherry River Elites
 
Posts: 1000
#742026
Give Award
...
That worked perfectly, thank you so much!
I'm in the company of geniuses O.O
Den's CSS Guide: Overlapping images + CSS essentials August 5, 2020 12:10 AM


Ryshadium RIDs
 
Posts: 653
#753267
Give Award

Thank you so much for this! I have a question. I am trying to get my header to change when I hover over it. I would like the secondary header (the one that shows when hovered) to be on top of the nav bar like in your tutorial. So I would like to switch from "Horse Eden Eventing" to "Ryshadium RIDs" in the images below. They work indivually, but I can't get the hover figured out. Could you help me, please?

Here are the images:

http://u.cubeupload.com/InkSpren/Screenshot371.png

http://u.cubeupload.com/InkSpren/Screenshot372.png

Here is the code I'm using for the first:

.gameheader {
background:none;
border-width: 0px !important;
}

.gameheader div[style]:first-child {
background-image: url(http://u.cubeupload.com/InkSpren/6aaRyshadiumHEEPaletteH.png);
background-size: 858px;
background-repeat: no-repeat;

height: 450px !important;
position: relative;
margin-bottom: -200px;
z-index: 100000001;

pointer-events: none;
}

And here is the code for the second image:

.gameheader {
background:none;
border-width: 0px !important;
}

.gameheader div[style]:first-child {
background-image: url(http://u.cubeupload.com/InkSpren/cb9RyshadiumUsernamePal.png);
background-size: 858px;
background-repeat: no-repeat;

height: 450px !important;
position: relative;
margin-bottom: -200px;
z-index: 100000001;

pointer-events: none;
}

Thank you for your time!


Edited at August 5, 2020 12:14 AM by Ryshadium RIDs
Den's CSS Guide: Overlapping images + CSS essentials August 6, 2020 06:48 AM

Former Stable
 
Posts: 0
#754232
Give Award

Ryshadium RIDs said:

Thank you so much for this! I have a question. I am trying to get my header to change when I hover over it. I would like the secondary header (the one that shows when hovered) to be on top of the nav bar like in your tutorial. So I would like to switch from "Horse Eden Eventing" to "Ryshadium RIDs" in the images below. They work indivually, but I can't get the hover figured out. Could you help me, please?

Here are the images:

http://u.cubeupload.com/InkSpren/Screenshot371.png

http://u.cubeupload.com/InkSpren/Screenshot372.png

Here is the code I'm using for the first:

.gameheader {
background:none;
border-width: 0px !important;
}

.gameheader div[style]:first-child {
background-image: url(http://u.cubeupload.com/InkSpren/6aaRyshadiumHEEPaletteH.png);
background-size: 858px;
background-repeat: no-repeat;

height: 450px !important;
position: relative;
margin-bottom: -200px;
z-index: 100000001;

pointer-events: none;
}

And here is the code for the second image:

.gameheader {
background:none;
border-width: 0px !important;
}

.gameheader div[style]:first-child {
background-image: url(http://u.cubeupload.com/InkSpren/cb9RyshadiumUsernamePal.png);
background-size: 858px;
background-repeat: no-repeat;

height: 450px !important;
position: relative;
margin-bottom: -200px;
z-index: 100000001;

pointer-events: none;
}

Thank you for your time!



I'd ask Dark! (The unknown) about this, Ink!
Den's CSS Guide: Overlapping images + CSS essentials August 6, 2020 07:30 AM

Former Stable
 
Posts: 0
#754240
Give Award

Try the following:

.gameheader {
background:none;
border-width: 0px !important;
}

.gameheader div[style]:first-child {
background-image: url(http://u.cubeupload.com/InkSpren/6aaRyshadiumHEEPaletteH.png);
background-size: 858px;
background-repeat: no-repeat;

height: 450px !important;
position: relative;
margin-bottom: -200px;
z-index: 100000001;

pointer-events: none;
}

.gameheader:hover div[style]:first-child {
background-image: url(http://u.cubeupload.com/InkSpren/cb9RyshadiumUsernamePal.png);
}

I've bolded the part that's added to the code for your first image. Normally, to add special styling for an element when you hover over the header, you'd append :hover to the selector name (e.g. .gameheader div[style]:first-child:hover). However, since .gameheader div[style]:first-child has pointer-events set to none (so that people can still click on links and such that are beneath the header), this also prevents the hovering action from being detected. So instead, you can specify that you want to change the style for div[style]:first-child when .gameheader is hovered over (as shown in the bolded code above).


Edited at August 6, 2020 07:31 AM by Dense Moors
Den's CSS Guide: Overlapping images + CSS essentials August 6, 2020 05:13 PM


Ryshadium RIDs
 
Posts: 653
#754540
Give Award

Thank you, Dense! I suspected it had something to do with :hover, but I couldn't figure out where to put the darn thing.

Thanks to you too, Marauder.


Edited at August 6, 2020 05:14 PM by Ryshadium RIDs

Forums > Member Help > Guides
   1    2    3 

Refresh



Copyright ©2009-2025 Go Go Gatsby Designs, LLC    All Rights Reserved

Terms Of Use  |   Privacy Policy   DMCA   |   Contact Us
Help Me (1)  |   Game Rules   |  Reset Palette