3. Update copyright information annually
Note: We’re assuming you have already set a body font for your project.
Step 1: Add the Style
Add a Text Block to the canvas and give it a class of “Copyright” with the following settings:
- Font-size: 10px
- Color: White (I’ve made my text white because of the dark footer, but feel free to change the colors to suit your needs)
- Text-align: Center
Step 2: Add the code snippet
Copy and paste the code below into an HTML embed widget on your canvas and place it where you want it displayed. I’m putting mine in the footer, below the text block I just styled.
var today = new Date()
var year = today.getFullYear()
You can see in the snippet above that there’s a line of text: replace the Company Name with whoever owns the copyright. Save and close.
You’ll notice that the newly placed copyright info is styled exactly the same as the previous text block we added. That’s because they share the exact same class name. Now we need to remove the original text block we styled, leaving behind just the HTML embed.
Warning, there are some gotchas!
If you were to delete the copyright text block, the next time you clear the unused classes from your project, you’d lose the style to your HTML embed. To avoid this we need to place the copyright text block on an unused page.
I often set up a page in my Webflow project called “/Assets.” I place anything on this page that I want to keep or use later. This way the Webflow system won’t delete the class.
4. Customize the Android Chrome color
Not all browsers are created equal — Chrome is by far the most popular browser in the world. Lucky for us designers, they offer some great options for customisation! Google’s Chrome browser allows you to alter the color of the browser to create a seamless branded mobile-web browsing experience.
Below is an example of how this snippet is applied by the browser. I think you’ll agree, it’s another great tool in your ever-growing arsenal to customize the user experience.
Step 1: Add the code snippet
Open the settings panel of your project, navigate to the Custom Code section and paste the following code snippet in the Head Code section.
<meta name="theme-color" content="#000"> /* Change the "#000" to whatever color matches your projects them and style */
It’s as simple as that, publish it and open it on an android device.
5. Style text highlighter
Designers often forget about system defaults like the text highlight color. But, again, it’s this attention to detail that makes all the difference.
Step 1: Add the snippet
Copy the code snippet blow to your clipboard and navigate to your projects settings. Open the Custom Code tab and paste the snippet in the Header Code section.
background: #000; /* WebKit/Blink Browsers */
background: #000; /* Gecko Browsers */
Click Save Changes and publish the site. Preview it on the published site.
Step 2 - Adjust the colors
I’ve left the snippet with a black background and the text in white, but you have full creative freedom to change this to whatever color you see fit.
In the snippet, simply change the hex codes to your desired color.
Just remember to save changes and publish to view it on your live site.
If you’re a type geek, you know that a hyphen in just the right place can make the difference between a beautiful read and a block of text that will make you cry rivers.
Especially if you’re using fully justified text. (We don’t recommend it.) Or publishing in a language that, like German, is prone to polysyllabic words.
Of course, you can manually add the HTML entity ­ to tell browsers “hyphenate here if you need to,” but that can get laborious in any site with more than a couple of pages. And it won’t work in rich text fields.
Thankfully, CSS has come to the rescue with word-break and hyphenation.
To work backwards through that declaration:
- Hyphens: auto This tells browsers to go ahead and automatically hyphenate words as needed, based on the browser’s dictionary for the language you declared for your site. And yes, this means you need to specify your site’s language in the HTML tag. You can do that in the Advanced Settings section of the Custom Code tab in your Project Settings.
- The 4 hyphen-abbreviation-hyphen lines These are just browser-specific versions of hyphens-auto to ensure hyphenation will work on all browsers.
- Word-break: break-word This is a bit of a safety inclusion, as it all it really does is tell the browser that it’s okay to add a line break in the middle of a word if needed. Which is sort of the point of all the “hyphens” declarations anyway.
It's worth noting that Chrome on Windows doesn't yet support auto hyphenation.
Hat tip to forum user @prohaska for this handy snippet.
What custom code do you use?
That’s it! These are core code snippets I use on pretty much on every Webflow project. I hope they help take your designs to the next level. If you have some go-tos of your own, be sure to share them in the comments!