CUSTOM CSS

[johnno]

Is there any way to add custom css to the online store?

If there isn't, then there needs to be.

For example, the inbuilt formatting options for text, headings etc are too limiting.

I tried to javascript write a link to a custom stylesheet via the Integrations section, but it didn't work to override the inbuilt styles.

Ideally would be great if is was possible to add internal styles (e.g. <style>style declarations here</style>) to the HEAD or BODY via Integrations.

[CodeAndTonicHQ]

Thanks JOHNNO !

I hope it's helpful for many. And folks please let me know if there are other customisations you'd like to make, I can do more tutorials or help you 1-on-1.

Using this method pretty much anything is possible 🙂 Feel free to send me a message if you need help.

[HMTIassist1]

Hi Johnno!  

Can you assist me in where I can insert the css code for multiple bullet sessions with different colors?  This is for Weebly dashboard.  

How to change bullet(s) color to match content font color in multiple sessions on a single page?  Is there a css or html code?  

Thank you,

L'Tanya 

[HMTIassist1]

Hello,

How to change bullet(s) color to match content font color in multiple sessions on a single page?  Is there a css or html code?  

[JJ_]

Hey, @HMTIassist1 I moved your post to this thread where one of our Sellers shared their solution for Custom CSS in Square Online. I hope this answers your question.

[lawnbrook]

I've recently started playing with the snippets API and this allows you to install a code snippet in the head of the page. I have used this to pull in an offsite stylesheet, and javascript. With this approach I can just edit the css/code on another domain and don't have to apply the work around listed above (which is great if you don't want to bother with the whole developer API thing).

The biggest issue now is targeting the DOM objects that  you want to modify.. It's easy to effect things globally but there isnt really anything identifiable in specific containers to target them effectively..

I resorted to using javascript to find thing based on content, but even this is unreliable due to the script based nature of the page content (it doesnt exist when the DOM loads).

I had actually managed to inject code to replace an empty top container with a 100% slider with overlays, but unfortunately it's doesnt work reliably due the delayed nature of the site content.. so frustrating.

It would be great to be able to add and #id or .class to a section/container so that it could be targetted effectively..

Bruce

[HMTIassist1]

Hello Bruce,

Does your topic apply to Weebly Dashboard?  I agree with you regarding the option of adding #id and .class to a section or separate paragraph.  I'm trying to accomplish this task below.  

How to change bullet(s) color to match content font color in multiple sessions on a single page?  Is there a css or html code?  

Thank you,

L'Tanya

[lawnbrook]

Im referring to square online, however the workaround described above should work for you. Can you post a link to the page in question, and what you are trying to acheive?

[HMTIassist1]

Hi Bruce

Thank you! 

I'm would like the bullet points or numbers to match the text color for each paragraph or sections content.  

I was able to achieve the first color for the first session(pic 1) however, not for the second session.  Here is the link:  https://www.holisticmassagetraining.org/fees-costs--financial-aid.html 

I placed this style code in the header code under SEO Settings.  Unfortunately, online square is no use for this website at the moment.   

<style>
div.paragraph ul li {
color: #333300;
font-family: Libre Franklin;
font-size: 23px;
letter-spacing: 3;
line-height: 2em;
font-weight: 900;
}
</style>

[lawnbrook]

Hey there,

I don't think it's going to be possible because there doesnt appear to be a way of differentiating between. this <ul> and other <ul>.. So while you appear to have managed to style one of them, then this style will apply to all..

[HMTIassist1]

Thank you Bruce!   

It's impossible to create a another div?  Wow!  There are limitations with Weebly.  

L'Tanya 

[HMTIassist1]

Hi Bruce,

I have two questions to ask you about Weebly functionality.  ! Nav bar responsive for the home page (the other pages are responsive except for the home page) and subdomian for a second website?  Unfortunately, Weebly pages are unable to copy to another site.  

Thank you,

L'Tanya 

[lawnbrook]

@HMTIassist1,

Unfortunately I am not familiar with Weebly and only use square online... hopefully someone else can help you

[HMTIassist1]

Bruce,

Thank you again.  

[Laurie_]

Hey, @HMTlassist1!

Just jumping in here to suggest you reach out with your question via the Weebly Seller Community, as if you've started on Weebly you'll be working with a slightly different Dashboard compared to Square Online Sellers.

Other Weebly Sellers may be able to speak to these topics in greater detail than we can here.