How To Set Background Colors In The Brine Templates
Alkali Template: Immerse your customers in this website template's beautiful scrolling banners.
Notes
1. Calculation Custom CSS toDwelling house > Design > Custom CSS
2. Calculation !important to after, if CSS doesn't piece of work! for example: font-size: 20px !important;
iii. If information technology nevertheless doesn't piece of work, send me a message viaContact Grade with your site url. I'll give you exact CSS.
Site Title Font Size
/* Desktop Title */ a.Header-branding { font-size: 10px !important; } /* Mobile Title */ a.Mobile-bar-branding { font-size: 50px !of import; } Hibernate Logo (One Page)
Beginning, you need toobserve Page ID.
Then, use
torso#collection-5612e7fbe4b019df91935360 .Header-branding-logo { display: none; } Hide Logo (Unabridged Site)
img.Header-branding-logo { brandish: none; } Modify Logo (Mobile)
Add to Code Injection Footer
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).fix(function() { $('.Mobile-bar-branding-logo').attr('src','https://beaverhero.com/wp-content/uploads/2019/07/wexley-squarespace.jpg'); }); </script> Supervene upon with new logo url. Disable Ajax If the code doesn't work.
Hide Cart Icon
.Header .Cart { brandish: none; } Logo (Left) – Navigation (Right)
[data-nc-container="superlative-right"] { display: none !important; } .Header-inner { flex-direction: row-opposite; } nav.Header-nav.Header-nav--primary { width: 100%; text-marshal: correct; } Logo (Right) – Navigation (Left)
/* Remove Cart */ [information-nc-container="meridian-right"] { display: none !important; } /* Align Logo to Right */ .Header-inner { justify-content: space-betwixt; } Logo (Top) – Navigation (Bottom)
.Header-inner { flex-management: cavalcade-reverse; } Logo (Top) – Text (Under Logo) – Navigation (Under Tagline)
@media screen and (min-width:641px) { /* Logo top Nav lesser */ .Header-inner { flex-direction: column-reverse; } /* Insert text beneath Logo */ .Header-branding:later on { content: "Text Text"; display: block; font-size: 20px; color: #ff0000; position: absolute; bottom: -10px; left: 20px; } .Header-branding { position: relative; } /* Increment padding between Nav and Logo */ .Header-nav { margin-top: 20px; } } Logo (Bottom) – Navigation (Top)
.Header-inner { flex-direction: cavalcade; } Tagline on Mobile
@media screen and (max-width:640px) { .site-branding h1 a:later on { content: "Tagline"; font-size: 20px; } .site-branding h1 a { brandish: flex; marshal-items: centre; } } Header Background Color
Outset, yous need tofind Page ID.
Then, use
/* Unabridged Site */ .Header { background: #ff0000; } /* Ane Page */ trunk#collection-5612e7fbe4b019df91935360 .Header { groundwork: #ff0000; } Navigation Active Link Color
.Header-nav-item--active { color: #ff0000 !of import; } Underline Navigation Active Link
.Header-nav-item--agile { text-ornament: underline; } Underline Navigation on Hover
.Header-nav-item:hover { text-ornamentation: underline; } or you lot tin can also use
.Header-nav-detail:hover { border-bottom: 1px solid #ff0000; } Remove Search Icon
a.Mobile-bar-search { display: none; } Alter Hamburger Icon to word "Menu"
.Mobile-bar-carte { visibility: subconscious; } .Mobile-bar-menu:earlier { right: 0; visibility: visible; content: "Menu"; brandish: block; margin-acme: 10px; font-size: 15px; } Navigation Background Color (Mobile)
.Mobile-overlay-menu { background: #ff0000; } .Mobile-overlay { background: #ff0000 !important; } button.Mobile-overlay-close { background: #ff0000 !of import; } Sticky Header
/* Sticky Header */ header.Header { position: stock-still; left: 0; correct: 0; z-index: 999; } /* Set up Overlap content */ .Site-inner { padding-top: 100px; } Strength Hamburger Menu on Desktop
@media screen and (min-width:641px) { /* Bear witness Mobile Header on Desktop */ [information-nc-base="mobile-bar"] { display: block; } /* Hide Desktop Header */ .Header { display: none !important; } /* Hide Mobile Logo */ .Mobile-bar-branding-logo { brandish: none; } } Hide Header
Entire Site
.Header { brandish: none !important; } I Page
body#collection-56099b55e4b0ec7b8a89d273 .Header { display: none !important; } Weblog Page
.view-listing.collection-type-web log .Header { display: none !important; } All Weblog Posts
.view-item.drove-type-blog .Header { display: none !important; } Footer
Remove Social Icons
.socialaccountlinks-v2-block { display: none; } Remove Footer Navigation
.Footer-nav { brandish: none; } Remove Footer
Showtime, yous need tofind Page ID.
Then, employ
/* Unabridged Site */ .Footer { brandish: none !important; } /* ONe Page */ body#detail-561ece9de4b0b87b216c8863 .Footer { display: none !of import; } Footer Background Color
Commencement, you demand tofind Page ID.
So, utilise
/* Entire Site */ .Footer { background: #ff0000; } /* One Page */ body#item-561ece9de4b0b87b216c8863 .Footer { groundwork: #ff0000; } Footer Background Image
/* Unabridged Site */ footer.Footer { groundwork-prototype: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg); groundwork-size: cover; groundwork-repeat: no-echo; background-position: center center; } /* One Folio */ body#item-561ece9de4b0b87b216c8863 footer.Footer { background-prototype: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg); background-size: embrace; groundwork-repeat: no-echo; groundwork-position: center eye; } Blog
Blog Championship Custom Font
/* Post title single postal service */ h1.BlogItem-title { font-family: font name !important; } /* Mail service title blog list folio */ .BlogList-item-title { font-family: font proper name !important; } Remove Post Author
.Blog-meta-item--author { display: none !important; } Remove Published Date
.Blog-meta-detail--date { display: none !important; } Increase Content Width
.view-item.collection-blazon-blog article .sqs-block.sqs-block-html { width: 70%; } Store
Remove Add to Cart
.sqs-add together-to-cart-push button-wrapper { brandish: none !important; } Remove Add to Cart (Specific Category)
Supervene upon sour with your category proper noun
.category-sour .sqs-add together-to-cart-button-wrapper { brandish: none !of import; } Remove Product Social Share Icons
.ProductItem-details-share { display: none !important; } Remove Quantity Box
.product-quantity-input { brandish: none !of import; } Increase Production Detail Width
@media screen and (min-width:641px) { .ProductItem-details { width: seventy%; } .ProductItem-gallery { width: 30%; } } Alter "Add together to Cart" Color
.sqs-add-to-cart-button { background: #ff0000 !important; border-color: #ff0000 !important; color: greenish !important; font-size: 40px !important; border-radius: 100px; } Alter "Add to Cart" Text
.sqs-add-to-cart-button-inner { visibility: subconscious; } .sqs-add-to-cart-button-inner:before { visibility: visible; content: "Add together to basket"; display: block; position: accented; font-size: 10px; colour: #ff0000; } Remove Breadcrumb
.ProductItem-nav-breadcrumb { display: none; } Change "Checkout" Push Color
.checkout-button { groundwork: #f2f3f4 !important; border-colour: #f2f3f4 !of import; color: #000 !important; border-radius: 100px !important; } 
How To Set Background Colors In The Brine Templates,
Source: https://beaverhero.com/brine-template-squarespace/
Posted by: wilketherechat.blogspot.com
0 Response to "How To Set Background Colors In The Brine Templates"
Post a Comment