Skip to:

Skip to Main Content
ClickHelp Technical Support

3

ClickHelp Technical Support
ClickHelp Technical Support
SUPPORT-18357
Clickhelp Custom Homepage Design

rajshekhar.banerjee raised this on 29/Jan/26 06:41

Show details
Activity

Show 5 more

Automatic response
25/Feb/26 08:18
Your request status has changed to Waiting for support.

Daria Nemchenko
03/Mar/26 07:14
Hi Rajshekhar,

Thank you for providing the details.

After reviewing the situation, I regret to inform you that it is not possible to revert your home page draft to a previous state. This is because backups of the portals are retained for only five days, and the sandbox portal where your branding was originally created is no longer accessible.

When changes are made to a home page draft (for example, switching templates, toggling between the Legacy Editor and Block Editor) they cannot be undone. As you may have noticed, a notification is displayed during such actions, warning that all custom content and styles will be replaced. Unfortunately, this means that the only course of action at this point is to recreate the draft. To assist you with this process, I’ve outlined the steps below:

Open your home page editor and add the styles from styles.css  to the Additional CSS tab.

Save the changes. 

Switch back to the Content Editor.

Locate the Hero banner and click the six-dots button to edit the block. In the menu that appears, select Background and insert the following color code: #4a060600.

A1MIqChSih.png
Add a Custom HTML block after the Publication list block:

Click the plus button to the left of the Publication list block and select Custom HTML.

J13LxZPLas.png
In the newly created block, click Edit Custom HTML, delete the example markup, and insert the following code:

<div class="glossary-section-container">
  <div class="glossary-section">
    <div class="glossary-left">
      <h2 class="glossary-title">
        Product Concept Glossary
      </h2>
    </div>
    <div class="glossary-right">
      <a href="/articles/#!cyber-information-space/what-is-ndr" class="glossary-item">
        <span>What is NDR?</span>
        <img src="/resources/Storage/Branding/Arrow Right.svg" alt="Arrow"/>
      </a>
      <a href="/articles/#!cyber-information-space/what-is-nf" class="glossary-item">
        <span>What is NF?</span>
        <img src="/resources/Storage/Branding/Arrow Right.svg" alt="Arrow"/>
      </a>
      <a href="/articles/#!cyber-information-space/what-is-ndr-nf" class="glossary-item">
        <span>What is NDR Pro?</span>
        <img src="/resources/Storage/Branding/Arrow Right.svg" alt="Arrow"/>
      </a>
      <a href="/articles/#!cyber-information-space/alerts-for-network-troubleshooting" class="glossary-item">
        <span>Alerts for Incident Response?</span>
        <img src="/resources/Storage/Branding/Arrow Right.svg" alt="Arrow"/>
      </a>
    </div>
  </div>
</div>
Add another Custom HTML block below the previous one and insert the following code:

<div class="video-section-container">
  <h2>
    What’s buzzing in Vehere!
  </h2>
  <div class="video-container">
    <div class="video-left-content">
      <h3>
        Vehere @FINSEC Conclave 2024
      </h3>
      <p class="video-description">
        Vehere shines at FINSEC 2024! Our presence at the FINSEC Conclave in Mumbai was truly memorable, filled with
        dynamic energy. With esteemed guests joining us, we forged lasting memories. Excited for the future, let's
        embark on this cybersecurity journey together!
      </p>
      <a href="#" class="video-description-btn">
        Read more
      </a>
    </div>
    <div class="video-right-content">
      <iframe title="WYSIWYG Editor: Overview and Topic Links" class="video" src="https://youtu.be/VzB0s8reIXA?si=QjlkEc0iMeoPVbDU" frameborder="0" allowfullscreen="">
      </iframe>
    </div>
  </div>
</div>
Add one more Custom HTML block below the previous one and insert the following code:

 <div class="footer-container">
  <div class="footer-content footer-links">
    <a href="https://vehere.com/corporate-social-responsibility/" class="footer-link">Corporate Social Responsibility</a>
    <a href="https://vehere.com/privacy-policy/" class="footer-link">Privacy Policy</a>
  </div>
  <div class="footer-content footer-social-links">
    <a href="#" class="footer-social-link">
      <img src="/resources/Storage/Branding/Twitter.svg" alt="Twitter"/>
    </a>
    <a href="#" class="footer-social-link">
      <img src="/resources/Storage/Branding/Medium.svg" alt="Medium"/>
    </a>
    <a href="#" class="footer-social-link">
      <img src="/resources/Storage/Branding/LinkedIn.svg" alt="LinkedIn"/>
    </a>
  </div>
  <div class="footer-content footer-rights">
    © 2026 Vehere Technologies All rights reserved.
  </div>
