ctohme

Hey! No I can’t figure out how to get the header to overlap on gallery pages of the supply template. In the previous message I list the CSS code I’m using; it works on regular pages (see - [Here] ) of this template but not on the gallery pages (see here - [Click here] ); I am trying to get it to work on both pages not just regular pages but gallery pages also. Any idea how I can get it to work on gallery pages also?

Thank you! Yes the link is here … I have been able to get the margin smaller but it’s still there and also I am now overlapping the header onto the image, but I still have a small margin on the bottom and right of image when the page loads - as seen in the image attached. The css I am using for this page is as follows: <style> /*NO MARGINS SLIDESHOW BLOCK*/ #block-9beb4ff24a2ef69bc423 {margin-top:-70px; margin-right: -80px; margin-left: -80px; margin-bottom:-70px; z-index:1;} </style> <style> /*CHANGE BUTTON FOR SLIDESHOW ONLY*/ #block-9beb4ff24a2ef69bc423 a strong em { background-color: #66000000; border: 2px solid #FFF; color: #FFF } a:hover strong em { background-color: #FFF !important; font-style: normal; color: #000000 !important; -webkit-transition: .2s; /* Safari prior 6.1 */ transition: .2s; } </style> <style> /*REMOVE HEADER FOOTER MOBILE BAR*/ #footer, #mobile.bar { display: none !important;} </style> <style> /*CORRECT PAGE MARGINS*/ #main { margin-left: 0; height: auto; } </style> <style> /*CHANGES BACKGROUND COLORS*/ #main {background-color: #66000000; width: 100% !important;} #header {background-color: #66000000;} body {background-color: #66000000;} #canvas {background-color: #66000000;} </style> <style> body#block-9beb4ff24a2ef69bc423 !important .header-announcement-bar-wrapper {position: absolute !important;} </style>

Site URL: http://constantinetohme.com/programs I can’t figure out some issues with CSS in Supply template I am working on. I am trying to get the header to overlap the gallery image on this page so that the header links are just on top of (overlap) the gallery image - while keeping the function of the clickable button / the slide out panel.. The CSS I am using to accomplish this works on regular pages but isn’t working on this type of gallery page - here is the page [Click here] and below is the code I am currently using, do you have any suggestions on how to get this to work? [Here] is an example of it working fine on a regular page - you can see the header links just float on top of a full width site image which is the result I am looking for. <style> body#yui_3_17_2_1_1646771047917_133 !important .header-announcement-bar-wrapper {position: absolute !important;} </style> <style> #header {z-index: 99;} </style> <style> /*REMOVE HEADER FOOTER MOBILE BAR*/ #footer #mobile.bar { display: none !important;} </style> <style> /*NO MARGINS IMAGE BLOCK*/ #yui_3_17_2_1_1646771047917_133 {margin-top:-70px; margin-right: -80px; margin-left: -80px; margin-bottom:-70px; z-index:1;} </style> <style> /*CORRECT PAGE MARGINS*/ #main { margin-left: 0; height: auto;} </style> <style> /*CHANGES BACKGROUND COLORS*/ #main {background-color: #66000000; width: 100% !important;} #header {background-color: #66000000;} body {background-color: #66000000;} #canvas {background-color: #66000000;} </style>

Adding the code below almost worked, but no matter what I still end up with a small bit of padding on the right of the image… Also, if anyone knows how to change the slideshow height, I’d like to make it shorter. <style> #block-yui_3_17_2_1_1644886214638_5303 {margin-top:-10px; margin-right: -80px; margin-left: -80px; margin-bottom:-15px; z-index:99;} </style>

Hey, really struggling to figure out how to make page content full width on supply template, specifically the slideshow block. As you can see on the image there is padding on the left and right of the slideshow, that’s what I am trying to remove completely. I’m currently using custom css on this page to remove header, footer, mobile.bar; change background; and to add buttons on images… so that I can repurpose this as a landing page while keeping the format of supply theme on the rest of my site…. Any suggestions on either making the slideshow specifically full width / no padding or remove padding from this entire page? Below is the CSS currently used: <style> #header, #footer, #mobile.bar { display: none !important;} </style> <style> #main { margin-left: 0; height: auto; } </style> <style> #main {background-color: #E4D5A0; width: 100% !important;} body {background-color: #E4D5A0;} #canvas {background-color: #E4D5A0;} </style>