Forum Discussion

skylinegtr's avatar
10 years ago

Custom Header Question

Need help with custom header. Thanks!

 

Component.png

  • skylinegtr - Great question and one everyone is interested in these days because of design changes and needs. This can be achieved in different ways, but in any case, this requires you to make some customization. You can leverage the custom components/ custom contents to achieve this.

     

    One such case would be: 

     

    Create a custom component and place this in the header in page tab in studio. You'd then need to make your way through using REST APIs to fetch these details such as Total posts, total users etc. (or check out if there are OOTB components available for this, which I doubt. Add these to your custom component if they do exist).

     

    Then using the Context Objects, or again an OOTB Lithium element, which is called common.widget.page-title, add this to your custom component, knit all this together with CSS and HTML and there you go, your very own custom header. You could scale it however you like to. 

     

    You can even have different hero images based on this, here is one such example of this implementaion, http://community.opentable.com/ we are handling it using Custom Components + Custom Contents so we could update it on the fly. 

     

    Here is another post similar to yours. I hope this helps.

2 Replies

  • skylinegtr - Great question and one everyone is interested in these days because of design changes and needs. This can be achieved in different ways, but in any case, this requires you to make some customization. You can leverage the custom components/ custom contents to achieve this.

     

    One such case would be: 

     

    Create a custom component and place this in the header in page tab in studio. You'd then need to make your way through using REST APIs to fetch these details such as Total posts, total users etc. (or check out if there are OOTB components available for this, which I doubt. Add these to your custom component if they do exist).

     

    Then using the Context Objects, or again an OOTB Lithium element, which is called common.widget.page-title, add this to your custom component, knit all this together with CSS and HTML and there you go, your very own custom header. You could scale it however you like to. 

     

    You can even have different hero images based on this, here is one such example of this implementaion, http://community.opentable.com/ we are handling it using Custom Components + Custom Contents so we could update it on the fly. 

     

    Here is another post similar to yours. I hope this helps.