Streaming live at 10am (PST)

Single main website style apply to multiple websites

Hello, i got multiple websites on different countries. i always work on main website first if there is any layout changes( and it is alot layout changes ) then i need to go to another website to make layout changes and so on.

lets said if i got 10 websites or 100 websites in future that i hosted under webflow, is it means that i need make 99 changes on 99 websites or is there is any way that can apply layout style changes faster to other 99 websites by referring main website layout?

You can do that by adding the <link rel="stylesheet" > tag to all websites (except the main one). For example:

<link href="https://assets-global.website-files.com/55e66dd8b5daada24f333566/css/help-site.webflow.b5cfa2082.css" rel="stylesheet" type="text/css">

The link inside the href would be pointing towards the style-guide of your main website. I’m just not entirely sure if you would be able to see the styling from the designer, but once you published it, you would be able to see everything working as it should, as long as you use the same classes and etc

2 Likes

That is the correct answer.

I would also add that you can dedicate a webflow.io (free) project to hosting all your styles (like a styleguide page or your own UI kit) which you maintain independently, and which CSS file is linked into all your other live projects.

A styleguide can be a good option if not all websites share the exact same pages and features, so you can centralise how everything is connected, instead of going onto each sub site that has something different from the main.

It also gives you the comfort of incremental backups on just the styles, which is a nice to have IMHO.

Worth noting that, while you can place a password on a project or page, the associated CSS is still accessible to the world, so you can keep your style pages private if you do not want to share the page itself.

If a style guide is of interest, you may find the below links helpful:

2 Likes

Hi again @keikei,

I assumed you already know how to link an external stylesheet into your projects (since you have many sites on Webflow already) but, for the sake of fully answering the original question for new comers looking to achieve the same feature:

  1. Go to “Project Settings”
  2. Locate “Custom Code” tab
  3. Insert the link to the other website’s css, as per @Jeandcc description.

FYI, you would find the target CSS link by looking into the published website’s code in your browser.

Some elements, such as paid fonts, may have a ‘same-origin’ limitation, preventing them from being loaded from external domains.

1 Like

hello thanks @Jeandcc and @toff for the reply :blush:… i got the solution after i got the answer from you both but i got another concern is that when i also upgrade the HTML and its hierarchy for eg, i would add either new sections, containers and divs with new styles into some part of the website, and i want those changes apply to other websites so it will look same like the main site.

Normally i would copy and paste the sections/divs/containers to other websites (which is good new functions :+1:) but when we thinking about extra 9 websites or 99 websites, i need to do changes on those html for 99 times by copy and paste, or is there any way to apply those changes to other websites by referring main website?

That would be pushing the limits of how Webflow operates.

It is a design tool that allows designing then publishing individual websites in their own containers, so the extent of what you can do is limited to sharing static elements such as CSS and images between projects.

While it does support CMS items and ecommerce features, like its competitors, the focus is on the design at the page level - Unlike a theme based CMS like Drupal, Wordpress, Concrete, or Kentico.

What you are looking for is not implemented at the Webflow level and you do not have access to the code to modify this yourself. Even if you were loading parts from a site via AJAX calls into other websites, it would take more time to get the hack working than to maintain the individual sites when there is an update.

It seems that the sites share a lot, if you have to update them all for each layout change on the master.
If I may ask, what is the relation between your core website and its dependents?
Is it a localisation issue? or are they all completely different sites? Or is it a requirement per domain name? …

1 Like

Hello @toff thanks for the reply :smile: i understand your answer.
We want to sells our products on main website, and the dependents will package up the products as OEM products, so the dependents need OEM websites. So to let them sell our products efficiently, we provides oem website to them. those oem website is different websites not only from our local but also overseas.

p/s: actually i know it is pushing the limits of how Webflow operates but my boss :sweat_smile: insist me to ask the community… after i thinking the possibility of our business model in future, if we really got 99 websites and need update 99 time each time we want to change the web for marketing tactic purpose, it going be nightmare for me… hmm :sob: