Forum Discussion

brentcam's avatar
brentcam
Adept
7 months ago

Change header logo link?

Where would I change the href in the header logo link? I cannot find anywhere to edit this code. Currently it defaults to "/" but i'd like it to point elsewhere:

 

 

<div class="custom-community-header-logo">
    <h1>
        <a href="/" style="background: url('<logo-image>') no-repeat 50% / contain;"></a>
    </h1>
</div>

 

 

 

  • luk's avatar
    luk
    7 months ago

    You're welcome. Hm, afaik theme-lib stuff is basically customizations that professional services "install" when they do customer work. But I have seen it mostly as an imported macro like theme-lib.common-functions or something like that. But if they are custom components you could also just ask support to make sure you can see them in Studio.

    On the other hand, the specific component you are talking about is so simple I wouldn't even bother modifying the original one (which you could by @override'ing it) but simply make your own with those few lines of HTML and then replace it in the quilt.

    If you know (or are worried) that you would have to change many quilts to replace such a global component, the @override approach is what I would go for, you'd basically create a new component in studio with the same name and that suffix, e.g. 

    theme-lib.community-header-logo@override 

    then you just paste in your own changed HTML and you are good to go, no need to replace anything in any quilt.

    Technically if you wanted to also access or use the original component's output somehow you can use the <@delegate /> directive of FreeMarker to get that within an overridden component. But in your case I don't think that is needed.

  • AbhishekIlindra's avatar
    AbhishekIlindra
    Boss
    7 months ago

    Hi brentcam 

     

    In the below syntax <a href="/"> replace / with your link and it will be solve your issue

     

    If you appreciate my efforts, please give me a kudos
    and Accept as solution to help others find it faster.

    • brentcam's avatar
      brentcam
      Adept
      7 months ago

      Yes, but where do I put that syntax? I can't find anywhere to adjust this in Studio

  • luk's avatar
    luk
    Boss
    7 months ago

    You're welcome. Hm, afaik theme-lib stuff is basically customizations that professional services "install" when they do customer work. But I have seen it mostly as an imported macro like theme-lib.common-functions or something like that. But if they are custom components you could also just ask support to make sure you can see them in Studio.

    On the other hand, the specific component you are talking about is so simple I wouldn't even bother modifying the original one (which you could by @override'ing it) but simply make your own with those few lines of HTML and then replace it in the quilt.

    If you know (or are worried) that you would have to change many quilts to replace such a global component, the @override approach is what I would go for, you'd basically create a new component in studio with the same name and that suffix, e.g. 

    theme-lib.community-header-logo@override 

    then you just paste in your own changed HTML and you are good to go, no need to replace anything in any quilt.

    Technically if you wanted to also access or use the original component's output somehow you can use the <@delegate /> directive of FreeMarker to get that within an overridden component. But in your case I don't think that is needed.

  • kkritika's avatar
    kkritika
    Mentor
    7 months ago

    Hi brentcam 

    The code that you shared seems to be custom one, so you need to go through the components for fixing the same. In case, you cannot find it in the components, the possibility can be in the wrapper.  Please let me know if you need further help. 

     

    • brentcam's avatar
      brentcam
      Adept
      7 months ago

      When I go to Page and expand the custom components, there are many, but when i go to the Components tab to try to edit them, there are only a few listed, and the header isn't among them- is this a permissions issue? I also do not see it anywhere in the Wrapper

  • luk's avatar
    luk
    Boss
    7 months ago

    There's a couple of possibilities:

    1) Custom components were uploaded as an SDK plugin by professional services (who uses tools not available to us "pleb" devs) and thus you can't see them in Studio > Components, except you first export the entire plugin via SDK and the submit it yourself.

    2) It's not a custom component at all, but a Custom Content, found in Admin > Content > Custom Content, I would probably start looking at community level (top level node) as CC's are inherited downwards. There's a dropdown where you can select the custom content you want to edit/view, so you might have to go trough a bunch (focus on the ones that say "has content") to find the one with the header code in it.

    Another way to try and figure it out is to go to Studio > Page and select one that is used, most likely you will see a clickable "Header" (nested quilt), click on that and that will lead you to the global header components. Based on that you might be able to find out what component/custom conent exactly it is or what it's name is. Maybe you have to switch to XML view (top right switch) to get the full details.

    • brentcam's avatar
      brentcam
      Adept
      7 months ago

      Thank you, this was super helpful! I do see it in Studio > Page as "theme-lib.community-header-logo". XML view doesn't offer much:

      <quilt layout="custom-community-header" nestable="false" disableTopCssClass="false">
  <add to="feedback">
    <component id="common.widget.page-information"/>
    <component id="common.widget.page-feedback"/>
  </add>
  <add to="header-navigation-content">
    <component id="theme-lib.community-header-navigation-v3" depth="3" communityLink="false"/>
  </add>
  <add to="header-bottom-content">
    <component id="common.widget.breadcrumb"/>
    <component id="community.widget.page-options"/>
  </add>
  <add to="header-hero-content">
    <component id="theme-lib.hero-image"/>
    <component id="common.widget.search-form" wrapper="header-hero-wrapper" defaultToCommunity="true" useClearSearchButton="false" showAdvancedSearchLink="false" hideGranularity="false"/>
  </add>
  <add to="header-top-content">
    <component id="common.widget.slide-out-nav-menu" wrapper="custom-community-header-left"/>
    <component id="theme-lib.community-header-logo" wrapper="custom-community-header-left"/>
    <component id="theme-lib.community-header-user-navigation" wrapper="custom-community-header-right"/>
  </add>
</quilt>

      Looks like i'll need to explore the SDK plugin route. Thank you!