Shopify themes, liquid, logos, and UX
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:
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.
Solved! Go to the solution
This is an accepted solution.
can you please add this code also,
#visit .header-bar {display: none;}
This is an accepted solution.
Yes, please added color as you like
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.
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.
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;}
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
This is an accepted solution.
can you please add this code also,
#visit .header-bar {display: none;}
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!
This is an accepted solution.
Yes, please added color as you like
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024