Skip to main content

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. 

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.


@GRuss any luck here?


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


@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?

 


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...


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


Reply