Jump to content

Search Page Font Color White

Go to solution Solved by paul2009,

Recommended Posts

Hi @mackenzieu what happens to the search page if you remove whatever Custom CSS you have on the website? I would guess that you've got some CSS that targets too broadly and is therefore affecting the Search page. Either that or you have something set to white in the Style Menu for the default colour theme. Let me know if you find anything!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • Solution
15 hours ago, mackenzieu said:

When the search results pop up, text is white. How can I change to black?

The text is white (#fff) because someone has added Custom CSS to force this colour, using the "!important" rule to override wider settings:

color: #fff !important;

Removing this line of CSS will prevent the text appearing in white on a white background.

It may help to know that, unless you override the settings with custom CSS, the font colours on the search page are usually determined by the settings in the "LIGHTEST 1" theme.

image.thumb.png.9e893146ece029c300c7139afd19cbe7.png

Was this post helpful? Please give feedback by clicking an icon below  ⬇️

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment

@paul2009 Thank you. I took out all the custom CSS and the text did show up as black. I've scoured this code for what may be the culprit and can only find two instances where #fffff is mentioned. When I removed those lines, the search text did not change to black. Does anything stick out to you that may be causing the issue?

//****Basics****//

//Adjust mobile breakpoint//
@media screen and (max-width: 1300px) {
  /* Display burger icon at all widths and align right */  
  .header .header-burger {
    display: flex;
    order: 2 !important;
}
  /* Make burger menu visible at all widths */  
  .header--menu-open .header-menu {
    opacity: 1;
    visibility: visible;
  }
  /* Center logo in mobile device */
  .header-title {
    text-align: left !important;
  }
  /* Hide primary navigation menu */ 
  .header .header-title-nav-wrapper .header-nav {
    display: none;
  }
}

//**Breakpoint Menu - Account Link**//
#yui_3_17_2_1_1665768454604_1197{
  font-size: 1rem !important;
  color: #E87A37 !important;
}

/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}

//Linked Text Bold//
p a {
  font-weight: bold !important;
  }

// Remove Hyphens //
p, h1, h2, h3 {
-webkit-hyphens: manual !important;
-moz-hyphens: manual !important;
-ms-hyphens: manual !important;
hyphens: manual !important;
}

/* No Hyphens */
p, h1, h2, h3 {
  -moz-hyphens: none;
  -ms-hyphens: none;
  -webkit-hyphens: none;
  hyphens: none;
  }

//**Header Search Bar**//
.header-search-bar{
  margin: 0 0 0 2.5vw;
}
@media only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width:  799px ){
  .header-search-bar{
    display:none;
    margin: 0 0 0 0vw;
  }
}
.header-search-bar  .search-input{
  border: 1px solid currentColor !important;
}
.header-search-bar  .search-input::placeholder{
  color: currentColor !important;
}
.mobile-header-search-bar{
  background-color: transparent;
  display:block;
  padding-left:3vw;
  padding-right:3vw;
}
.mobile-header-search-bar .preFade, .mobile-header-search-bar .preScale,.mobile-header-search-bar .preSlide,.mobile-header-search-bar .preClip, .header-search-bar .preFade, .header-search-bar .preScale, .header-search-bar .preSlide, .header-search-bar .preClip{
  opacity:1 !important;
  transform: scale(1) translate(0%,0%) !important;
  clip-path: unset !important;
}

.header-search-bar .search-input{
    border: .25px solid gray !important;
}

.header-search-bar .search-input::placeholder, .header-search-bar .search-input{
  color:gray !important;
}
.sqs-search-ui-button-wrapper .search-input.hover-effect:hover, .sqs-search-ui-button-wrapper .search-input.hover-effect:focus{
  outline: none !important;
}

//****Mobile Tweaks****//
//Mobile Nav Link Font//
.header-menu-nav-item a {
    font-size: 14px;
}

//Mobile Nav Login Link Font//
nav.header-menu-nav-list span.unauth {
 font-size: 14px;
 color: #E87A37 !important
}


//**** Banner Slideshow Overlay ****//
.slide-media-container:after {
    content: "";
    background-color: rgba(0,0,0,0.25);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9099;
}
.slide-content.list-item-card-background {
  z-index: 99999999999999;
}

//****Navigation***//
/* Nav item hover color - underline */
.header-nav-item a:hover {
    color: #E87A37 !important;
}

//*****Buttons*****//

/* Large Button Styling */
.sqs-block-button-element--large {
 width: 75% !important;
  color: black !important;
}
.sqs-button-element--primary {
  color: black !important;
  line-height: 23px !important;
}


.sqs-block-button-element--medium:hover {color: white !important;
}

/* Sliding Banner Button */
.primary-button-style-outline .bright .sqs-button-element--primary, .primary-button-style-outline .bright .sqs-button-element--primary.comment-btn, .primary-button-style-outline {
  color: white !important}

///***Events***///
//**Remove Back to All Events Link**//
.eventitem-backlink 
{display:none}


//** Classes by Medium Pages ** //
//Medium Side Bar//
#block-yui_3_17_2_1_1656355724328_19153 p {
    margin: 8px !important;
}

///*** E-COMMERCE***///

//** Product Block on Events **//
.product-block .product-mark { background: #E87A37 !important;
color: #ffff;
font-weight: 700;
font-size: 18px !important;
text-transform: uppercase;
}

//** Product Detail Page **//
.ProductItem-nav {
  display: none !important;
}
.product-layout-side-by-side {
  padding-top: 2vw !important;
}

.sold-out .product-details .product-mark.sold-out {
 font-weight: 700;
font-size: 18px !important;
text-transform: uppercase !important;
color: #E87A37 !important;}

//**Store Summary**//
.sqs-block-summary-v2 .summary-product-status .product-mark {
    background: #E87A37;
    color: #ffff;
 font-weight: 700;
font-size: 18px !important;
text-transform: uppercase;
  padding-top: 10px !important;
  }

.sqs-block-summary-v2 .summary-price { font-weight: 900;
font-size: 30px !important;
color: black !important}
  
.summary-metadata-item--tags { 
  font-weight: 800;
font-size: 17px !important;
color: #E87A37 !important;
  opacity: 100 !important;
}

.sqs-block-summary-v2 .product-scarcity {font-weight: 500;
font-size: 15px !important;
  font-style: italic !important;
color: #797979 !important}

//**Remove Links on Date Tags**//
.summary-metadata-container {
  pointer-events:none;
}

#cart {
color: #000000 !important;
}

//***Product Summary**//
/*Limited Stock*/

.sqs-block-summary-v2 .product-scarcity { }

//***Hyperlinks***//
//Remove Link Underline//
 a,span {
   background-image: none!important;
   text-decoration: none!important;}

//*****Summary Blocks****//
//Summary Titles//
.sqs-block-summary-v2 {
.summary-title,
.summary-heading {
font-weight: 700;
font-size: 28px !important;
text-transform: uppercase;
  } }


#block-yui_3_17_2_1_1654008090147_7762 {.summary-metadata-item {
font-weight: 600 !important;
font-size: 18px !important;
  color: #E87A37 !important;
  opacity: 1 !important;
  color: #c73d33;
  margin-top: 0px;
  text-transform: uppercase;
  }}

//****Gallery****//
//Gallery Descriptions//
.gallery-caption p {text-align:center; padding-top:5px}
.gallery-caption p:first-line {font-size: 1.5rem; font-weight:bold}


//****FOOTER***//
//Move About Column Left//
@media only screen and (min-width: 1200px) {#block-yui_3_17_2_1_1653973505379_8712 {
  padding-left: 40px;
  }}

/***Newsletter Form***/
.newsletter-block {
border: 3px solid #E87A37 !important;
 padding-top: 30px !important;
}
footer.sections .newsletter-form-header-description {
    display: none;
}

.newsletter-form-button {
letter-spacing: .5em;
background-color: #E87A37 !important;
color: black !important;
}

///***Order Confirmation Page***///
/* order message */
#confirmed-page p {
    color: black;
}

//**Remove Filter Links in Mobile**//
@media only screen and (max-width: 768px) {#block-761faeaca29ebe3ddbd8, #block-f77e2c5ceaaae5a9719e, #block-554d22256ac2c955b861, #block-5aa1331da88d791767c5, #block-323438d9ae06ac890b66, #block-5d969f7d43d3da0400fa, #block-c2eac9f2d107d65194f3, #block-374904f0adecf41cca85, #block-83b26b313ac5c6e935f9, #block-99efcb0a6becfd41ac5d, #block-cb509940f1de7303167a, #block-b8b2e40109b08b26211d, #block-0f39d7310dd2a3509ee6, #block-dc3855d20e3de62930b4, #block-4d63eec52ed6001b42b6, #block-74c3007c112fa45903db, #block-3c9f67ba1b13857ef221, #block-31d1822a1225cf6b7b76, #block-d4773a49135e93a88947, #block-37b70de27ca272377831, #block-46964d5d93f648fd57b8, #block-35ebe6a387cc1205a5bc, #block-f916b4008df3a3871cfa, #block-4fa358ab3269419b9b61, #block-9778ce412f2c3c051f5c, #block-8937074f00942f481baa, #block-e764953e0e11b87efd83, #block-59bd7b29dd0b027a8b98 {display: none;}}

 

Link to comment

The listing above doesn't match what I see on the site, but looking at the site, the issue appears to be with line 110 where the important rule is overriding the text colour on all pages containing a primary-button-style-outline class.

Edited by paul2009

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment

@paul2009I was able to pinpoint the piece of code causing the search text to turn white. When I remove it from the custom CSS, the search results show up black. However, this code is used to make the button the slider banner white. Is there a way to still keep the button text white and make the search text black?

/* Sliding Banner Button */
.primary-button-style-outline .bright .sqs-button-element--primary, .primary-button-style-outline .bright .sqs-button-element--primary.comment-btn, .primary-button-style-outline {
  color: white !important}

Thank you so much for your help!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.