</div>
Finally, delete the default home page footer at the bottom of the page. Click the six-dots button to the left of the footer block and select Delete.

oLbgYJcw7g.png
Once all changes have been made, click Preview Draft to review the page. You may need to perform a hard refresh (Ctrl + F5) to see the updates.

If you have further questions, please let me know.


Automatic response
03/Mar/26 07:14
Your request status has changed to Waiting for customer.


Add a comment
Status
Waiting for customer

Notifications off

Resolve Issue
Request type

Technical Support
Shared with

rajshekhar.banerjee
Creator
Powered by  Jira Service Management

styles.css
css · 15 KB

��	/* --- App layout changes: hide search box in app header --- */

	.Home_page .BaseMaster_searchBoxContainer {
	display: none;
	}

	.Home_page .BaseMaster_contentContainer {
	height: auto !important;
	}


	/* --- App layout changes end --- */

	.Home_page .BaseMaster_mainMenuContainer {
	background: transparent;
	border-bottom: 0 none;
	}

	.Home_page .CHHamburger_container span::before,
	.Home_page .CHHamburger_container span,
	.Home_page .CHHamburger_container span::after,
	.Home_page .CHHamburger_container:hover span::before,
	.Home_page .CHHamburger_container:hover span,
	.Home_page .CHHamburger_container:hover span::after,
	.Home_page .CHHamburger_container-htla.isActive span,
	.Home_page .CHHamburger_container-htla.isActive span::before,
	.Home_page .CHHamburger_container-htla.isActive span::after {
	background-color: white;
	}

	div.BaseMaster_mainMenuContainer .CHMenu_menuItem>a,
	div.BaseMaster_mainMenuContainer .CHMenu_menuItem:hover>a,
	div.BaseMaster_mainMenuContainer .BaseMaster_profileLink,
	div.BaseMaster_mainMenuContainer .BaseMaster_profileLink:hover {
	color: white;
	}


	/* latin-ext */

	@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/Fcx7Wwv8OzT71A3E1XOAjvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
	unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
	}


	/* latin */

	@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
	}

	.Home_page body {
	background: #141420;
	}

	.Home_customContent {
	color: #ffffff;
	padding-block-start: 0;
	padding-inline-end: 0;
	padding-block-end: 0;
	padding-inline-start: 0;
	margin-block-start: 0;
	margin-inline-end: 0;
	margin-block-end: 0;
	margin-inline-start: 0;
	font-family: 'Roboto', sans-serif;
	text-align: center;
  font-size: initial;
	}

	.Home_customContent a,
	.Home_customContent a:visited,
	.Home_customContent a:active {
	color: #ffffff;
	transition: color .3s ease-out;
	text-decoration: none;
	}

	.Home_customContent a:hover {
	color: #bf2228;
	transition: color .3s ease-out;
	}

	h1 {
	font-family: 'Roboto', sans-serif;
	color: white;
	font-size: 3em;
	margin-block-start: 0;
	margin-inline-end: 0;
	margin-block-end: 0;
	margin-inline-start: 0;
	padding-bottom: 30px;
	}

	h2 {
	font-family: 'Roboto', sans-serif;
	font-size: 2.5em;
	margin-block-start: 0;
	margin-inline-end: 0;
	margin-block-end: 0;
	margin-inline-start: 0;
	padding-block-start: 20px;
	padding-inline-end: 0;
	padding-block-end: 20px;
	padding-inline-start: 0;
	;
	}

	.fixedWidth {
	max-width: 1170px;
	margin-block-start: auto;
	margin-inline-end: auto;
	margin-block-end: auto;
	margin-inline-start: auto;
	;
	}

	.background {
	position: absolute;
	background: url('/resources/Storage/Templates/Themes/stardust-back.jpg') no-repeat center center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	z-index: -1;
	top: 0;
	height: 1200px;
	width: 100%;
	}

	.searchContainer {
	padding-top: 30px;
	padding-bottom: 60px;
	padding-inline-start: 20px;
	padding-inline-end: 20px;
	}

	.searchCenteringContainer {
	max-width: 800px;
	margin-block-start: auto;
	margin-inline-end: auto;
	margin-block-end: auto;
	margin-inline-start: auto;
	display: flex;
	}

	.searchCenteringContainer:after {
	content: "";
	display: block;
	clear: both;
	}

	.searchBox {
	font-size: 1em;
	width: 99%;
	padding-block-start: 10px;
	padding-inline-end: 10px;
	padding-block-end: 10px;
	padding-inline-start: 10px;
	background: white;
	border: 0 none;
	height: 20px;
	}

	.btnSearch {
	background-color: #BF2228;
	transition: background-color .3s ease-out;
	cursor: pointer;
	}

	.btnSearch i {
	font-size: 1em;
	padding-block-start: 11px;
	padding-inline-end: 20px;
	padding-block-end: 11px;
	padding-inline-start: 20px;
	color: white;
	}

	.btnSearch:hover {
	background-color: #BF2228;
	}

	.searchBoxContainer {
	overflow: hidden;
	padding-inline-end: 20px;
	flex: 1;
	}

	.navContainer {
	
	padding-bottom: 0px;
	}

	.nav2ColOuter {
	padding-bottom: 25px;
	}

	.video {
	width: 100%;
	max-width: 520px;
	height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: right;
  padding: 0px;
}

	.rectangle-list {
	list-style-type: none;
	margin-block-start: 0;
	margin-inline-end: 0;
	margin-block-end: 0;
	margin-inline-start: 0;
	text-align: start;
	font-size: 1.5em;
	padding-inline-end: 20px;
	padding-inline-start: 40px;
	;
	}

	.pubItem {
	margin-bottom: 15px;
	}

	.Home_customContent .rectangle-list a {
	position: relative;
	display: block;
	padding-block-start: 12px;
	padding-inline-end: 12px;
	padding-block-end: 12px;
	padding-inline-start: 12px;
	background: #dddddd61;
	color: #ffffff;
	text-decoration: none;
	transition: all .3s ease-out;
	}

	.rectangle-list a:hover {
	background: #eee;
	color: #bf2228;
	}

	.rectangle-list a:after {
	position: absolute;
	content: '';
	border: .5em solid transparent;
	inset-inline-start: -1.5em;
	top: 50%;
	margin-top: -.5em;
	transition: all .3s ease-out;
	}

	.rectangle-list a:hover:after {
	inset-inline-start: -.7em;
	border-inline-start-color: #757575;
	}

	.gettingStarted {
	}

	.linksList {
	margin-block-start: 0;
	margin-inline-end: 0;
	margin-block-end: 0;
	margin-inline-start: 0;
	padding-top: 10px;
	padding-bottom: 10px;
	list-style-image: url('/resources/Storage/Templates/Themes/stardust-bullet.png ');
	}

	.linksList a {
	padding-block-start: 5px;
	padding-inline-end: 5px;
	padding-block-end: 5px;
	padding-inline-start: 5px;
	display: inline-block;
	vertical-align: middle;
	}

	.linksList li {
	padding-block-start: 5px;
	padding-inline-end: 0;
	padding-block-end: 5px;
	padding-inline-start: 0;
	text-align: start;
	font-size: 1.2em;
	}

	.footer {
	color: #ffffff;
	font-size: 1.4em;
	padding-bottom: 30px;
	line-height: 45px;
	}

	.contactInfo {
	white-space: nowrap;
	}


	/* --- Responsive Styles --- */

	.nav2ColOuter {
	/* Two columns per screen, default */
	float: left;
	width: 50%;
	}


	/* Phone to portrait tablet */

	@media (max-width: 767px) {
	.nav2ColOuter {
	/* One column per screen */
	width: 100%;
	padding-bottom: 0;
	}
	.background {
	background-image: none;
	}
	.rectangle-list {
	padding-block-start: 0;
	padding-inline-end: 0;
	padding-block-end: 0;
	padding-inline-start: 0;
	}
	.linksList {
	padding-top: 0;
	padding-bottom: 0;
	}
	.searchContainer {
	height: auto;
	padding-block-start: 20px;
	padding-inline-end: 20px;
	padding-block-end: 20px;
	padding-inline-start: 20px;
	padding-bottom: 30px;
	background-image: none;
	}
	.footer {
	text-align: center;
	}
	.followUs {
	padding-top: 20px;
	float: none;
	}
	}

	@media (max-width: 979px) {
	.searchCenteringContainer {
	width: auto;
	max-width: none;
	}
	}

	@media (max-width: 1200px) {
	.fixedWidth {
	max-width: none;
	padding-inline-start: 20px;
	padding-inline-end: 20px;
	}
	}


	/* --- Right to left styles --- */

	.rtl .nav2ColOuter {
	float: right;
	}
