Solved

Edit CSS for a single page to remove header and footer? Trying to DIY a mobile link list page

campclever
Tourist
6 0 2

Hi there,

Looking for assistance to edit a specific page on my site. I'm not very familiar with code but have scrapped this together. I'd like to use this page for quick links in place of a third party like link tree when I need a list of links on social media. Seems some of the options I have entered just in the html box on the page itself (specific colors, rollover colors, etc) don't show due to the CSS and such that's on my site itself. Nothing changes when I pick a different page theme from the drop down menu. Do I need to add code to the css page template itself vs doing it on this specific page?  

Here's a shot of my page:

IMG_4779.PNG

I'd love for the logo to stay, to add my Instagram handle and maybe bio image, but the header and footer of my page to just not be on this page. The text on these buttons isn't displaying as I've directed in the html for this page; the button color changes as I'd like but I'd prefer that the text be white and I can't seem to figure out what is stopping it from following that code. 

Accepted Solutions (2)
KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@campclever 

can you please add this code also,

#visit .header-bar {display: none;}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@campclever 

Yes, please added color as you like

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 7 (7)

KetanKumar
Shopify Partner
36839 3635 11972

@campclever 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question. 😊

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
campclever
Tourist
6 0 2

Hi! Thanks for your response. This page is at https://campclever.co/pages/visit

It looks a little different now than my screenshot as I've been messing with the colors to attempt to get what I'm really looking for! As of right now the text is on the buttons but doesn't show up unless you scroll over, I'm assuming because of some kind of CSS within my site overall. Just white or green text on these buttons without a rollover effect would be awesome! Would also take a blue or green border on a white background button, with blue or green text. Of course if it's just a matter of coding the override for this page I can mess with the specific color options on my own; I just don't know how to get it to display correctly to begin with as I currently have code on this page that looks like this: 

<style><!--
.btn-group button {
color: #878245;
background-color: #B0CCBA;
border: none;
padding: 16px;
text-align: center;
text-decoration: none;
width: 100%;
display: block;
}
--></style>
<div class="btn-group"><button><a href="https://lettersfrom.campclever.co">mailing list</a></button> <button><a href="https://campclever.co/blogs/campclever">blog</a></button> <button><a href="https://campclever.co/collections/all">shop</a></button></div>

And then removing the header and footer just from this specific page. 

KetanKumar
Shopify Partner
36839 3635 11972

@campclever 

Thanks for it

1. Go to Online Store->Theme->Edit code
2. Asset->/timber.scss.liquid->paste below code at the bottom of the file.

#visit .site-header, #visit .site-footer {display: none;}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
campclever
Tourist
6 0 2

Thank you so much! Getting there! I'm assuming I need a separate tag for the green announcement bar at the top to display none as well? The text still does not display on top of the buttons as I have it coded on the page

IMG_4861.PNG

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@campclever 

can you please add this code also,

#visit .header-bar {display: none;}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
campclever
Tourist
6 0 2

Thank you so much! That did the trick. Such simple code but when you're not a coder like me it's scary to put anything into those assets without a little help from some pros!

 

Now I just have to get the buttons to behave as expected so the text color can be read!

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@campclever 

Yes, please added color as you like

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing