Skip to main content
Answer

Help - Public Catalog Page CSS

  • February 28, 2024
  • 6 replies
  • 294 views
G
Influencer I

Howdy all,

Hoping the CSS gurus among you can provide assistance for the below (seemingly simple) CSS tweaks to the public catalog page (pre-SSO):

 

Change the background colour of the page. Have achieved this for the post SSO home page by targeting page ID #. However, this does not appear to work for the public page, what am I missing here?

#doc-page-catalog {

      background-color: #000000;

}

 

Reduce the height of the header image by half. Simply uploading an image with reduced height px does not achieve this. The below code variations are also not working. Any ideas?

#doc-page-catalog > div > intro.text-white {

    height: 150px !important;

}

 

Any assistance greatly appreciated. 

Best answer by Bfarkas

I only have  subscription page public catalog available at the moment, but the setup seems roughly the same. Try these:

.catalog-intro .text-white {
height: 150px !important;
}

.tab.tab-visible {
    background-color: #000000;
}

If you can snag the unique page id, you can add it as precursors to both of these like you have been doing for safety as well.

Bfarkas

6 replies

Bfarkas
Hero III
Forum|alt.badge.img+6
  • Bfarkas
  • Hero III
  • Answer
  • March 1, 2024

I only have  subscription page public catalog available at the moment, but the setup seems roughly the same. Try these:

.catalog-intro .text-white {
height: 150px !important;
}

.tab.tab-visible {
    background-color: #000000;
}

If you can snag the unique page id, you can add it as precursors to both of these like you have been doing for safety as well.

Bfarkas
Hero III
Forum|alt.badge.img+6
  • Bfarkas
  • Hero III
  • March 8, 2024

@GRuss any luck here?

G
Influencer I
  • GRuss
  • Author
  • Influencer I
  • March 11, 2024

Hi @Bfarkas - these both worked well, many thanks! 

Bfarkas
G
Influencer I
  • GRuss
  • Author
  • Influencer I
  • March 11, 2024

@Bfarkas - a further public catalog CSS conundrum: Catalog widget description text colour is barely readable and remains stubbornly unchanged despite applying the below and this working fine across all post SSO pages:
 

span.ui-carousel-description.ui-typography-body.ng-star-inserted {

color: white !important;

{


Any ideas?

 

1 Attachments
Bfarkas
Hero III
Forum|alt.badge.img+6
  • Bfarkas
  • Hero III
  • March 11, 2024

So first, just generally be careful, your closing bracket above is an open bracket.

That being said, that doesn’t seem to work for me at all on either side (logged in or out), and I don’t see a way around it for anything as it seems like the built in CSS is already using important tags to get around it. Only real solve seems to be to change the primary font color choice which will result in changes everywhere...

G
Influencer I
  • GRuss
  • Author
  • Influencer I
  • March 12, 2024

@Bfarkas thanks anyway for exploring this. Guess we’ll have to try and find a workaround. 

Bfarkas
Terms & ConditionsCookie settingsAccessibility statement