php js css php js css

Changes

Changes to Design: Design #2

221043
Today 4:31am
Guevarra, Kim
Modified design
221044
Today 4:31am
Guevarra, Kim
Modified design
Can't Undo: This is the current version
Html:
Id:
16
16
Deleted Datetime:

															

														
Type:
web
web
Title:
Design #2
Design #2
Css:
.s8-navigationPrimary {
& > li {
& > a {
font-size: small;
text-transform: uppercase;
font-weight: 500;
}

&:hover {
background: transparent !important;
}

&.s8-navigationPrimaryItem--active {
& > a {
color: #d2042d;
}
}

&.s8-navigationPrimary-hasChildren {
& > a {
&::after {
border: solid #d2042d;
border-width: 0 1.5px 1.5px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
content: "";
margin-top: -7px;
margin-left: 10px;
transition: all 0.5s;
}
}

&:hover {
& > a {
&::after {
border-color: #d2042d;
margin-top: 0px;
transform: rotate(225deg);
-webkit-transform: rotate(225deg);
}
}
}
}
}

& ul {
background: #ffffff;
border-top: 0 solid #333;

& li {
& a {
color: #333333 !important;
text-transform: uppercase;
font-size: small;
position: relative;
transition: 0.2s ease;
}

&:hover,
&.s8-navigationPrimaryItem--active {
& a {
transform: translateX(10px);
}
}
}
}

& li ul li {
& a {
&:hover {
color: #d2042d !important;
}

&::after {
content: "";
position: absolute;
width: 10px;
height: 2px;
background-color: #d2042d;
left: -5px;
top: 48%;
opacity: 0;
transition: 0.2s;
}

&:hover::after {
opacity: 1;
}
}

&.s8-navigationPrimaryItem--active {
& a::after {
opacity: 1;
}
}

&.s8-navigationPrimary-hasChildren {
& > a::after {
content: "";
}
}
}

&-vertical,
&-mobileOpen {
& li.s8-navigationPrimary-hasChildren {
& > a::after {
content: "";
}
}
}
}

.s8-templates-card
{
/* Templates Cards sizes */
&.s8-templates-card__cardsize-5
{
width: 619px;
}

&.s8-templates-card__cardsize-4
{
width: 401px;
}

&.s8-templates-card__cardsize-3
{
width: 292px;
}

/* Fancybox sizes */
&.s8-templates-card__cardsize-4
{
&.s8-templates-fancybox,
&.s8-templates-teammember
{
width: 619px !important;
}
}

&.s8-templates-card__cardsize-3
{
&.s8-templates-fancybox,
&.s8-templates-teammember
{
width: 401px !important;
}
}

&.s8-templates-card__cardsize-2
{
&.s8-templates-fancybox,
&.s8-templates-teammember
{
width: 292px !important;
}
}

&[style*="box-shadow: 0px 3px 15px rgba(0,0,0,0.2)"]
{
box-shadow: 0px 2px 20px rgb(0 0 0 / 7%) !important;
}

&[style*="box-shadow"]
{
transition: .5s;

&:hover
{
transform: translateY(-5px);
}
}

hr
{
width: 40px;
border: none;
border-top: 3px solid #d1000a;
margin: 20px 0;
transition: .5s ease;
}

&:hover hr
{
width: 60px;
}

&.s8-templates-fancybox.s8-templates-fancybox-accent .s8-templates-fancybox-image
{
height: 250px;
width: 100%;
padding: unset !important;
background-repeat: no-repeat;
}

&.s8-templates-fancybox.s8-templates-fancybox-accent .s8-templates-fancybox-accent-hr
{
background-color: rgb(210 4 45);
}

&.s8-templates-teammember.s8-templates-teammember-small .s8-templates-teammember-displaypicture
{
border: 7px solid #dddddd;
}

&.s8-templates-teammember.s8-templates-teammember-small .s8-templates-teammember-contentcontainer
{
text-align: left;
align-items: flex-start;
}

&.s8-templates-teammember.s8-templates-teammember-small
{
justify-content: flex-start;
align-items: flex-start;
}

.s8-templates-teammember-content a:last-child
{
color: #000000;
opacity: .5;
}
}

