Arc Browser Boosts - How To Tweak Website CSS

Рет қаралды 1,840

Күн бұрын

An in-depth guide on using Boosts in Arc browser (‪@TheBrowserCompany‬) to tweak CSS of websites to your own needs-on a practical example of adjusting Daring Fireball (‪@daringfireball‬) to become mobile responsive using CSS Grid. You'll learn how to use Arc Boots, Changes Drawer in DevTools, how to easily set up mobile-responsive CSS Grid, and more.
🔗 Links
Arc browser: arc.net/
Daring Fireball: daringfireball.net/
Daring Fireball Arc Boost: arc.net/boost/67EB8124-2215-4...
Daring Fireball Arc Boost Code: codepen.io/ZoranJambor/pen/zY...
In-Depth Guide to CSS Logical Properties: • In-Depth Guide to CSS ...
In-Depth Guide Guide to grid-template-areas: • The easiest way to get...
Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com/
Help support my channel
👨‍🎓 Get a course: masteringlinting.com/
🪧 Buy a CSS sticker pack: stickers.css-weekly.com
💖 Support me on Patreon: / cssweekly
Keep up-to-date with CSS Weekly:
🐦 Twitter: / @cssweekly
🎶 TikTok: / cssweekly
🎇 Instagram: / cssweekly
📘 Facebook: / cssweekly
Keep up to date with what I'm up to:
👨‍💼 Blog: zoranjambor.com
💼 LinkedIn: / zoranjambor
📖 Chapters
00:00 Intro
02:28 How Arc browser Boosts work
03:43 How to tweak code in Arc browser Boosts
03:56 How to show/hide sidebar in Arc Browser
04:15 How to open Developer Tools from Arc Boost
05:09 How to copy CSS changes from DevTools to Arc Boost
06:50 How to tweak the fixed layout sizing in DevTools
08:50 How to prepare absolute layout for CSS Grid
10:32 How to set CSS Grid using grid-template-areas
12:22 How to set optimal line lengths in CSS
13:24 How to add gap between CSS Grid elements
13:55 How to tweak sizing of CSS Grid columns
15:10 Howgrid switch reasoingn - adjust mobile version
15:39 How to copy CSS changes from DevTools to Arc Boost
16:22 How to fix sidebar margin problems
17:00 How to adjust layout for mobile responsive version
18:57 How to adjust sidebar for mobile responsive version
19:45 How to adjust ad for mobile resposive version
22:06 How to adjust logo for mobile responsive version
23:32 How to adjust search & copyright for mobile responsive version
25:08 How we tweaked Daring Fireball in Arc Boost
25:35 Why should Arc support Boosts on mobile
26:00 Conclusion
- Zoran Jambor
#css #arcbrowser

Пікірлер: 6

@noreasonmore 22 күн бұрын

hi! is it possible to add buttons on KZfaq via boost?

@CSSWeekly 22 күн бұрын

Thanks for your question! You can inject HTML into any page with JavaScript, so yes, you can add buttons. 🙏 What kind of buttons are you looking to add?

@noreasonmore 22 күн бұрын

@@CSSWeekly I would like to add the "watch later" and "history" buttons to the compact mode. I tried to copy the code from other buttons (download, etc.) and replace the name and link. But it didn't work out, because I can't write code😕

@CSSWeekly 21 күн бұрын

Oh, this doesn't seem like a trivial task at all. 😕 Tweaking how things look is easy, but adding buttons that hook into an existing app's functionality (like KZfaq in your example) probably requires that you understand how the app works. Your approach was on point. My guess on why it didn't work would be that KZfaq handles clicks on these buttons in JavaScript with event listeners, so on the copied button, one of its classes is used to handle click events, in which case your default link address functionality is ignored. You could potentially work around it by removing the classes from the button to see if any of these are used to handle click events. But it's difficult to say this for sure, as I don't know what it is exactly that they do. 😔

@noreasonmore 20 күн бұрын

@@CSSWeekly Thank you for your attention to my question. At that moment, I was extremely interested to find out what additional features Arc Boost provides and how they can be used effectively.

@CSSWeekly 19 күн бұрын

You're more than welcome! 🙂