CMS Development

Hale_Soucie
Participant

Blog Page Spacing and Sizing Errors

I am trying to change the size of several fonts, spaces, and containers in a template from the HubSpot Marketplace but whenever I edit the Hubbl Texts it causes other stuff to get wonky in the page. 

 

For example, changing the title from the page to a different header size causes it to halfway drop behind the blog feed. The size changes do happen but this and similar errors are occurring all over. Is this probably just an issue with the template and I should find a new one or am I missing something?

0 Upvotes
11 Replies 11
Kevin-C
Recognized Expert | Partner
Recognized Expert | Partner

Blog Page Spacing and Sizing Errors

@Hale_Soucie 

 

Could you provide us with a few images and or live link?

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
Hale_Soucie
Participant

Blog Page Spacing and Sizing Errors

Thank you so much. Since it is a blog template, how should I link to it? I can take screen grabs as well if that works. I think that the second screenshot reflects where the issue is coming from, but I don't quite understand it. 

Capture.PNGCapture2.PNG

0 Upvotes
Kevin-C
Recognized Expert | Partner
Recognized Expert | Partner

Blog Page Spacing and Sizing Errors

@Hale_Soucie 

This is perfect. So that second screen shot says it all, but if you haven't the experience it won't make a lot of sense right away.

 

But before we get into the fix I want to make sure you've got acccess to the template via the deisgn manager.

Marketing > Files and Templates > Design Tools > *find your template in the left hand navigation*

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
Hale_Soucie
Participant

Blog Page Spacing and Sizing Errors

Ok good, and yes, that's where I am currently working on it.

 

0 Upvotes
Kevin-C
Recognized Expert | Partner
Recognized Expert | Partner

Blog Page Spacing and Sizing Errors

Awesome! So what that second images is saying is that you must more directly target the CTA. So select the drag and drop module that contains the CTA button. The right hand menu should change as it is contextual based on what is selected.

 

In the right menu you will see a field called "CSS ID". Give this module a CSS ID that you will remeber and that is specific, thats the point of the CSS ID. Though you can make this a little more generic if need be.

 

Say we name it "change-cta". Now we can us the #change-id ("#" denotes a CSS ID) identifier in the CSS to target the CTAs that are nested inside.

 

So now in your CSS file right below the section shown in your screen shot you'll want to add something like:

#change-cta .cta_button {
background-color: pink !important;
}

#change-cta .cta_button:hover {
background-color: red !important;
}

#change-cta .cta_button:active {
background-color: blue !important;
}

The "!important" snippet tells the browser to respect this declarartion over any other not marked as important. ":hover" and ":active" are states of the button like the opbvious hover state, and the less obvious "down" state.

 

Your targeting may need to get very specific as some templates are general and other are rather specifically styled. Say you CTA is nested inside 2 CSS IDs, your CSS might look something like this below:

#change-cta #blog-menu .cta-button {……}

"#change-cta" tells the browser to look for the div with the CSS ID of "change-cta". The the browser will be looking for "blog-menu" inside "change-cta". Finally its looking for the CTA itself.

 

Hope this helps and makes sense! If you need more clarification just lt me know.

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
Hale_Soucie
Participant

Blog Page Spacing and Sizing Errors

Ok so I made the changes and it may just not be appearing because of a syntax error or that it has to go live to be visible. I have this link to the CSS but I do not know if it is of any use: {{ get_public_template_url('Marketplace/HubSpot/Velocity_HubTheme/Coded_Files/velocity-style.css') }}

The first and third image are the actual locations of the forms in the design manager and the second is the place in the CSS file. 

Capture.PNGCapture3.PNGCapture4.PNG

 

0 Upvotes
Kevin-C
Recognized Expert | Partner
Recognized Expert | Partner

Blog Page Spacing and Sizing Errors

We're almost there.

Those child modules apparently will only let you add a Class rather than and ID.

Try replacing the "#" with a period ".". The "#" represents ID where a "." represents class.

 

.change-cta .cta_button {…}

Screen Shot 2019-03-19 at 12.46.14 PM.png

 

 

 

 

 

The parent of the child modules you added the class to can support an ID. Though you may not need this.

Screen Shot 2019-03-19 at 12.46.08 PM.png

 

If you are not familiar with your browsers inspection tool, id take a few minutes to watch this video and get a general understanding of how to usee the tool. This will save you massive amounts of time!

Video Here

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
Hale_Soucie
Participant

Blog Page Spacing and Sizing Errors

Hey Kevin, so I made the changes you described and for some reason, it is still not making the button change color... I saw some errors on the page when I did inspect page, could that have something to do with it?

Capture7.PNGCapture6.PNGCapture5.PNG

 

0 Upvotes
Hale_Soucie
Participant

Blog Page Spacing and Sizing Errors

I see where you said in the previous comment that it is not letting me change the ID but rather just the class. That seems to be the issue based on the CSS file. Is there a way to change the CSS ID with the wrapping HTML field? Or some other way to do that?

Capture9.PNGCapture8.PNG

0 Upvotes
Kevin-C
Recognized Expert | Partner
Recognized Expert | Partner

Blog Page Spacing and Sizing Errors

@Hale_Soucie 

 

If you could link us to a draft page or a gated published page we might be able to tajke a closer look. without the live code this is just hard to communicate.

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
0 Upvotes
Hale_Soucie
Participant

Blog Page Spacing and Sizing Errors

Sorry for the trouble and thanks so much for the help. Here is a link to the style sheet. Still figuring out how to share the page preview:

 

https://cdn2.hubspot.net/hub/4781277/hub_generated/template_assets/1553015488925/Marketplace/HubSpot...

 

Other than the button is blue, really the only other issue I am trying to resolve is the footer container color should be #545454 with white text but it is turning it black with blue text similar to the issues with the button. Button is the first priority, but if you see how to change that I would appreciate it too. 

0 Upvotes