footer
{
a
{
color: #333333;
}
}

form
{
button[type="submit"]
{
padding: 10px 10px !important;
min-width: 155px !important;
text-transform: capitalize;
letter-spacing: normal;
border-radius: 0px;
background: #d2042d;
color: #fff;
}

.formRow
{
padding: 10px 0 !important;

.formRowLabel
{
padding: 0;
}
}

.fieldset
{
border: 1px solid hwb(356.13deg 19.61% 19.61% / 10%);
margin-bottom: 2rem;
padding-top: 3rem;
position: relative;
padding: 3rem 2rem 1rem;
background-color: #ffffff;

h4
{
background: #d90f31;
display: inline-block;
color: #fff;
padding: 10px 3rem;
position: absolute;
top: -20px;
left: -10px;
font-weight: 500;

&:after
{
position: absolute;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 9px 5px 0;
border-color: transparent #d90f31 transparent transparent;
bottom: -5px;
left: 1px;
}
}
}

addressform .formRow.formRow2Col
{
flex-direction: column !important;
}

addressform input[type="text"],
addressform textarea
{
width: 100% !important;
}
}

.img-round
{
border-radius: 5px;
}
.s8-navigationPrimary {
& > li {
& > a {
font-size: small;
text-transform: uppercase;
font-weight: 500;
}

&:hover {
background: transparent !important;
}

&.s8-navigationPrimaryItem--active {
& > a {
color: #d2042d;
}
}

&.s8-navigationPrimary-hasChildren {
& > a {
&::after {
border: solid #d2042d;
border-width: 0 1.5px 1.5px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
content: "";
margin-top: -7px;
margin-left: 10px;
transition: all 0.5s;
}
}

&:hover {
& > a {
&::after {
border-color: #d2042d;
margin-top: 0px;
transform: rotate(225deg);
-webkit-transform: rotate(225deg);
}
}
}
}
}

& ul {
background: #ffffff;
border-top: 0 solid #333;

& li {
& a {
color: #333333 !important;
text-transform: uppercase;
font-size: small;
position: relative;
transition: 0.2s ease;
}

&:hover,
&.s8-navigationPrimaryItem--active {
& a {
transform: translateX(10px);
}
}
}
}

& li ul li {
& a {
&:hover {
color: #d2042d !important;
}

&::after {
content: "";
position: absolute;
width: 10px;
height: 2px;
background-color: #d2042d;
left: -5px;
top: 48%;
opacity: 0;
transition: 0.2s;
}

&:hover::after {
opacity: 1;
}
}

&.s8-navigationPrimaryItem--active {
& a::after {
opacity: 1;
}
}

&.s8-navigationPrimary-hasChildren {
& > a::after {
content: "";
}
}
}

&-vertical,
&-mobileOpen {
& li.s8-navigationPrimary-hasChildren {
& > a::after {
content: "";
}
}
}
}

.s8-templates-card
{
/* Templates Cards sizes */
&.s8-templates-card__cardsize-5
{
width: 619px;
}

&.s8-templates-card__cardsize-4
{
width: 401px;
}

&.s8-templates-card__cardsize-3
{
width: 292px;
}

/* Fancybox sizes */
&.s8-templates-card__cardsize-4
{
&.s8-templates-fancybox,
&.s8-templates-teammember
{
width: 619px !important;
}
}

&.s8-templates-card__cardsize-3
{
&.s8-templates-fancybox,
&.s8-templates-teammember
{
width: 401px !important;
}
}

&.s8-templates-card__cardsize-2
{
&.s8-templates-fancybox,
&.s8-templates-teammember
{
width: 292px !important;
}
}

&[style*="box-shadow: 0px 3px 15px rgba(0,0,0,0.2)"]
{
box-shadow: 0px 2px 20px rgb(0 0 0 / 7%) !important;
}

&[style*="box-shadow"]
{
transition: .5s;

&:hover
{
transform: translateY(-5px);
}
}

hr
{
width: 40px;
border: none;
border-top: 3px solid #d1000a;
margin: 20px 0;
transition: .5s ease;
}

&:hover hr
{
width: 60px;
}

&.s8-templates-fancybox.s8-templates-fancybox-accent .s8-templates-fancybox-image
{
height: 250px;
width: 100%;
padding: unset !important;
background-repeat: no-repeat;
}

&.s8-templates-fancybox.s8-templates-fancybox-accent .s8-templates-fancybox-accent-hr
{
background-color: rgb(210 4 45);
}

&.s8-templates-teammember.s8-templates-teammember-small .s8-templates-teammember-displaypicture
{
border: 7px solid #dddddd;
}

&.s8-templates-teammember.s8-templates-teammember-small .s8-templates-teammember-contentcontainer
{
text-align: left;
align-items: flex-start;
}

&.s8-templates-teammember.s8-templates-teammember-small
{
justify-content: flex-start;
align-items: flex-start;
}

.s8-templates-teammember-content a:last-child
{
color: #000000;
opacity: .5;
}
}

