I am trying to customize my Google Chrome browser by adding an image at the very top in the tab container above the search bar. I notice a few themes in the Theme store have images, but I couldn't find how to add custom images from any online source
I also noticed that every time I installed a theme, a file would get downloaded into my computer. I'm not sure where to find this file but could I modify the code to get the desired changes?
Related
I have a webpage that has an image that is stored in google drive, and using the google drive embed code results in this-
and I want to include this image in my website without the border and tools, making it look like this-
Adding the image file to my project is not an option, as I am using google apps script as web domain as I am not old enough to have a credit card to purchase REAL web domain, and I am broke and cannot simply rake leaves or shovel driveways because of COVID. so I cannot add the image file to my project, any advice?
Answer:
Instead of the embed code, use the view link.
Example:
<img src="https://drive.google.com/uc?export=view&id=FILE_ID_HERE">
This solution is a little bit ironic. The tool that stack overflow uses for images can be used for anything else, so I just had to right-click on the image in this question, click on 'copy image URL' then put it in my website and I got a working image!
I want to make an app which will be working similar to Stylish extension and google chrome inspector. Is it possible to make something like this but working not as an extension but as a separate service?
I've already done client app based on react which have menu with elements to change, for example I can choose font type, font size, colors, etc.
Beside menu, I have iframe which displays site from url - my idea was to download whole webpage on the server side, deploy it with docker on nginx to serve it and send back my new url to the client. Is there any easier way to do it?
I've also done simple backend app based on spring which downloads the whole webpage to folder.
The most important thing in this app is to generate separate CSS file which can be later included to given webpage.
I struggle with few problems:
How to display website from url, if with iframe, how to change CSS of given website?
How to display changed CSS immediately?
How you got any ideas or tips how to do it?
Maybe using javascript you can apply your changes to the layout and save it as 'actions' to perform after rendering,,,, or you could generate own css and based on that css generete functions, which perform the change to the layout ( the other way around )
To swop the stylesheet, give the link element an id so you can reference it, then reset its href, i.e.
<link rel="stylesheet" href="style/default.css" id="themeStyles" />
function setTheme(themeName) {
let stylesheetUrl = 'style/' + themeName + '.css';
document.getElementById('themeStyles').setAttribute("href", stylesheetUrl);
}
If the page hosted in the iframe is served from the same domain as the iframe then this is easily done with cross frame scripting.
I am creating an angular app, i just put a thumbnail slider in a page later i removed it. The problem is that html portion of thumbnail is still showing in the page. I've tried everything and at last i pulled the previous version from git there also that portion is showing in local. I'm using Xampp server. Is it a virus? What may be the issue?
Actually this portion is not in the code, but it's still showing, i've deleted the corresponding js files and css too.
I have included the CKfinder in my html file. After included this file, I'm able to see the images in folderwise in popup window and able to store the image as well. As per my view, when we click on browse server button, it is creating ckfinder folder and storing all the uploaded images. It is working fine in XAMPP server.
But when I tried to implement the same thing in my Eclipse project, Images folder is not showing. It's showing blank in the popup window.
How to fix this issue? Kindly help me.
If I am trying to edit some CSS in a huge project using the built-in developer tools in Firefox (which is accessed by right click and then selecting Inspect Element), is there a way to make those changes permanent?
Actually there is a big number of style sheets and and I could not locate this one property in them? I just could not find the file which contains this property, so I want to make permanent changes to the CSS from within the browser. Is there a way?
EDIT:-
To set up in Chrome first you have to add your project file to a "Workspace", Go into dev tools Ctrl+Shift+I then click on the settings gear and on the left yoou should see Workspace.
After you have added your Project folder into a workspace close out of options and click on the "Sources" tab (still in dev tools)
Now load up your index.html from your LocalHost like you normally would. In the sources panel you should see the currently loaded page and its resources. Right click on your .css file and click "Map To File System Resource" it will bring up a search box where you can search for the corresponding .css file from your actual project folder (that is now part of a workspace in Chrome). Once you make the link Chrome is smart enough to link up any other CSS and HTML files that are in your Project Folder.
Now you can make changes in the Elements tab in Chrome Dev Tools and they changes will persist. Also in the ELements tab it will show you what css file and what line any given Style is originating from!
The best thing about this is if you use Sass or Less then it will map your Scss files back to the CSS styles being processed in Chrome. (please note if using Sass and Less you have to have CSS source maps turned on)
If you don't want to do this by hand, there is a plugin for FF called Stylish that allows you to define rules-based style tweaks.
EDIT
I mention this only because it allows you to publish a set of style changes that any Firefox client can pick up and install to a specific installation. Since one can't "permanently" change the contents of remote style information, the only solution is to manipulate it on a semi-permanent basis on each user-agent that needs the changes.
You can use the Web Developer Toolbar for this matter. By going to CSS menu and then to 'Edit CSS' where you can edit and save your changes. Il also provides tools for identify which files are relevant and modify them manually. Also you may try Firebug extension where you can do similar things.
Links to both here:
https://addons.mozilla.org/firefox/addon/web-developer/
https://addons.mozilla.org/firefox/addon/firebug/
If you have installed Firebug you could install cssUpdater to simplify the process of saving changes.
https://addons.mozilla.org/firefox/addon/cssupdater/
You can take a look at userContent.css:
http://www-archive.mozilla.org/unix/customizing.html#usercss