1. Support
  2. The Start-up Framework

Custom Styles for StartUp Framework

Customize or Override the styling in StartUp Framework

For those advanced and power users who want to customize and change some of the default visuals of our StartUp Framework. You have a few options available to ensure your overrides and customizations work as expected.

 

OPTION 1: (the recommended way)

1) Create a new style sheet that will apply our custom styles for the desired modules.
Please see this guideline to understand how we create it, you can give it a name like "custom-stylesheet"
https://knowledge.hubspot.com/articles/kcs_article/cos-general/create-edit-and-attach-css-files-to-style-your-site

After you create the file, please copy its public URL like this



2) Go and find this "Scripts" module in your SUF template



Then click on the "Edit HTML source" option on the right panel.

You will see this script for the "design-modo-extra.css" file import, we will paste a similar script right next to that line.
Please paste the text that you have copied in step 1 into the following script as suggested.

The code that you copied is something like this :
Ignore the curly braces, and just copy the content of it, which is just
get_public_template_url('Custom/page/design-modo/custom-stylesheet.css') in this case.

And if we put that into the following accordingly ;


We should end up with this kind of script


Please paste this into the next available line after the /design-modo-extra.css file .

And then publish the changes.

This way, we will be able to add our custom styles right into the custom-stylesheet.css file which will affect the look of the desired modules accordingly.

OPTION 2:


1) Open the Landing or Website Page you want to customize or override.


2) When editing the page, click on SETTINGS in the options (between CONTENT and OPTIMIZE)


3) Scroll down until you find an arrow with an "Advanced Options"


4) Click on "Advanced Options" to load more content and scroll down until you find the "Additional code snippets" area.

5) Add your customization code in either the HEAD HTML area or the FOOTER HTML.


OPTION 3:

Similar to option #2, except you can "attach" style-sheets to this specific page by using the "Advanced Options" area and scrolling down until you find the "Stylesheets" section.

 

 OPTION 4: (NOT RECOMMENDED)


Option 4 Requires a bit of more advanced knowledge.

 

You will need to:

1) Clone the module.

2) Edit the source code directly.