Hi! is there a way that when a user clicks a box based on the office you can direct them to a specific url?
Hi @Jeniffer_Rivera,
Just to clarify, do I understand correctly that you want to open a specific link in the browser when clicking on a title or employee photo, instead of displaying the tooltip menu?
@a.cox , yes. that is correct.
Hi @Jeniffer_Rivera,
You can use the following HTML code in your Box template to do that:
For Photo:
{{#if CustomURL}}
<a href={{CustomURL}} target='blank'>
{{safeImage PhotoUrl}}
</a>
{{else}}
{{#detailsTooltipLink}}
{{safeImage PhotoUrl}}
{{/detailsTooltipLink}}
{{/if}}
For Title:
{{#if CustomURL}}
<a href={{CustomURL}} target='blank'>
{{Title}}
</a>
{{else}}
{{#detailsTooltipLink}}
{{Title}}
{{/detailsTooltipLink}}
{{/if}}
In my code, I use a column called CustomURL to set the link. You can use any other column name you want.
@a.cox , i did try this. but it makes the picture disappear.
Hi @Jeniffer_Rivera,
Sorry, please try the following:
For Photo:
{{#if CustomURL}}
<a href={{CustomURL}} target='blank'>
{{safeImage PhotoUrl}}
</a>
{{else}}
{{#detailsTooltipLink}}
{{safeImage PhotoUrl}}
{{/detailsTooltipLink}}
{{/if}}
For Title:
{{#if CustomURL}}
<a href={{CustomURL}} target='blank'>
{{Title}}
</a>
{{else}}
{{#detailsTooltipLink}}
{{Title}}
{{/detailsTooltipLink}}
{{/if}}
@a.cox thank you so much! now how can i force the text to be white? it seems that the statement is now overriding the style i had for the box.
Hi @Jeniffer_Rivera,
Could you please share the style you have applied to the text? I've tried to reproduce this on my end, but the code doesn't seem to override the styles for the box for me.
@a.cox sure thing, this is what i have in the CSS Custom Code Section:
/Example: Change background color for all boxes/
/*
.poch-group-item__card {
background-color: moccasin !important;
border-left-color: orange !important;
}
/
/ Set the background color of the Deputy Box header to white */
.Deputy-header{
color: #FFFFFF !important;
text: #FFFFFF !important;
a, a:hover, a:active, a:visited { color: white !important;
}
.Deputy-box, .Deputy-search-result {
background-color: #063970 !important;
color: #FFFFFF !important;
text: #FFFFFF !important;}
.MGR2-header{
color: #FFFFFF !important;
a, a:hover, a:active, a:visited { color: white !important;
}
/set background color for box with the MGR Level 2 Box/
.MGR2-box, .MGR2-search-result {
background-color: #1e81b0 !important;
color: #FFFFFF !important;}
/set background color for box with the MGR level 1 Box/
.MGR1-box, .MGR1-search-result {
background-color: #76b5c5 !important;
color: #FFFFFF !important;
a, a:hover, a:active, a:visited { color: white !important;}
/set background color for box with the Detail Box/
.Detail-box, .Detail-search-result{
background-color: #ffec8b !important;}
/* Make all cards rounded*/
.poch-group-item__card {
height: auto !important;
width: auto !important;
border-radius: 20px!important;
}{ a, a:hover, a:active, a:visited { color: white !important; }
/*Makes all header boxes white
.poch-application-container .poch-content_skin_Modern .poch-group-item__card.box .poch-box__header{
color: #FFFFFF !important;
}
*/
Here is how the Header looks after I applied the previous code for the custom url:
Hi @Jeniffer_Rivera,
There are some syntax errors in your CSS. Please try using the following CSS:
/*Example: Change background color for all boxes*/
/*
.poch-group-item__card {
background-color: moccasin !important;
border-left-color: orange !important;
}
*/
/* Set the background color of the Deputy Box header to white */
.Deputy-header {
color: #FFFFFF !important;
text: #FFFFFF !important;
}
.Deputy-box, .Deputy-search-result {
background-color: #063970 !important;
color: #FFFFFF !important;
text: #FFFFFF !important;
}
.MGR2-header {
color: #FFFFFF !important;
}
/* set background color for box with the MGR Level 2 Box */
.MGR2-box, .MGR2-search-result {
background-color: #1e81b0 !important;
color: #FFFFFF !important;
}
/* set background color for box with the MGR level 1 Box */
.MGR1-box, .MGR1-search-result {
background-color: #76b5c5 !important;
color: #FFFFFF !important;
}
/* set background color for box with the Detail Box */
.Detail-box, .Detail-search-result {
background-color: #ffec8b !important;
}
/* Make all cards rounded */
.poch-group-item__card {
height: auto !important;
width: auto !important;
border-radius: 20px!important;
}
a, a:hover, a:active, a:visited { color: white !important; }
/* Makes all header boxes white */
.poch-box__tooltip-link {
color: #FFFFFF !important;
}
@a.cox ,
i got rid of all my CSS and even when not having CSS the header were still dark.
i kept on tweaking and now i have this as the CSS Code:
/Example: Change background color for all boxes/
/*
.poch-group-item__card {
background-color: moccasin !important;
border-left-color: orange !important;
}
*/
.poch-application-container .poch-content_skin_Modern .poch-group-item__card.box a {
color: #FFFFFF !important;
}a, a:hover, a:visited {
color: #FFFFFF !important}
}
//Makes all header boxes white
.poch-application-container .poch-content_skin_Modern .poch-group-item__card.box .poch-box__header{
color: #FFFFFF !important;
}.poch-application__webpart.poch-webpart{
a, a:hover, a:visited {
color: #FFFFFF !important;
}
}.poch-application-container .poch-group-item_formatted[data-v-41da17a9] .poch-group-item__card.box a {
/* color: var(--e3ccaae4) !important; /
color: #FFFFFF !important;
}
.poch-application-container .poch-group-item_formatted[data-v-41da17a9] .poch-group-item__card.box a {
/ color: var(--e3ccaae4)!important; */
}
And now although the Headers in the boxes are white, I do see specifically on the Edge Browser, that links on the SharePoint Global Navigation are now White and the Plumsail icons for Layouts and More are now also White making them "invisible" for users.
any thoughts?
Hi @Jeniffer_Rivera,
The following CSS should be enough to make all headers white:
/* Makes all header boxes white */
.poch-box__tooltip-link, .poch-box__tooltip-link:hover {
color: white !important;
}
Your CSS has global styles that change the color of all hyperlinks on the page. Layout and More are links as well, so they're white as well.
Feel free to remove the following:
a, a:hover, a:visited {
color: #FFFFFF !important
}
.poch-application__webpart.poch-webpart{
a, a:hover, a:visited {
color: #FFFFFF !important;
}
}
@a.cox i ended up going to the design rules and updated the Link rule to be white
1 Like
@a.cox is there a possibility to have the whole box be clickable and not just the header?
@Jeniffer_Rivera sure, you can do that by wrapping box template in the <a> tag:
{{#if CustomURL}}
<a href={{CustomURL}} target='blank'>
<div class="poch-box media">
{{#if PhotoUrl}}
<div class="poch-box__photo-container poch-photo-container is-medium media-left">
{{safeImage PhotoUrl}}
</div>
{{/if}}
<div class="poch-box__content media-content">
<div class="poch-box__fields-container content">
<div class="poch-box__field poch-box__header">
{{Title}}
</div>
<div class="poch-box__field">
{{JobTitle}}
</div>
<div class="poch-box__field">
{{Department}}
</div>
</div>
</div>
</div>
{{subordinatesCount pochContext.needSubordinatesCount}}
{{boxLevelNumber pochContext.boxLevelNumber}}
</a>
{{else}}
{{#detailsTooltipLink}}
<div class="poch-box media">
{{#if PhotoUrl}}
<div class="poch-box__photo-container poch-photo-container is-medium media-left">
{{safeImage PhotoUrl}}
</div>
{{/if}}
<div class="poch-box__content media-content">
<div class="poch-box__fields-container content">
<div class="poch-box__field poch-box__header">
{{Title}}
</div>
<div class="poch-box__field">
{{JobTitle}}
</div>
<div class="poch-box__field">
{{Department}}
</div>
</div>
</div>
</div>
{{subordinatesCount pochContext.needSubordinatesCount}}
{{boxLevelNumber pochContext.boxLevelNumber}}
{{/detailsTooltipLink}}
{{/if}}
1 Like