.background{background-image: url('/resources/Storage/Branding/Background_image%202.png') !important;}.backgroundGlass{background:rgba(255,255,255,.7) !important;}


#pnlBaseMasterContainer {
  height:auto !important;
}

/* ==========================================================================
   Product Concept Glossary Custom Design & Animations
   ========================================================================== */

/* ==========================================================================
   PREMIUM Product Concept Glossary Design & Smooth Animations
   ========================================================================== */

/* Main Container */
.glossary-section-container {
  width: 100%;
  max-width: 1170px;
  margin: 60px auto;
  box-sizing: border-box;
}

/* Flex Layout */
.glossary-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
  padding: 20px 0;
}

/* --- Left Column: Enhanced Title --- */
.glossary-left {
  flex: 1;
}

.glossary-title {
  font-size: 2.8em;
  font-weight: 700;
  margin: 0;
  text-align: left;
  /* Premium Metallic/Gradient Text Effect */
  background: linear-gradient(135deg, #ffffff 0%, #a0a0a0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
}

/* --- Right Column: Glassmorphism Card --- */
.glossary-right {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  /* Glass effect */
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); /* Deep shadow for depth */
  overflow: hidden;
}

/* --- Individual Link Items --- */
.glossary-item {
  position: relative; /* Required for the advanced animations */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 30px;
  color: #b0b0b0;
  text-decoration: none !important;
  font-size: 1.25em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  /* Super smooth cubic-bezier transition for base elements */
  transition: background 0.4s ease;
}

