bsturc Posted November 8, 2021 Share Posted November 8, 2021 Hi y'all, I am hoping someone can help me with a seemingly simple edit that I cannot figure out. I am trying to change the font of a single section on a SquareSpace site using a Code Block. Here is a screenshot: I downloaded a div identifier, so that doesn't seem to be the issue. Still, the 'hey' text is showing up as Times New Roman. What am I doing wrong? I am super new to CSS/html coding (i.e. I am learning as I go) and I haven't been able to figure out how to fix this. Can someone please help? Link to comment
Wolfsilon Posted November 8, 2021 Share Posted November 8, 2021 Hello! Welcome to the community. First off, you're well on your way to getting you're website looking like how you imagine it and it's awesome to see that you're taking a step to learn about customizing your website. Couple of things to keep in mind: 1) When you're editing a block or a page, or even a section of your website. You'll do most of the editing in the Home > Design > Custom CSS tab. 2) You won't need to use a code block for editing pieces of your website with CSS that could otherwise be written in the Custom CSS tab. 3) When you're editing in the Custom CSS tab -- You won't need to use <style> tags in the menu at all 🙂 You just need to follow the following format with any variation of properties: YOUR_BLOCK/SECTION_ID_HERE { font-family: YOUR_FONT_NAME; padding: YOUR_PADDING; margin: YOUR_MARGINS; background-color: YOUR_COLORS; display: PICK_ONE_ONLY_ONE -> "Block // Flex // Inline-Block // Grid"; width: %,PX,EM,REM,VW height:%,PX,EM,REM,VH position: PICK_ONE_ONLY_ONE -> "Relative // Absolute // Fixed // Static"; font-size: %,PX,EM,REM transform: Translate (x,y), Rotate(VALUE-deg), Scale(2), so much more...; } 4) Try removing your code from the code-block and adding it to your Custom CSS menu and see if that makes a change. If not, feel free to message me or reply here with the URL and I'll do my best to clear up any confusion. Don't give up! bsturc 1 Link to comment
SquareRefresh Posted November 8, 2021 Share Posted November 8, 2021 Hey @bsturc you want to use a markdown block and not a code block. Markdown blocks also have a cheatsheet to a SQSP help page which shows you how to change this accordingly. If you are using a font that's not in SQSP library you will need to add it in the CSS panel. bsturc 1 SquareRefresh, premium plugins & templates that have an elevated feel. Plugins: Have your site stand out. Templates: Our templates are designed with versatility in mind.Get Freebies: Sometimes things in life are free. Browser our hand selected free plugins. Link to comment
bsturc Posted November 9, 2021 Author Share Posted November 9, 2021 Thank you both!!!! I will test out both of these methods just to see what works / to experiment. Link to comment
bsturc Posted November 9, 2021 Author Share Posted November 9, 2021 20 hours ago, SquareRefresh said: Hey @bsturc you want to use a markdown block and not a code block. Markdown blocks also have a cheatsheet to a SQSP help page which shows you how to change this accordingly. If you are using a font that's not in SQSP library you will need to add it in the CSS panel. Okay, so neither of those worked, likely because I'm installing my font incorrectly. I'm frustrated and don't want to troubleshoot this right now, so changing the font seems like the quickest fix. New question - How can I find out what fonts are already in the font library? I'm using the 7.1 version. Thank you! Link to comment
bsturc Posted November 9, 2021 Author Share Posted November 9, 2021 Okay, disregard my frustration. Update 2: I did the thing. I figured out how to make the code block work!!! 🙂 SquareRefresh 1 Link to comment
SquareRefresh Posted November 10, 2021 Share Posted November 10, 2021 @bsturc you still would want to use a markdown down block for plain text and not a code block SquareRefresh, premium plugins & templates that have an elevated feel. Plugins: Have your site stand out. Templates: Our templates are designed with versatility in mind.Get Freebies: Sometimes things in life are free. Browser our hand selected free plugins. Link to comment
bsturc Posted November 10, 2021 Author Share Posted November 10, 2021 New questions! 12 hours ago, SquareRefresh said: @bsturc you still would want to use a markdown down block for plain text and not a code block 1. What do you mean by this? 'Markdown' is an option within Code Blocks. Are you referring to something else? 2. I figured out how to install custom fonts and get them show, and how format specific sections via CSS with the SquareSpace ID finder, however, the custom fonts don't to show up unless there is a code block above it. Why is this / how do I fix it? I could format all of the text in the code block itself, but there's additional formatting options I want to apply, and it seems easiest to do that via the font style options (like indenting text, for example). Thank you again! Learning this as I go is kinda fun! And stressful. But mostly fun. Link to comment
bsturc Posted November 11, 2021 Author Share Posted November 11, 2021 I finally figured out what the difference is between a code block and markdown block! Prior to today, I didn't know a markdown block even existed, hence my severe confusion. Thank you again for mentioning it and compelling me to research it further!!! Link to comment
majidkoudmani Posted March 21 Share Posted March 21 Hey! I am struggling with the same issue. I have tried a bunch of different iterations of the code but have not been able to make it work. Do you know how I need to change this: Link to comment
tuanphan Posted March 25 Share Posted March 25 On 3/21/2023 at 8:03 AM, majidkoudmani said: Hey! I am struggling with the same issue. I have tried a bunch of different iterations of the code but have not been able to make it work. Do you know how I need to change this: Can you share link to page where you want to apply effect? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment