-
Posts
30 -
Joined
-
Last visited
curlybirdie21's Achievements
-
Bhavik started following curlybirdie21
-
Rajeevkodakara started following curlybirdie21
-
curlybirdie21 reacted to a post in a topic: CSS needed: to force website to display one font for body text and another font for H1,2,3 etc
-
Hi Melody, Thanks so much for the reply! So, I followed your article (very helpful) and added this code to the CSS: @font-face { font-family: Raleway; src: url(https://static1.squarespace.com/static/65467d7ff3357b713413e9d9/t/654683eeb4aeb55afb815413/1699120111134/Raleway-Regular.ttf); } .sqsrte-large, p, .sqsrte-small { font-family: 'Raleway'; @font-face { font-family: Orbitron-Bold; src: url(https://static1.squarespace.com/static/65467d7ff3357b713413e9d9/t/654683bfb95974717c78d3e9/1699120063509/Orbitron-Bold.ttf);} h1, h2, h3, h4 { font-family: 'Orbitron-Bold'; } } But it doesn't look like it's displaying the header font correctly
-
Hi everyone! I need your help 😃 I have uploaded two new fonts to the website that I am building. 1) Raleway - for body text https://static1.squarespace.com/static/65467d7ff3357b713413e9d9/t/654683eeb4aeb55afb815413/1699120111134/Raleway-Regular.ttf 2) Orbitron-Bold - for H1, H2 etc https://static1.squarespace.com/static/65467d7ff3357b713413e9d9/t/654683bfb95974717c78d3e9/1699120063509/Orbitron-Bold.ttf Could anyone kindly provide me with some code to force the website to display the content in these two fonts? Thanks in advance! 🤗
-
Ah, okay, I know what I did wrong - I added the code to settings/advanced/code injection when I should have just added it to the specific page. I'll try that now. Can I use this code on the country page too? I want this to apply to all the small text, i.e. anywhere with additional guidance, like here for - see attached. The code you supplied me only makes the First Name and Last name bigger, not the other small bits of text. Can you also explain exactly what I do to the code to make the small text slightly smaller - you say to change it to 16px, but I don't know where you suggest I add it - sorry, I am not any code at code - just copying and pasting it into the necessary pages! Could you advise on all of the above? thanks so much!
-
Okay Creedon When I added that code to the Header, the strangest thing has since happened. I have a coloured shape that features on my bio pages - see https://lysaght.squarespace.com/bio/richard-stilwell (see attached) The block remained when I added your code, but the colour changed to white. Nothing changed, even when I went into the shape to edit the colour to turquoise. I removed the code, and the block returned! Any ideas? I've removed your code for now, so you can see what I mean.
-
Hey Creedon - I am trying to increase the wording for First Name and Last Name; see attached. I tried by adding your code: to the header on code injection but it did nothing to the First Name and Surname - any other ideas? <style> .form-wrapper .field-list .description { font-size : large; } </style>
-
Hi everyone I hope you don't mind me jumping on this thread but the person who was helping me is too busy to reply to this message, so I just wondered if there were any kind amazing code wizards that could look at this for me? Thanking you in advance Smiles Jo --------- I'd like someone to check this code for animated numbers on my home page (website yet to go live). I've updated the blockID to the relevant block on my website. Presumably I add this code to the Custom CSS in Design or do I add it to the header or footer in Advanced/Code Injection? ------- <script> // how many seconds do you want it to animate? var animateSeconds = 2; /* Do Not Edit Below Here */ function isInViewport(elem) { var bounding = elem.getBoundingClientRect(); return ( bounding.top >= 0 && bounding.left >= 0 && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) && bounding.right <= (window.innerWidth || document.documentElement.clientWidth) ); }; whenReady = function (readyFunc, actionFunc, options) { if (readyFunc()) { actionFunc.apply(this); } else { if (!options) options = {}; if (!options.current) options.current = 0; if (!options.max) options.max = 60000; if (!options.interval) options.interval = 500; if (options.current < options.max) { setTimeout(function () { options.current += options.interval; whenReady(readyFunc, actionFunc, options); }, options.interval); } else if (options.ontimeout) { options.ontimeout(); } } return true; }; whenReady( function () { return document.querySelectorAll("#block-yui_3_17_2_1_1671553979790_1864517").length; }, function () { // var spacerBar = document.querySelector("#block-yui_3_17_2_1_1671553979790_1864517"); var spacerBar = document.querySelector("#block-yui_3_17_2_1_1671553979790_1864517"); // save first number var projects = document.querySelector("#block-yui_3_17_2_1_1671553979790_1864517 h1"); var projectsNum = +projects.textContent; // save second number var clients = document.querySelector("#block-yui_3_17_2_1_1671553979790_1864517 h1"); var clientsNum = +clients.textContent; // save third number var ongoing = document.querySelector("#block-yui_3_17_2_1_1671553979790_1864517 h1"); var ongoingNum = +ongoing.textContent; // set all numbers to zero projects.textContent = clients.textContent = ongoing.textContent = 0; function animateNumbers() { if (isInViewport(spacerBar) && !window.numbersAnimated) { function addThousandsSeparator (n) { // by Thomas Creedon < http://www.tomsWeb.consulting/ > n = String(n); n = n.replace ( /\d(?=(?:\d{3})+(?!\d))/g, '$&,' ); return n; } // animate the numbers back to their original. over X seconds. var curProjects = 0, curClients = 0, curOngoing = 0; var animating = setInterval(function(){ curProjects += projectsNum / (animateSeconds * 100); curClients += clientsNum / (animateSeconds * 100); curOngoing += ongoingNum / (animateSeconds * 100); projects.textContent = Math.floor(curProjects); clients.textContent = Math.floor(curClients); ongoing.textContent = Math.floor(curOngoing); }, 10); window.numbersAnimated = true; // turn off the interval after X seconds setTimeout(function(){ clearInterval(animating); // set the numbers to their original funds.textContent = addThousandsSeparator(Math.floor(curfunds)); funds.textContent = addThousandsSeparator(fundsNum); }, animateSeconds * 1000); } } // if page loads and numbers are visible animateNumbers(); // when scrolling window.addEventListener('scroll', animateNumbers); }, // action function { //this is only necessary if you need to do something on timeout. ontimeout: function () { console.log('*** Timing out ***'); } } //ontimeout // action function ); // whenReady </script>
-
The problem with the team block
curlybirdie21 replied to curlybirdie21's topic in Customize with code
Hey Tuanphan - Thanks so much for your reply. So the site is still being built and isn't live, so it's still private but I expect when we go live, we will elect for the Business plan.- 3 replies
-
- css
- custom-css
-
(and 2 more)
Tagged with:
-
curlybirdie21 started following The problem with the team block
-
So I've added a Team block to my team page: But now I have two issues. Is there anyway I could add a second header line (beneath the name) to add their respective titles? I am happy for it to be the same font and size as the title if its easier. Also, there appears to be a problem with my title for this block "Directors" I added in some CSS to force the main copy to be Tahoma (as SS doesn't offer that font) and the headings to remain in Bebas Neue (available on SS) but when I add a title to this block it is not displaying the title in Bebas Neue (it could be Tahoma) - take a look: Can anyone help me with these two issues? Addina staff title and font issues with title Thanks so much Smiles Jo
- 3 replies
-
- css
- custom-css
-
(and 2 more)
Tagged with:
-
Ziggy reacted to a post in a topic: Can I force more than one accordian item to stay open
-
Can I force more than one accordian item to stay open
curlybirdie21 replied to curlybirdie21's topic in Customize with code
Ah ha! Thanks so much Ziggy, I'm a bit of an accordian novice! Thanks so much 🙂