.glossary-item:last-child {
  border-bottom: none;
}

/* Ensure text and arrow stay ABOVE the background animations */
.glossary-item span, 
.glossary-item img {
  position: relative;
  z-index: 2;
  /* Hardware accelerated transform for buttery smooth sliding */
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), color 0.4s ease, opacity 0.4s ease;
}

.glossary-item img {
  width: 22px;
  height: 22px;
  opacity: 0.4;
}

/* --- THE MAGIC (Advanced Hover Animations) --- */

/* 1. The Vehere Brand Red Accent Line */
.glossary-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
  background-color: #bf2228; /* Your portal's brand red */
  transform: scaleY(0); /* Hidden by default */
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  z-index: 3;
}

/* 2. The Sweeping Background Gradient */
.glossary-item::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, rgba(191, 34, 40, 0.08) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

/* --- Triggering the Animations on Hover --- */

.glossary-item:hover {
  background: rgba(255, 255, 255, 0.04); /* Slight global lighten */
}

.glossary-item:hover::before {
  transform: scaleY(1); /* Red line grows from the center */
}

.glossary-item:hover::after {
  opacity: 1; /* Red glowing gradient fades in */
}

.glossary-item:hover span {
  color: #ffffff; /* Text pops to bright white */
  transform: translateX(12px); /* Text smoothly glides to the right */
}

.glossary-item:hover img {
  opacity: 1; /* Arrow pops to full visibility */
  transform: translateX(-4px) scale(1.1); /* Arrow slightly bounces left and grows */
}

/* --- Responsive Design --- */
@media (max-width: 900px) {
  .glossary-section {
    flex-direction: column;
    padding: 20px;
    gap: 30px;
  }
  
  .glossary-left, .glossary-right {
    width: 100%;
  }

  .glossary-title {
    text-align: center;
    font-size: 2.2em;
  }
}.CHBlock_richTextContent, .CHBlock_container * {font-family: 'Segoe UI',Frutiger,'Frutiger Linotype','Dejavu Sans','Helvetica Neue',Arial,sans-serif;}