Content Upskill 08/06/23

Below are the questions and answers posted in either video or a write up. Check out the question title to see the relevance of your query and of course, please review any additional topic sections that you feel may benefit you.

Q1) Tricky CSS questions. Sometimes I work with a developer that adds CSS to their stylesheet but they notice it does not change how the website appears. This is often because of other stylesheets linked to the page. These stylesheets can be tricky to find so any tips on that would be appreciated!

When the customer is actively working with a developer or has previously worked with a developer to create custom coded templates and included additional stylesheets, this can often be outside the scope of support but is still beneficial to be able to guide the customer to where these changes have been made and why their changes may not be applied. With CSS, and particularly when working in a CMS, there is a hierarchy of rules which determine what style should be applied. This is what can cause the page to display differently to what you or a customer has applied as another style rule is overwriting your changes because it is seen as more important. 

The following video, will give a run through where there several different stylesheets applied to one template to show how they affect the page and also how to go about finding them within both the templates and design manager. 

Q2) Adding CSS for mobile responsiveness

HubSpot built content is already mobile friendly and responsive but there will still be cases where customers are looking to add custom code to make a custom module or marketplace theme module responsive to mobile or other screen sizes. Whilst this is not within the scope of support, we can offer guidance on this.

My first go to will be explaining that HubSpot content is built mobile responsive but also sharing this Knowledge Base Article on how to Customize drag and drop content on mobile devices. 

This article explains that with HubSpot modules, there is an additional toggle for modules, where we can apply additional styling, only based on mobile devices. This is often where a customer may want to hide certain features on mobile because they are less user friendly on a smaller screen size and would instead replace them with a different feature/module. 

If comfortable you could give a demo for this too but I would lean towards redirecting them to an external resource like this from W3Schools 

A common request will be for something to not display and an example of that would be the following. <p> tags are used for paragraph elements and if we as an example want to change the color of all paragraphs on a mobile view we would have the following code. 

This would be the color set as standard on all devices from monitors to phones below,

p {
    color: blue;
  }

If we wanted to change the color from blue to red on any screen size less than 600px in width, we would use the following code to do that

<style>

@media only screen and (max-width: 600px) {
  p {
    background-color: red;
  }
}

</style>

As this is generally outside of scope for anything further than this, I would be happy to go through a more detailed walkthrough in a live session, so message me directly for more information on any of this above. The best next step on this, is creating a Landing Page within your own portal and within that page, adding in some additional CSS to practice the above. Be sure to include an opening and closing style tag as shown in the second example above. 

Q3) Clone templates

Cloning templates can become confusing but all that is needed to feel more comfortable with this process is doing it more. I have recorded a video of the process of cloning an entire theme along with creating child themes which is the same process as cloning templates or creating child templates so I am linking to that specific post here as opposed to creating new content for this.

As with all of the questions above, if you would like to go through this further, please feel free to message me directly and the next step, will be going in to your own design manager, selecting the Session theme and making a clone or copy of that yourself. 

Q4) Formatting of modules- Alignment (Not padding/spacing)

Formatting of modules and their alignment is dependent on the modules that are being used and what options are available to them. This will depend on whether these are HubSpot modules, custom built modules and the sections that they are put in to. Often when trying to align a module, the issue actually lies in the section it is contained in.

As with other other questions throughout this post, I have covered this topic in a another post and am linking that post here to check out the video content. 

As with any topic, you may have more specific questions after watching through the content above and if you do, please free free to reach out directly and let me know. We can also do a live session with more direct questions if preferable. 

Q5, 6 and 8) Understanding the Design Manager

How to identify quicker what, within content design, is within scope or not? For example, chatting with a customer, investigating within the design manager... being able to quickly pick up on what is HubSpot and what is custom.

Understanding when I open Design Manager, to understand what is possible to edit. Understand, is it a custom module, is it within Support scope.

As the 3 questions above all fall under the same category of the Design Manager, I have grouped them together and created the video below to hopefully give a broad overview of how to approach the design manager, what is in scope and what is out of scope, and what is created by HubSpot vs what has been custom coded or is external content from the marketplace. 

Given the topic is quite broad and it is something that a few people have questions on, a live session to go through this would be best so please feel free to reach out and let me know if you have any further questions and if you would like to do a Zoom session for more details. If a live session is not convenient, message on any other questions which have not been addressed in the video above and I will answer them in the next blog post as a follow up. 

Q7) Global modules (header/footer) in general. For example, how do I change the header/footer on one page only

With global content, the name itself hints towards the answer for this in that the content is placed globally across the entire theme and so cannot be modified on a single instance such as editing the global footer or header on one page while keeping it the same across other pages but there is a way around this. 

One  way, is if the customer is comfortable with HTML and CSS they can still add additional CSS to a particular page through the pages advanced settings targeting either the header or footer and this will only make changes on the pages where this code is added. If they are not, the process is a bit more complicated and is still generally advised to be done by a developer.

The following video runs through the secondary process for this-