Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

John2141

Member
  • Content Count

    62
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. https://johnetterleebooks.com/
  2. Does anyone know how to center mobile nav links in Brine? Thanks.
  3. Site URL: https://johnetterleebooks.com/ Does anyone know how I can make my header like the one in this website and do a video background? https://stevenkonkoly.com/
  4. How do you change color of hyperlinks without affecting navigation links?
  5. What if I want the image to remain in the same place?
  6. I'll give that a try!
  7. I want text to wrap around images instead of leaving that open space underneath it. How would I do this? I've included an example screenshot of what I want to change.
  8. https://johnetterleebooks.com/
  9. How would you add an image background to a footer in Brine?
  10. I got this code for animating my header. But, for some reason it works with H2-3, but not my H1. The code is below. I think there is something going on with the custom css on my site. Can someone take a look? // GIF Text // h1 { background: url(GIF-URL-HERE.gif); background-size: cover; background-position: center; -webkit-background-clip: text; color: transparent; }
  11. Hi. I am trying to change my H1 on the home page of my site from green font to GIF animated. But I can't find the css I used to make it this way. Can someone take a look at my code and point to where it is? I want to delete it and use another code. Thanks! Here's my site css code. .image-block { -webkit-filter: drop-shadow( 5px 5px 8px #000000 ); filter: drop-shadow( 20px 15px 10px #000000 ); } // Announcement Bar Hover Color // .sqs-announcement-bar { width: 100%; background-color: #ff0000 !important; /* main color */ webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -ms-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; } .sqs-announcement-bar:hover { border-color: white !important; background-color: #6bae23 !important; /* hover color */ webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -ms-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; } // Bounce Social Icons // @-webkit-keyframes hvr-pop { 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } } @keyframes hvr-pop { 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } } .sqs-block-socialaccountlinks-v2 a svg{ top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .sqs-block-socialaccountlinks-v2 a{ -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); } .sqs-block-socialaccountlinks-v2 a:hover{ -webkit-animation-name: hvr-pop; animation-name: hvr-pop; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } .social-icons-style-regular .sqs-use--icon{ fill: #000000 !important; } .social-icons-style-regular .sqs-svg-icon--wrapper:hover .sqs-use--icon{ fill: #FECB2F !important; } // Newsletter Block // .newsletter-block { padding: 50px !important; border-radius: 25px; background-color: #272732; } // Gradient Newsletter Block // .newsletter-block { background: linear-gradient(to bottom, #c0c0c0, #000000); padding: 50px !important; border-radius: 20px; } // Animation Keyframes // @-webkit-keyframes Gradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-moz-keyframes Gradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @keyframes Gradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } // Animated Gradient Audio Player // .sqs-widgets-audio-player { background-image: linear-gradient(-45deg, #ffffff, #ff0000, #000000, #F07C63) !important; background-size: 400% !important; -webkit-animation: Gradient 10s ease infinite !important; -moz-animation: Gradient 10s ease infinite !important; animation: Gradient 10s ease infinite !important; border-radius: 5px; } // Highlighted Field Form // .field-list .field-element:focus, .field-element:visited{ border-color: #FECB2F !important; } .field-list select:focus{ outline-color: #FECB2F !important; } .field-list .section{ border-color: #FECB2F !important; } .form-button-wrapper .button{ color: white !important; border-color: transparent; background-color: #fecb2f; } .form-button-wrapper .button:hover{ color: white !important; background-color: #000000 !important; } // Animation Keyframes // @-webkit-keyframes Gradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-moz-keyframes Gradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @keyframes Gradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } // Footer Top Border // Footer { border-top: 5px solid #ff0000; } // Rotating Animation Keys // @-webkit-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -webkit-transform: translateY(-30px); } 5% { opacity: 1; -webkit-transform: translateY(0px);} 17% { opacity: 1; -webkit-transform: translateY(0px); } 20% { opacity: 0; -webkit-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-moz-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -moz-transform: translateY(-30px); } 5% { opacity: 1; -moz-transform: translateY(0px);} 17% { opacity: 1; -moz-transform: translateY(0px); } 20% { opacity: 0; -moz-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-o-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -o-transform: translateY(-30px); } 5% { opacity: 1; -o-transform: translateY(0px);} 17% { opacity: 1; -o-transform: translateY(0px); } 20% { opacity: 0; -o-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -ms-transform: translateY(-30px); } 5% { opacity: 1; -ms-transform: translateY(0px);} 17% { opacity: 1; -ms-transform: translateY(0px); } 20% { opacity: 0; -ms-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; transform: translateY(-30px); } 5% { opacity: 1; transform: translateY(0px);} 17% { opacity: 1; transform: translateY(0px); } 20% { opacity: 0; transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } //remove hyphens// p, h1, h2, h3 { -webkit-hyphens: manual !important; -moz-hyphens: manual !important; -ms-hyphens: manual !important; hyphens: manual !important; } .sqs-search-page { .sqs-post-type-image.ContentItem { display:none !important; } } .image-slide-title { white-space: normal !important; line-height: 1.5em; } // Custom Color Social Icons // .sqs-use--icon { fill: #E77D6A !important; } // Pill Audio Block // .sqs-widgets-audio-player { border: 1px solid transparent; padding: 5px; border-radius: 50px; } @media screen and (max-width: 800px) { .sqs-block-image .design-layout-card:not(.sqs-narrow-width) { display: block!important; } .sqs-block-image .design-layout-card:not(.sqs-narrow-width) .image-card-wrapper { width: 100%; } .sqs-block-image .design-layout-card:not(.sqs-narrow-width)>div:first-child { width: 100%; } } .sqs-block-button-element--small:hover:before, .sqs-block-button-element--small:focus:before, .sqs-block-button-element--small:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } .sqs-block-button-element--small:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #FECB2F; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .sqs-block-button-element--small { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .sqs-block-button-element--small { margin: .4em; padding: 1em; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } // Mobile Menu Text // .header-menu-nav-item a { color: #FFFFFF !important; } // Righty Nav Line / @media all and (min-width:770px){ header nav a{ display: inline-block !important; float: none; } header nav a:hover:after{ transform: scaleX(1); } header nav a:after { display:block; content: ''; border-bottom: solid 2px #ff0000; transform: scaleX(0); transition: transform 250ms ease-in-out; z-index: 999; transform-origin :100% 50%; } } // Mobile Menu Background // .Mobile-overlay-menu { background-color: #000000; background: linear-gradient(to bottom, #b22222, #000000); } // Center Footer Text // @media only screen and (max-width: 640px) { footer { text-align: center;} } .Header--top, .Mobile-bar--top { background-image: url(https://static1.squarespace.com/static/5d4c573da7991a00018356bc/t/5dd5ef4cd168ef7c6a901a6b/1574301516774/Untitled+design.jpg); background-size: cover; background-position: center center; } // LINE BLOCK BORDER // .sqs-block-content hr { background-color: #000000 !important; border-top: #ffffff 1px solid !important; border-right: #ffffff 1px solid !important; border-bottom: #ffffff 1px solid !important; border-left: #ffffff 1px solid !important; } @media only screen and (max-width: 640px) { p { font-size: 16px; } } @media screen and (max-width: 641px) { body { font-size: 9pt; letter-spacing: 2px; line-height: 30px; } h1 {font-size: 13pt} h2 {font-size: 12pt} h3 {font-size: 10pt} } .sqs-gallery-design-carousel .sqs-gallery-controls .next, .sqs-gallery-design-carousel .sqs-gallery-controls .previous { display: block; float: right; position: relative; top: auto; left: -15px; right: 15px; bottom: auto; margin: 0 0 15px 0; padding: 0; background-color: transparent; color: inherit !important; font-size: 16px; line-height: 16px; cursor: pointer; } .sqs-gallery-design-carousel .sqs-gallery-controls .next:before { font-family: 'squarespace-ui-font'; font-style: normal; speak: none; font-weight: normal; -webkit-font-smoothing: antialiased; content: "\E003"; text-align: center; display: inline-block; vertical-align: middle; } .sqs-gallery-design-carousel .sqs-gallery-controls .next:before { font-size: 64px; width: 64px; height: 64px; line-height: 64px; } .sqs-gallery-design-carousel .sqs-gallery-controls .next:before { font-size: 32px; width: 16px; height: 32px; line-height: 32px; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous { margin-right: 10px; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before { font-family: 'squarespace-ui-font'; font-style: normal; speak: none; font-weight: normal; -webkit-font-smoothing: antialiased; content: "\E000"; text-align: center; display: inline-block; vertical-align: middle; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before { font-size: 64px; width: 64px; height: 64px; line-height: 64px; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before { font-size: 32px; width: 16px; height: 32px; line-height: 32px; } .sqs-block-summary-v2 .summary-heading { font-size: 24px; } .summary-heading { text-align: center !important; } .summary-carousel-pager .previous { position: absolute !important; left: 18px !important; right: inherit !important; } .summary-header-text{ position: relative !important; padding: 0 !important; left: 25px !important; } // GIF Mobile Menu Background // .header-menu-bg { background: url(https://static1.squarespace.com/static/5d4c573da7991a00018356bc/t/5dead2aca95b4527acb2152b/1575670474800/giphy+night+vision.gif); background-size: cover; background-position: center; } // Gradient Form Button // .form-wrapper input[type=submit] { font-size: 16px; padding: 20px; background: linear-gradient(to right, #F07C63, #E45372); } // Image Card Block Third Font // .sqs-block-image .design-layout-card em { font-size: 22px; text-transform: capitalized; letter-spacing: 4px; font-weight: 600; color: #000000; font-style: italics !important; display: block; } // Diagonal Style - Two Colors // .Main-content { background-color: #000000 ; /* make this your darkest color */ background-image: linear-gradient(to bottom right, #000000, #778899); } // Diagonal Style - Two Colors // #home-about { background-color: #000000 ; /* make this your darkest color */ background-image: linear-gradient(to bottom right, #000000, #778899); } // LINE BLOCK BORDER // .sqs-block-content hr { background-color: #000000 !important; border-top: #dcdcdc 1px solid !important; border-right: #dcdcdc 1px solid !important; border-bottom: #dcdcdc 1px solid !important; border-left: #dcdcdc 1px solid !important; }
  12. Does anyone know how to do CSS3 animation? I want to animate rifle crosshairs in the header of my website. https://johnetterleebooks.com/
  13. What css code can I use to change page background color site-wide?
×
×
  • Create New...