footer
{
a
{
color: #333333;
}
}

form
{
button[type="submit"]
{
padding: 10px 10px !important;
min-width: 155px !important;
text-transform: capitalize;
letter-spacing: normal;
border-radius: 0px;
background: #d2042d;
color: #fff;
}

.formRow
{
padding: 10px 0 !important;

.formRowLabel
{
padding: 0;
}
}

.fieldset
{
border: 1px solid hwb(356.13deg 19.61% 19.61% / 10%);
margin-bottom: 2rem;
padding-top: 3rem;
position: relative;
padding: 3rem 2rem 1rem;
background-color: #ffffff;

h4
{
background: #d90f31;
display: inline-block;
color: #fff;
padding: 10px 3rem;
position: absolute;
top: -20px;
left: -10px;
font-weight: 500;

&:after
{
position: absolute;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 9px 5px 0;
border-color: transparent #d90f31 transparent transparent;
bottom: -5px;
left: 1px;
}
}
}

addressform .formRow.formRow2Col
{
flex-direction: column !important;
}

addressform input[type="text"],
addressform textarea
{
width: 100% !important;
}
}

.img-round
{
border-radius: 5px;
}
Js:
var activeChild = document.querySelector('.s8-navigationPrimary-hasChildren .s8-navigationPrimaryItem--active');

if (activeChild) {
var parentLi = activeChild.closest('.s8-navigationPrimary-hasChildren');
if (parentLi) {
parentLi.classList.add('s8-navigationPrimaryItem--active');
}
}

document.addEventListener("DOMContentLoaded", function() {
function wrapElementWithWrapper(element, wrapperClassName) {
var wrapperDiv = document.createElement('div');
wrapperDiv.className = wrapperClassName;
wrapperDiv.appendChild(element.cloneNode(true));
element.parentNode.replaceChild(wrapperDiv, element);
}

var curve1Elements = document.querySelectorAll('[id^="curve1"]');
curve1Elements.forEach(function(curve1Element) {
wrapElementWithWrapper(curve1Element, 'curveSectionWrapper1');
});

var curve2Elements = document.querySelectorAll('[id^="curve2"]');
curve2Elements.forEach(function(curve2Element) {
wrapElementWithWrapper(curve2Element, 'curveSectionWrapper2');
});
});

document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll(".s8-templates-teammember-content").forEach(function (element) {
const fullText = element.textContent.trim();
const maxLength = 260;

if (fullText.length > maxLength) {
const truncatedText = fullText.substring(0, maxLength).trim() + "...";
element.innerHTML = `<span class="short-text">${truncatedText}</span>` +
`<span class="full-text" style="display: none;">${fullText}</span>` +
` <a href="#" class="toggle-text">See More</a>`;

const toggleLink = element.querySelector(".toggle-text");
toggleLink.addEventListener("click", function (event) {
event.preventDefault();
const shortText = element.querySelector(".short-text");
const fullTextEl = element.querySelector(".full-text");
if (shortText.style.display === "none") {
shortText.style.display = "inline";
fullTextEl.style.display = "none";
this.innerText = "See More";
} else {
shortText.style.display = "none";
fullTextEl.style.display = "inline";
this.innerText = "See Less";
}
});
}
});
});
var activeChild = document.querySelector('.s8-navigationPrimary-hasChildren .s8-navigationPrimaryItem--active');

