Forum Discussion

jasondmcclellan's avatar
jasondmcclellan
Advisor
8 years ago

Override Master CSS visited link on Category Pages

All,

I'm attempting to create four microsite pages on the community for separate vendors.   The tabs on the page are reading the main visited link causing them to be red,  how can I override the CSS for these four separate Category pages?    In one case the OEM background for the active tab is red rendering it invisible.

I'm attempting to create four microsite pages on the community for separate vendors.   The tabs on the page are reading the main visited link causing them to be red,  how can I override the CSS for these four separate Category pages?    In one case the OEM background for the active tab is red rendering it invisible.

I've got some one page CSS and JS running the tabs for the main component but haven't figured our to over-ride the master template.

 

1.   https://community.brocade.com/t5/OEM-Lenovo-Brocade-Resource-Page/ct-p/OEM-Lenovo-Brocade-Resource-Page  - temporarily turned off the active red tab so the site is usable. 

2.   https://community.brocade.com/t5/OEM-HPE-Brocade-Resource-Page/ct-p/OEM-HPE-Brocade-Resource-Page

 

It's probably obvious, but I'm having a tough time.

  • jasondmcclellan's avatar
    jasondmcclellan
    8 years ago

    Thank you - the exact work around I was looking for. Cheers ~jm

  • TariqHussain's avatar
    TariqHussain
    Boss
    8 years ago

    jasondmcclellan - 

     

    You can create a custom component and add this to CategoryPage.  Inside the component,  you can do like below.

     

     

    <#if coreNode.id = 'category1-id' || coreNode.id = 'category2-id' || coreNode.id = 'category3-id' || coreNode.id = 'category4-id' >
  <style>
         #tabs-container .current > a:hover {
            color: #000;
         }
      </style>
</#if>

     The above CSS will only render on the four pages which you have created, it will not affect any other page.  You will need to update these id's (category-1id, caetgory2-id ,...) from your community structure. 

     

    • jasondmcclellan's avatar
      jasondmcclellan
      Advisor
      8 years ago

      Thank you - the exact work around I was looking for. Cheers ~jm

  • peterlu's avatar
    peterlu
    Champion
    8 years ago
    jasondmcclellan I suggest you keep CSS out from the freemarker code, and put CSS in skin CSS section for better management.

    You can write Freemarker to print ${codeNode.id} to the html class name. Then you can style this class in CSS/SCSS section.
    eg. class="lia-custom-corenode-${coreNode.id}"