'Transplanting' content and css - Methods or ideas?

[Hawk-Steve]

Hey all

I just picked up a template for our new blog section. I've made quite a few changes to the style sheet and templates etc to get it more in line with our branding which is going fine :).

Where I will run into issues (web dev skills lacking) is where I need to replace the template's header with our existing header. Obviously this new template has it's own style.css for the header that will conflict with any styles I bring over from the mainstyle.css.

Does anyone have any tips, ideas or methods to 'transplanting' a header+menu over? I imagine the first suggestions will be outsourcing the work, but I would like to learn and attempt it myself first (plus, I have almost no budget atm! )

[Stephanie-OG · Accepted solution]

Hi Steve, unfortunately I don't think there's a one size fits all reply for your question. It really depends on:

• The template and the classes they've used in style.css
• Your global header module, it's classes and how neatly the global header module is styled in mainstyle.css

In an idea world, you can drag your existing global header into the template (delete theirs), copy just the header classes into your new stylesheet (if they're arranged nicely like in the HubSpot boilerplate) and hope there isn't a huge overlap in the classes being used. 

You could probably try that anyway, see how much CSS you can track down and copy over, check to see just how much conflict there is and then send us the preview link to ask for specific help (e.g. how do I fix this padding or that colour). We can then tell you what extra CSS to add in, or CSS you can comment out on the stylesheet. 

---

HubSpot Design / Development

Website | Contact

If this helped, please mark it as the solution to your question, thanks!

[Hawk-Steve]

Well, it took about a day but I finally managed to get the header and footer over to the new blog template and have everything work! 

blog.hawktraining.com

[Hawk-Steve]

UPDATE: I have been reading around and discovered a couple of plugins that could help me with the issue of 'extracting' all the required classes from the existing stylesheet to be moved over.

https://stackoverflow.com/questions/4911338/tools-to-selectively-copy-htmlcssjs-from-existing-sites

Hi Stephanie

I guessed this would be the answer in most cases. Would have been great to have some software that can pluck all the relevant classes from a stylesheet based on the html content.

I managed to get this half working, thankfully we are using a good boilerplate, although the structure seems to be causing some interference on the blog stylesheet.

Oh well! It was worth asking anyway 🙂 I better writing!

Steve