Thus, I got the code I need from workable and created a custom module on hubspot, then I added this module to the page, but I don't see anything on the page 😕
Below I've written up a little CSS for this section. I have proivided all the classes you would need and ensured that they are names spaced / scoped to the parent element so any modification here will not mess up anything else on the site.
Paste this into the CSS section and modify as needed!
#whr_embed_hook {
max-width: 768px;
margin: auto; /* center the layout*/
text-align: center; /* text alignment */
padding: 0 1em; /* added some padding to prevent any mobile issues */
}
#whr_embed_hook .whr-group { /* This is the group title - ie "sales" "hr" etc */
font-size: 2em;
font-weight: 500;
padding-bottom: 0.25em;
color: black;
text-align: center;
border-bottom: 1px solid #006580;
}
#whr_embed_hook .whr-items .whr-item { /* Job Posting Item Parent */
margin-bottom: 2em;
}
#whr_embed_hook .whr-items .whr-item h3.whr-title { /* Item Titles */
font-size: 1.25em;
margin: 0;
}
#whr_embed_hook .whr-items .whr-item h3.whr-title a:hover { /* Item Titles Hover State */
color: #6cc616;;
}
#whr_embed_hook .whr-items .whr-item ul.whr-info .whr-location { /* Location text */
font-size: 1em;
color: #65696d;
}
#whr_embed_hook .whr-items .whr-item ul.whr-info .whr-date { /* Creation Date Text */
font-size: 0.75em;
color: #65696d;
}
Shot in the dark here, but did you happen to paste the Workable JS script tages into the JS sections of the custom module you built rather than the html section?
@Kevin-CTo give you more information, for this custom module, basically I just added the workable code to the JS section, and I didn't do anything else. Is this the reason we don't see anything on the web page? 🙂
Yep thats the issue! A high high high level of interpretation, that JS section will provide the "<script>" tags for you. But you can ignore that statement for now…
To get this working for you as fast as possible, instead of putting the provided javascript in the JS section paste it into the html section, script tags and all. Give that a go and let us know if it get the content where you need it.
I can go further into how I tested to discover the issues and why they are issues at a later time if desired.
Below I've written up a little CSS for this section. I have proivided all the classes you would need and ensured that they are names spaced / scoped to the parent element so any modification here will not mess up anything else on the site.
Paste this into the CSS section and modify as needed!
#whr_embed_hook {
max-width: 768px;
margin: auto; /* center the layout*/
text-align: center; /* text alignment */
padding: 0 1em; /* added some padding to prevent any mobile issues */
}
#whr_embed_hook .whr-group { /* This is the group title - ie "sales" "hr" etc */
font-size: 2em;
font-weight: 500;
padding-bottom: 0.25em;
color: black;
text-align: center;
border-bottom: 1px solid #006580;
}
#whr_embed_hook .whr-items .whr-item { /* Job Posting Item Parent */
margin-bottom: 2em;
}
#whr_embed_hook .whr-items .whr-item h3.whr-title { /* Item Titles */
font-size: 1.25em;
margin: 0;
}
#whr_embed_hook .whr-items .whr-item h3.whr-title a:hover { /* Item Titles Hover State */
color: #6cc616;;
}
#whr_embed_hook .whr-items .whr-item ul.whr-info .whr-location { /* Location text */
font-size: 1em;
color: #65696d;
}
#whr_embed_hook .whr-items .whr-item ul.whr-info .whr-date { /* Creation Date Text */
font-size: 0.75em;
color: #65696d;
}