SOLVED Overlap positions
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 15
- Another Old Hack!
-
Is there a way to overlap positions?
Using the default Gantry template, I want to move the 'header' position up about 100pixels so it overlaps the 'top' position so I can line up the 'top' position behind an image I have in a 'header-a' module so the white background of the 'top' container aligns with the dark border in my PNG 'header-a' image. - Last Edit: 8 years 11 months ago by Kat05.
- Just another old hacker!
-
-
-
- cdavis411
- Preeminent Rocketeer
- Posts: 17787
- Thanks: 882
-
You can create a file using a simple text editor for custom css and name it using this format: templatefolder-custom.css (e.g., rt_kirigami-custom.css or gantry-custom.css). For this issue add this to the custom CSS fileMore Info here: www.gantry-framework.org/documentation/j...custom_stylesheet.md
body #rt-header {position: relative;top: -89px;}
-
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 15
- Another Old Hack!
-
cdavis411,
FYI, I'm very family with the custom template. Your CSS code resolved that problem.
However, something really strange. My body background gradient isn't going all the way to the bottom. I've set the fix background to white for clarity. Can you see why?
Luke - Just another old hacker!
-
-
-
- cdavis411
- Preeminent Rocketeer
- Posts: 17787
- Thanks: 882
-
when I remove my css plus what you addedthe gradient is still cut off to white.
#rt-header,#rt-navigation, #rt-drawer, #rt-showcase, #rt-transition, #rt-bottom, #footer, #rt-copyright {position:relative;top:-89px;} /* force overlap with #rt-top position */
-
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 15
- Another Old Hack!
-
cdavis411,
No. It wasn't your recommended changes that created this problem. To be honest, I was stuck on the background issue. I found part of the problem in that I didn't add '100%' to the last part of the gradient. When I changed that and change the 'background-color' to the last gradient color, it solved my problem. Honestly, it was more brain-dead from looking at code for so long. I'm taking a break.
- Just another old hacker!
-
-
-
- cdavis411
- Preeminent Rocketeer
- Posts: 17787
- Thanks: 882
-
Luke Douglas wrote:
cdavis411,I feel your pain
No. It wasn't your recommended changes that created this problem. To be honest, I was stuck on the background issue. I found part of the problem in that I didn't add '100%' to the last part of the gradient. When I changed that and change the 'background-color' to the last gradient color, it solved my problem. Honestly, it was more brain-dead from looking at code for so long. I'm taking a break.
-
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 15
- Another Old Hack!
-
Jon G. wrote:
Late add-on request for this. Is there a way to apply this to an override template? i.e., I want to set the overlap, but only for a position on the home page and not interior pages.
Jon G.,
As I don't know what template you're using, I'll use the default Gantry template settings. If you're main template style is set to 'dark', you can set your override template style to 'light'. Then use the class 'headerstyle-light' to declare your background. If you look at your page source, you'll see in the '<body>' tag, either 'headerstyle-dark' or 'headerstyle-light', at least with the default Gantry template. I looked at one of my client sites using the 'Oculus' template and it had a '<body>' class "backgroundtop-type-preset4" so this would be a class I could use to setup a different background. However, the default Gantry template does not set a class for 'presets' which is a bummer.
- Just another old hacker!
-
Time to create page: 0.073 seconds