Is it possible to change CSS that google Chrome apply to websites.
I want to hide some elements for example on facebook to dont see it, becouse it eats half of my free time.
Something like
.facebook-wall{display:none;} -auto applied everytime I go to fb.
Assuming I understand you correctly...
This isn't for a website you're making
This is only for your own personal use
Use Tampermonkey.
https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=en
It's supposed to work much like Greasemonkey (the Firefox add-on), and it should meet your needs.
Stylebot is a good extension. You can interactively build some custom CSS to apply to your choice of website.
It even seems to have an accompanying website where other people have shared their concoctions, so possibly somebody has already put together something to filter down Facebook feeds.
Related
I am working on a wordpress/woocommerce website (using the Flatsome theme if it's important) and I am having some CSS issues with the mobile menu overlay. When I preview my mobile site using chrome dev tools everything looks as expected (centered options, large enough to be easy to use, etc) but when viewing the site on actual devices the menu is being forced edge-to-edge in a small, cramped, italicized font. I cannot seem to figure out where it's being overridden, or why it looks different from dev tools to actual use.
This is what it SHOULD look like according to dev tools:
MENU-CHROME-EMULATION
But this is what is ACTUALLY looks like:
MENU-ACTUAL-ANDROID
My website is: TARGET-WEBSITE-CITRUSBOOKBINDERY
FOUND IT! It was actually a conflict with the SG Optimizer plugin rather than a CSS issue, which is why I couldn't find it for so long. I thought I had checked all my plugins, but must have missed that one out. I'll leave the question up in case it can help someone else, though.
Hopefully someone can help me out with this. I've been tasked with giving a mobile template an overhaul on a site that uses BigCommerce.
Does anyone know of an IDE or a windows based browser that would allow me to preview the changes that I make on the fly, preferably via Dreamweaver CC but this isn't a necessity.
Basically I want to completely revamp the homepage so that instead of having a mundane and dreary menu that take up the entire page, I'd like to change it so that I have responsive windows 8 like tiles that one could use to navigate the site.
Since BigCommerce is a paid service you are limited to what is available. You cannot simply download the site and run it on your localhost. I worked on one of those sites before, the best work around I found what to edit in google chrome's inspect element and console "F12" - this way you can make changes directly to the site to see how they render. But keep in mind, F12 is after chrome builds the page and will not match the actual code all the time.
For example, opening the front page of translate.ru, it contains a lot of banners. But by the Developer Tools in Chrome it's possible to go through the page and tweak CSS in-place (mostly adding 'display: none') and eventually the page looks this way:
(source: demin.ws)
So, a question: is there any APIs or existing extensions for Chrome allowing programmatically change DOM/CSS on the page? I saw similar Chrome extensions allowing to tweak Gmail and Google Reader, but it was specifically for those websites.
You can do this using Stylebot.
Facebook has these social plugins:
http://developers.facebook.com/docs/plugins/
that can be plugged into a website very easily. They offer limited customization options, and I was wondering if it is possible to change the default CSS to allow custom fonts and colors, re-size images and re-arrange the placement of the buttons or comment.
The particular plugin that I'm looking at is the comments plug in.
Any help or reference that can help me out is greatly appreciated.
Using javascript, YES you can.
give the iframe a name and using prototype framework it can be done like this
frame1.$('mydiv').style.border='1px solid #000000'
and so on. It is possible with any framework.
Make sure you load this javascript after everything is loaded.
Try adding it just before the </body> ....
You're changing the style locally, not on the remote server. In other words, your browser retrieves the vanilla content from facebook and then the JS does it's work inside your browser w/o FB knowing about it... (might be counter-EULA?)
I'm not so good at css, so I would like to if this is possible.
Let's say I am not happy with the position of an element, I want to move it from left to right; however I want to use drag and drop so the stylesheet automatically updates.
I am using Google Chrome, and would like to know if this is possible via Google Chrome Developer tools, or Firefox Web Developer toolbar.
Thank you.
You might wanna try dreamweaver, in the design tab, you can drap items from one place to another and it'll update the html and css code by it self
The developer tools available through the "Control the current page" icon are to analyze a page, not to change the design of a page.
You can find out which CSS rules apply at certain positions of the source, you can measure loading and processing times, etc, etc but you cannot change anything.
For your kind of problem you would need to look for a (graphical) design tool
Hope that helps - good luck