ankit / stylebot Goto Github PK
View Code? Open in Web Editor NEWChange the appearance of the web instantly
Home Page: https://stylebot.dev/
License: MIT License
Change the appearance of the web instantly
Home Page: https://stylebot.dev/
License: MIT License
Would be fantastic if you could use SASS:
It would add more flexibility when customizing some awkwardly coded pages (facebook?)
Overriding an element's background fails if the element has a background image already. I'd suggest either removing the background image, or instead replacing it with a 1px transparent image - so that the user can see the background color show up.
Not a fan of icons up there.
If is /has/ to stay, maybe it could change appearance to show that rules are active and have modified the page.
Could Stylebot strip existing CSS first, meaning style and link tags? I would like to start from scratch to edit a site.
Modal window "Edit CSS" would be much better placed under "Advanced".
E.g. top third of the screen would be the textarea to "Edit custom CSS for selected elements" and the other 2 thirds below would fit the "Edit the CSS for example.com".
Reasoning:
If this would require an apply(save) button I would be still a happy user, but better with autosaving / autoapply.
Thank you for StyleBot Ankit, great work, let me know if you need some clarificaton.
It'd be cool to be able to apply styles only to a specific page instead of the whole domain.
I've found poorly coded pages where the styles I create work fine for one page but mess up other pages. This has to do with classes and IDs that are been re-used for different purposes in several pages.
Could it be possible to allow setting styles by individual pages too?
Thanks!
Doesn't Stylebot support web pages making use of HTML frames?
I've found a site using frames where the Stylebot window doesn't show up when clicking on the icon or using the shortcut, even though the icon is highlighted in the URL bar. Furthermore if I try to make my changes on the global config page of Stylebot they are not reflected on the website.
It would be great if we can use it for specified custom url.
This feature request is a little more tricky.
How about the user could create a list of styles and give a name to each style.
Then when editing a site and selecting a element he could go to that list and select one of those styles.
The selected style will be added to the current element style.
This will be a great because I try to use the same font family and font size for similar areas in different sites.
I would like to apply the same CSS when visiting several related sites or subdomains of a site. For example, several StackExchange sites would be selected by matching the URL with the regular expression
.*(serverfault|stackoverflow|superuser)\.com
When editing css, I want to add an animation:
@-webkit-keyframes bounce {
from {
left: 0px;
}
to {
left: 200px;
}
}
when i click save, it doesn't save.
A repository to share with all the users your styles.
And a navegator within the extension or somewhere near. I want the styles in the Examples page!
When I begin to install StyleBot, it says "This extension will have access to all data, etc." (I'm paraphrasing)... It would be nice if on your main page with the "Install" button you mention that it will say this, and provide a link to a privacy policy saying what you do/don't collect and if you collect any information what you do with it.
Especially given that Google sponsored your summer of code work to produce it, and that they may have an interest in collecting information from users (though I'm guessing you aren't doing anything evil!! ;-), it behooves you to be very and explicitly clear about this.
Thanks for a great product!
Request:
Use up/down cursors to increment/decrement values.
Ability to put rule into specific element of selector chain.
Currently, css code is injected to last element of css selector chain. What if I need to address it's parent? For example, I want to outline forum post with structure like
[div class="message"] [font color="red"]Moderator[/font] [p]the whole message[/p] [/div]
I can access [p] element by using ~ or + selectors, but I need to patch [div]. Is it even possible?
The scrollbar that appears in the widget and textareas is glitched. Either try to fix the glitch or create your own styled scrollbar.
Try entering setting padding-bottom to '0.5' then set the units to 'em'. The CSS generated is "padding-bottom: 0.5" - the units are nowhere. 1em works fine.
Instead of inserting separate markup for each color picker in widget, insert markup for only one color picker. (use "Flat" mode in plugin and initialize the same instance of color picker for different properties)
I encountered a rendering delay with Chrome 7 and 8 beta on many sites although I do not have created any CSS rules for these sites (only got 4 rules/sites on my list). Double checked it with stylebot enabled/disabled. Try to go back and forward (i.e. page in RAM) and notice the delay.
This is similar to the browser sync feature, but instead of syncing to my other browsers, I could subscribe to a list of styles maintained by an editor. Similar in principle to AdBlock which maintains filter lists.
import styles doesn't work.
i exported styles from my mac, tried to import into chrome on linux and nothing happens, not error, no styles created.
Currently running: Chrome 9.0.597.107
I changed font style and color and then pressed "Reset" and "Reset All" buttons, font size or style was recovered but changed foreground color remained, even if I reload the page.
Allow the user to temporary disable the changes made by stylebot, to se the page in the original formating
Which other properties may be added to the Basic widget? Off the top of my head, I can think of the following:
color, background-color, font-size, font-family, font-variant, font-style, text-decoration, display(hide element), border, opacity.
If I click Edit CSS, then add a rule like
p {
color: red !important;
}
and click Save, the !important will be removed next time I open Edit CSS on that page.
Hey guys,
I don't know whether it's an issue with stylebot or with the combination of my extensions. When Stylebot is enabled, I can't paste into any form field that already has any kind of content in it. When the form element is blank it's working though. Deactivating stylebot solves the issue for me.
Using Chrome 7.0.517.41 on OSX 10.6.4.
The other extensions I'm using are:
Maybe some way to distinguish the currently selected elements (corresponding to the current selector) from the rest of the DOM. These elements are the ones that will be affected when any property's value is changed in the widget.
Currently, I'm experimenting using expose. To try, checkout branch 'expose'.
when i am selecting text, the selector highlight box intrudes. give a faux padding to the selector outline so that the content that is selected for editing can viewed properly without any sort of intrusion.
i am raising this issue because i am being forced to manually edit CSS to see the changes instead of using the widget. just my 2 cents.
Please move [^](selection toggler), < and X buttons down a little and expand rule dropdown menu to make space for long selectors (with exuberant class names)
Acid3 is broken while Stylebot is enabled.
AFAIK this is a known problem with injecting scripts into acid3... I think the only workaround is for extension authors to blacklist the site from injection in their extensions.
I am running the dev branch of Google Chrome and for a long time I couldn't paste into the new tweet dialog (not the textbox at the top of the page, but the dialog when you reply or click the pencil icon at the top right). I could immediate paste something into the dialog if it was empty, but as soon as any text was present in the dialog, I couldn't paste into it. This was mostly annoying when I was trying to append a short url to the end or try to reply to several people (pasting twitter usernames together). I eventually went through and disabled ALL my extension and then I was able to paste. At that point I went through narrowing down the extension that was causing the problem... which was StyleBot. I can consistently recreate the problem by enabling/disabling Stylebot and at least one other person on the internet verified it for me. I enjoy your extension, but at the same time copy/paste is important to me as well in #newtwitter. If you could research and fix this, that would be great. Thanks!
Provide an visual indication that stylebot have made changes to the current viewing page.
*Page-wide color picker: Not sure if this is practical but you very often need to pick an existing color on your color scheme and modify it, a page-wide color picker would be a great tool for that.
*HSLa color adjustments: In the same mindset than the previous request, slight modifications of colors to achieve a consistent color palette usually require a simple reduction in saturation, brightness, hue or alpha transparency. Being able to toggle to HSLa fields would be a great addition to the color picking mechanism. Up/Down and Shift Up/Down events on the fields would be the cherry on top.
The current implementation of dragging is not smooth ( especially on pages that are JS-heavy ). Some alternatives are:
Get rid of redundant code that sets values for input fields that are not displayed. Also get rid of the redundant markup.
All my styles simply disappeared.
Don't know what happened, so no much help there.
I'll be doing export and backup from now on.
There is a bug that appears to be caused by stylebot that leads to the inability to paste text into a textarea that already contains some text. This consistently occurs on some sites, and consistently does not occur on other sites.
To reproduce, try the following:
0) Load up Chrome. Install and enable stylebot. Disable any other Extensions.
Disabling stylebot eliminates this problem.
They might not be the best choice for options like Style and Decoration. This is because they've an initial indeterminate state that the user cannot return to. Reference: http://css-tricks.com/indeterminate-radio-buttons/
What can be the alternatives? The reason for using radio buttons (instead of checkboxes) is so that the Style and Decoration can also be set to None.
When using the 'Edit css' options (either from the sidebar or the preferences dialog) css3-style selectors dont get saved. I am currently trying to save this:
iframe[src^="http://ad"] {
display: none;
}
but the ^ char keeps getting removed.
This does not happen when using the sidebar to select the element
For Widget UI, maybe use something like the jQuery UI? http://jqueryui.com/demos/button/
Suggest alternatives here.
It would be nice to have some key shortcuts to the most used features.
A shortcut for the "select element" is a must.
Also I would like shortcut for the "Visibility: Hide" (I use this a lot)
And maybe for "Edit CSS", toogle "Basic/Advanced", font family...
To trim a page, the combination:
KeySelectElement-ClickElement-KeyToHide
would save a lot of time and patience.
okay. i may be going overboard with these issues. :)
what i am missing is that the extension is not fetching existing data. i have to guess what values to put inside the box.
For example, consider, Font Size. the widget should fetch the value that is present in the existing css. so that I can adjust it according to the need. as it stands, i have to first guess the value and then adjust it to see if it suits me.
hope this helps.
The extension system in Safari 5 is conceived similarly to Chrome's, just how similar is the implementation, is it possible to have one codebase be made into a Safari extension and a Chrome extension?
I just installed http://github.com/ankit/stylebot/commit/3fdb82c9fde3b8815 on Chrome 6.0.447.0 dev. It doesn't work at all. In background page console I see
Uncaught illegal access js/background.js:81
The 81 line is:
cache.styles = JSON.parse( localStorage['stylebot_styles'] );
localStorage is empty, so it cause an error.
I make some rules with '>'s in selector and they work fine, but now I can access them only via 'Edit CSS' button. They are listed in dropdown menu, but choosing any of them result empty rule edit box.
I'm using www.netvibes.com, and i remove the header and the footer, but after applying the css, and closing stylebot it just reverts back to normal....
After adding a comment in Advanced Mode they seems to be saved, but after some time they mysteriously disappear.
you could add enable/disable to css styles?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.