I am new at programming websites in wordpress and would like to know how I can use the Google Inspect and Edit Pages and Styles.
Example:
I have images on a website footer. These images are obtained placed there from a arbitrary file.
Question:
How can i via the Google tool obtain which arbitrary file these images are using?
Press F12 and find for your element, under you will see css and can manipulate with it. Also you can change, add, remove elements.
Related
I am new to CSS and just learned how to inspect an element. My question is how can i get a whole/full CSS code for an element?
Let say i need a full css code for a form (https://townends.co.uk) please see search form on homepage, How can i get that whole code for this module?
Thanks in advance.
A
Right click -> View Page Source from site.
Then find "< link rel='stylesheet'" keyword. You have all the css files associated.
Sounds like you could use the dev tools in your browser. They can be super helpful for seeing what actually is affecting different elements in your site. depending on which browser you are using the shortcut for it is different. My favorite suite of in-browser dev tools is in Firefox(check out the developers edition of Firefox as well).
From within the dev tools of Firefox you can click on the arrow pointing into a box from the highest level tabs. This allows you to hover over any element on your page and display the classes and ids affecting the element as well as the rules being used on the element in the dev tool partition of your screen at the bottom. There are many more useful tools in browsers so explore it a little and it will probably improve your productivity.
I would like to set the webpage logo disappear by css display:none.
I already know how to open the element , for example , in the website www.kori.jp, i can find the div class .logo and able to put display:none in it.
But after reflesh or click other page, it appears again. I want to set it invisible for the whole website at the time I have my presentation.
How can i use and set the css in the chrome browse (or any browser which is more user friendly)
I need to present and show the website but cannot display the company information.
Thanks a lot
Not sure why you would want to do this, but I'm not the one to question it. Editing elements in, for example, Chromes developer tools only store it temporarily and, since you're not really changing the CSS of the site, it is obvious it returns to its normal state when you refresh.
While it can and probably will break some functionality, what you could do is hit CTRL + U on a website to show its source, copy+paste everything from there into your own files somewhere locally, and change it that way. Remember to do this both for the .HTML and .CSS files though (and perhaps even .JS files if they exist on the site)!
I want to quickly see how the fallback-fonts is working for a website by excluding one or more specific fonts. Is this possible in Chrome? How?
Have searched for it with no luck.
It's quite easy with the Chrome Inspector. You just have to find the HTML lines which include your custom font (Or in your CSS) and delete it.
Of course you can just modifiy your css directly in Chrome to see what happens.
UPDATE: Delete directly the font in the sources tab in you Chrome Inspector.
I'm trying to re-skin an existing site using CSS only. I will be taking one of their CSS files and redoing it to match a new design, without changing any HTML. I want a good way of continually updating and then testing, but I have to do it locally because they do not have a dev environment. The site itself is dynamic and authenticated, so I can't just download pages from the site and test the entire thing locally. I was hoping that there is a way to tell my browser (Firefox, preferably) to disable that specific remote CSS file and replace it with a local file.
I don't want to use something like Web Develop Toolbar or Firebug because that requires me to manually make the changes each time I load a page. I want something more seamless.
I was thinking one possibility is to load my new stylesheet in userContent.css, but I would still need a way of telling the browser not to load the original stylesheet from the server.
Any ideas?
UPDATE: I found this Mozilla bug report https://bugzilla.mozilla.org/show_bug.cgi?id=208641 discussing the issue of being able to change userContent.css without restarting Firefox. One of the posters (Simon Wilper) posted some files and info about adding a menu item to refresh userContent.css, but it talks about modifying browser.xul and I can't find that file on my system. This seems like the last piece of the puzzle.
You can use AdBlock Plus to create a custom filter to block that one particular stylesheet, so it will not load when you go to the site. This rule will always be in effect, so as you refresh the page, you will not have to do anything extra.
https://addons.mozilla.org/en-US/firefox/addon/adblock-plus/
As for adding your own stylesheet onto that external site, you can use Stylish, an add-on for adding your own stylesheets to particular domains. This, too, will always be present as you refresh the page.
https://addons.mozilla.org/en-US/firefox/addon/stylish/
The issues you will run into, I imagine, will be what to do with images you are intending on linking to in the CSS. You will have to upload them somewhere, reference them absolutely, and then once you are finished, replace the URLs with new locations on their server. Also, that editing Stylish stylesheets within their editor is pretty poor (no code colouring, no code completion.) Probably better to edit it in your editor of choice, and then paste it into the Stylish textarea. Hit save, then see your work (I believe you won't even have to refresh, but I might be wrong.)
Also, both these add-ons are available for Chrome too.
https://chrome.google.com/webstore/detail/adblock-plus/cfhdojbkjhnklbpkdaibdccddilifddb
https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en
I am not sure why people are suggesting to install extensions for this simple task. I would suggest you to just follow these steps to disable whichever file you want from being loaded in your browser that you want. Just follow these few simple steps:
Hit Ctrl + Shift + C to open source inspection
Navigate to Network tab
Right Click on any file from the list and and click Block request URL
Now the file won't load. Cheers!
PS: Steps are same for Google Chrome and Mozilla Firefox browsers. Not tested on Opera and/or Safari.
Install web developer extension
http://chrispederick.com/work/web-developer/firefox/
And then it will create a menu under the Address bar, click on the css tab and then "Disable Styles" > Disable Individual Style Sheet" > then select the style sheet file you want to disable
after this, again click on the css tab and then "Add User Style Sheets" , next select your css file.
Can I hide the code of html + javascript of wordpress pages ?
I mean when anyone hits view source he/she will not able to know that the website was developed using WordPress ?
It is not possible to prevent a user from viewing the source of a website. The web browser needs to be able to render it, so any form of "encryption" would cause the browser to miss-render the page.
There are HTML obfuscation tools online such as this. But you would not be able to use them in WordPress as it generates all it's HTML on the fly.
Rather than hiding the fact that you are using WordPress I would suggest that you ensure your WP install is kept up-to date and that you use sensible security plugins such as Bulletproof Security.
If you simply want to remove the <meta name="generator" content="WordPress 3.4.1" /> tag from your generated HTML, you can add this in your theme's functions.php.
remove_action('wp_head', 'wp_generator');
If you want to remove the "Powered by WordPress" in the footer text, that'll depend the theme you're using. Some themes allow you to customize the footer text from the dashboard, others will need manual modifications in the footer.php.
It will probably still be obvious that you're using WordPress though. A lot of references to uploaded files inside wp-content will be visible and many class names will have the wp- prefix. You probably won't be able to change those without breaking your website.
In general, you can't stop users from viewing the source of your website. The HTML is what defines the markup and content of your website, and the browser simply renders it. The best you can do is obfuscate it in such way that you can't easily tell what each HTML element represents or what each JavaScript function does.
No it's not possible. It'll will always be possible to see it since the browser has to get it in plain text to render it.
Look at JavaScript obfuscation to make your code harder to reuse or understand : How can I obfuscate (protect) JavaScript?
I believe what you're trying to do is hide the fact that your site is powered by WordPress. For that, you can try the suggestions presented here:
How to Hide WordPress Info from Your Source Code