0

I know how to live-edit and save stylesheets for my own sites that I am developing locally. But wouldn't it be nice to be able to save your own custom styles for any website on the web?

For example, I use a very cool, free chat system called tawk.to but I don't like where some of the buttons have been placed in the interface. Using Chrome Dev Tools I have moved the buttons to where I want them to be, but if I ever need to refresh the page, or need to restart Chrome, I will loose my "personal layout settings".

Would like to hear your thoughts on this concept, and also if you can think of any solutions. Possibly, a script in Chrome that runs at specific urls, loading the personal stylesheet for that url.

Thank you.

i_a
  • 2,735
  • 1
  • 22
  • 21

3 Answers3

3

Check this out.

You need to know a bit of javascript.

Cozzmy Cosmin
  • 140
  • 1
  • 3
  • 11
  • I see. So one would use Tampermonkey to run Javascript to add CSS style changes such as in this example: http://stackoverflow.com/questions/265984/how-to-redefine-css-classes-with-javascript/266110#266110 – i_a Feb 26 '15 at 07:03
  • 1
    Yeah, you have client side Javascript that adds custom styles to existing websites. – Cozzmy Cosmin Feb 26 '15 at 07:05
1

My thoughts on this concept:

Resources that are modified should be logged and saved into the google account settings.

This way, from any chrome browser, logging in will load those settings and provide a history of modifications that can be reloaded.

This would include modifications such as deleting a specific html element from a specific page or domain(), hiding all images from a specific page or css mods.

The sub menu in the element inspector should also include more options like 'clone', and selecting an element should show the bounding-box with handles so one could visually resize, move, crop, sheer, scale, reflect etc...

For text, sub-menu should include modify options like, visual font selection, color, size, etc.. - fonts should be loadable from any source, local or in the cloud.

If 'add new' > 'element' > 'image' is selected, the html and css should automatically be formed in compliance with the standards of choice, including parent elements that are standard, like 'a' being formed in a 'span' automatically.

Then, if you have the credentials, 'upload via ftp' would save it all to the server.

'Load file' should include git, or other online resources, so if I want to load someone's entire website. or just one thing I liked, I could.

Matthew Bannon
  • 11
  • 1
0

As Cozzmy pointed out, there is Tampermonkey. I installed it and created a simple script which hides the logo and moves the chat toggle button to the upper left ( jQuery was available in the page so I used it )

// ==UserScript==
// @name         My Fancy New Userscript
// @namespace    http://your.homepage/
// @version      0.1
// @description  enter something useful
// @author       You
// @match        https://dashboard.tawk.to/?lang=en
// @grant        none
// ==/UserScript==
$("#logo-group").css('display','none');
$("body").find("[data-action=toggleMenu]").css('position','absolute').css('left',0);

That was easy! Thanks!

i_a
  • 2,735
  • 1
  • 22
  • 21
  • Instead of marking Cozzmy's answer as accepted, you wrote your script here and marked it as the best answer? It doesn't work that way, it's not right. – Si7ius Mar 31 '22 at 05:17