Table of Contents:[hide]
Our Growing CSS Styles
As you know, this website started as a hobby and quickly turned into a full-time operation. My website features my original creations, trending items, apparel, and decor. Along the way, I have learned tons about how to customize code on the 'back- end' to create our ever-evolving style. Freestyling with CSS, HTML, and JS has is a learning curve, but can be accomplished with time and lots of patience. So i've made it easy for you. Let's take a step outside our regular scheduled programming, scale it down and do some, well, programming.
Free Custom Shopify Code?!
Some have asked about custom work, and have offered to pay for my web design services. I am flattered, and will use this as an opportunity to follow the rules of Sydney's Collection. It's only fitting that we spread positivity by providing you with a free custom shopify section! It's very straightforward, and I look forward to adding more posts like this to my blogs.
Let's Get Started
I will be adding more to this list as we go, and I will do my very best to provide the most up to date code. If any code is rendered obsolete, feel free to send a message, and I will adjust:
Banner Content Container Opacity CSS:
/*Adjust the radius pixels to your liking*/
.content-container
{
border-radius: 8px;
}
Transparent and Glassy Header CSS:
.header {
background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.header__submenu {
background: #fffffff1;
}
.header-wrapper {
background: none;
border: none;
}
Center Header Text CSS
@media screen and (min-width: 990px) {
.header--middle-left {
grid-template-columns: 1fr auto 1fr;
column-gap: 2rem;
}
}
Add 'SKU' text before the SKU number on product page:
.product__sku::before
{
content: "SKU:";
}
Remove Hamburger Close Icon "X" When Menu is Clicked on Mobile CSS
add this to the end of your base.css:
svg.icon.icon-close { display: none; }
Make Image Banner Smaller for Image Banner Section Custom CSS
Apply this to the custom css at the bottom of your chosen image banner section. Adjust the 'width:90%' to your liking.
.banner
{
width: 90%;
margin: 0 auto;
}
Copy my Pretty Cool Image Banner Section Css
Apply this code to the custom css at the bottom of your chosen image banner section.
@media screen and (max-width: 749px) {
.banner .banner__content {
align-items: flex-end;
}
}
@media screen and (max-width: 749px) {
.banner__content {
padding: 20px;
}
}
h2 {
padding-bottom: 24px;
}
.banner {
width: 90%;
margin: 0 auto;
}
Add Padding Space Underneath the Email Sign-Up Form
Apply this code to the custom css at the bottom of your chosen email sign up form. You can adjust the '25px' to your liking.
.newsletter-form
{
padding-bottom: 25px;
}
Center Your Header Menu Text Items
Apply this code to the custom css at the bottom of your header editor.
.list-menu
{
justify-content: center;
}
I will check in and update as I go, and will also add blogs containing some other functions. If you have any recommendations, or are looking for something specific, let me know in the comments!
Thanks for reading, I hope you found some helpful free CSS.
