Streaming live at 10am (PST)

Styling external CSS - how to?


#1

http://mh-playground.webflow.io/

I have a pop out tab with some embed code for a company (Design My Night) handling bookings.
How do I style their CSS? I had a look at their ref:

http://www.designmynight.com/css/partner-form.css?v=1433941707 but is all greek to me.
Any help would be greatly welcomed.

http://mh-playground.webflow.io/


#2

To analyse the html/css element you target in order to alter it in webflow, youneed to use the inspector in safari or chrome. Right click and "Inspect this element". The target the element, then add some parameters, copy the style and add it as custom code and see it it works. Look how I alter the style of your user name here on the forum with chrome:

https://v.usetapes.com/FMSOIGNHgK

Here is the code I have copied:

.names span a {
  color: #F00000;
  font-size: 50px;
}

You need to add that in your site dashboard under custom code, in the Head section, like this:

<style>
/* description */
.names span a {
  color: #F00000;
  font-size: 50px;
}
</style>

If you're not experienced with the browser inspector, try to find a quick crash course on the internet, because it's extremely useful to indispensable.


#3

Hey Vincent - many thanks for that.
I seem to have sussed that but the changes are not showing in the published site.
Do I need to put a absolute path for where the CSS is hosted (if that makes sense).

I have added the code (see preview below) but as I said, no changes showing.

https://preview.webflow.com/preview/mh-playground?preview=980877270d1e8c1867ff7bafc4e7291c


#4

Give me more detail:

where did you analyse the code
what custom code did you paste
where did you put it in webflow
what is in webflow the element you want to alter

thanks (: pretty hard for me to guess all of this (:


#5

So sorry Vincent, my bad.

HTML Embed

<script src="http://www.designmynight.com/pf/js?venue_id=512b206ed5d190d2978ca8db&widgetNum=1 id="dmn-js"></script>
This is put in the 'Booking & Enquiries' tab which I have now made visible.

Analysed code: (see pic)

Custom code:


#8

Did that help you in anyway Vincent?


#9

Sorry, I try to get the popup form but I can't, how to make it appear?


#10

Hi Vincent, sorry missed your message.
I have made the pop up (right hand side of window) showing clearly on the page now.
Your assistance is really appreciated.
Mark


#11

Did that help? The embed script is in the side nav widget symbol.


#12

Hi Vincent - I sussed this, I had to add !important to override the class.
many thanks anyway.
best / Mark


#13

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.