if (activeChild) {
var parentLi = activeChild.closest('.s8-navigationPrimary-hasChildren');
if (parentLi) {
parentLi.classList.add('s8-navigationPrimaryItem--active');
}
}

document.addEventListener("DOMContentLoaded", function() {
function wrapElementWithWrapper(element, wrapperClassName) {
var wrapperDiv = document.createElement('div');
wrapperDiv.className = wrapperClassName;
wrapperDiv.appendChild(element.cloneNode(true));
element.parentNode.replaceChild(wrapperDiv, element);
}

var curve1Elements = document.querySelectorAll('[id^="curve1"]');
curve1Elements.forEach(function(curve1Element) {
wrapElementWithWrapper(curve1Element, 'curveSectionWrapper1');
});

var curve2Elements = document.querySelectorAll('[id^="curve2"]');
curve2Elements.forEach(function(curve2Element) {
wrapElementWithWrapper(curve2Element, 'curveSectionWrapper2');
});
});

document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll(".s8-templates-teammember-content").forEach(function (element) {
const fullText = element.textContent.trim();
const maxLength = 260;

if (fullText.length > maxLength) {
const truncatedText = fullText.substring(0, maxLength).trim() + "...";
element.innerHTML = `<span class="short-text">${truncatedText}</span>` +
`<span class="full-text" style="display: none;">${fullText}</span>` +
` <a href="#" class="toggle-text">See More</a>`;

const toggleLink = element.querySelector(".toggle-text");
toggleLink.addEventListener("click", function (event) {
event.preventDefault();
const shortText = element.querySelector(".short-text");
const fullTextEl = element.querySelector(".full-text");
if (shortText.style.display === "none") {
shortText.style.display = "inline";
fullTextEl.style.display = "none";
this.innerText = "See More";
} else {
shortText.style.display = "none";
fullTextEl.style.display = "inline";
this.innerText = "See Less";
}
});
}
});
});
Php Source:
<?php

function determineHeaderImages()
{
$strPage = \Components\Website\Pages::currentPageId();

while($strPage)
{
if(file_exists('media/website_pages' . $strPage . 'header-images/'))
{
$arrFiles = \Components\Website\Media::getChildren('/media/website_pages' . $strPage . 'header-images/');

if(count($arrFiles))
{
return $arrFiles;
}
}

$strPage = \Framework\Components\TextualIds::getParent($strPage);
}

return [];
}

function youMayAlsoLikeGeneral()
{
$strCurrentPageId = \Components\Website\Pages::currentPageId();

$arrNoSideNavPages = [];
$arrNoSideNavPages[] = '/community/profile/';
$arrNoSideNavPages[] = '/placement-tests/';
$arrNoSideNavPages[] = '/af/';
$arrNoSideNavPages[] = '/commerce/';
$arrNoSideNavPages[] = '/products/';
$arrNoSideNavPages[] = '/order-a-course/';


foreach($arrNoSideNavPages as $strPageId)
{
if(strpos($strCurrentPageId, $strPageId) === 0)
{
return false;
}
}

return true;
}

?>
<?php

function determineHeaderImages()
{
$strPage = \Components\Website\Pages::currentPageId();

while($strPage)
{
if(file_exists('media/website_pages' . $strPage . 'header-images/'))
{
$arrFiles = \Components\Website\Media::getChildren('/media/website_pages' . $strPage . 'header-images/');

if(count($arrFiles))
{
return $arrFiles;
}
}

$strPage = \Framework\Components\TextualIds::getParent($strPage);
}

return [];
}

function youMayAlsoLikeGeneral()
{
$strCurrentPageId = \Components\Website\Pages::currentPageId();

$arrNoSideNavPages = [];
$arrNoSideNavPages[] = '/community/profile/';
$arrNoSideNavPages[] = '/placement-tests/';
$arrNoSideNavPages[] = '/af/';
$arrNoSideNavPages[] = '/commerce/';
$arrNoSideNavPages[] = '/products/';
$arrNoSideNavPages[] = '/order-a-course/';


foreach($arrNoSideNavPages as $strPageId)
{
if(strpos($strCurrentPageId, $strPageId) === 0)
{
return false;
}
}

return true;
}

?>
Mobile Function:
none
none
Mobile Value: