How to Add CSS

[BasilicaWeebly]

Hi there guys!

I'm new to editing my weebly site and wanted to add a few really cool widgets that will make a huge difference to the aesthetic of my website.

I have read the instructions on the website but I am not afraid to admit that I am absolutely clueless.

I need to add the code to particular pages rather than just the theme. I'm aware that you can add code in to the footer and the header in the SEO section of each page but I am not exactly sure how to use the images I want. I have added links to the CSS and outlined the particular features I would like to use.

Is there anyone who might know a little about adding this code to my website?

I would like to use the saturation hover effect from here;

https://www.webnots.com/11-image-hovering-effects-for-weebly/

The image sharing widget from here: (I would also like this to share our page rather than just the image)

https://www.webnots.com/3-image-sharing-widgets-for-weebly/

The accordion slider from here: (I would like to use 3 product iages rather than 5)

https://www.webnots.com/demos/css-accordion-slider/

Thank you to anyone in the community who can help. I would really appreciate it.

[Adam7]

Hey @BasilicaWeebly! Thanks for posting and welcome to Community.

For the first widget, you'll be able to add that either with an embed code element or to the page's header code field (found in SEO Settings for a the page on the pages tab. You'll also need to update the code to reflect the class used by the image, since I'm sure it's not going to be "image5".

With the second widget, their instructions say to add both the CSS and HTML to an embed code element. The widget code doesn't seem to include anything that actually makes sharing function, so I'm assuming it's relying on some our own sharing code. It might not be possible to change what it shares in the case.

The third one doesn't seem to link to any code - maybe I'm missing where it is, though?

[jasonwitt]

Might want to check out the $15 Flexibox App to avoid the coding hassle. 

[4EVRengineering]

Hey Adam,

I am trying to add a scroll button to my website and am having issues with inserting the html and css correctly.Can you please guide accordingly?

The code for the button can be found here:

https://codepen.io/josedavidfumo/pen/KVGejW

[Adam7]

Wrap the CSS code with <style> and </style> and add that to the Header Code field in Settings > SEO. By wrap, I mean put <style>, paste in the CSS code, then put </style>. 

Where did you want that to show on your site? Where you place the HTML code will affect where it shows. For example, if you add it to the Footer Code field in Settings > SEO, it'll show at the bottom of every page.