Is there an easy way to find out which font variants are actually used within a page?
I'm working on a site that has a full font family imported, but would like to remove unused variations. I can go around inspecting elements, but figure there might be an easier way.
There are tools like Fount: https://fount.artequalswork.com/
But it's not time-consuming at all to do it by hand, really. If you're using Chrome just right click the page, go down to Inspect in the menu, and under the Elements tab you'll find the HTML of the page. Click inside the box and hit command + F to bring up the search box, and type in "css" so you can easily find their CSS sheets. Right click on the link and hit Open and you can search for the font from there (command + F again).
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'm using visual editor as Widget, and i create google fonts in order to choose the letter, color , basically control the fonts.
But i'm not understanding why do I have so many space between lines. How you can see in the picture, I have a lot of space Between Morada and Rua da Praça. And again between 7645 Vila Mova.
can you explain me where and how can I control that space?
Open the page with a browser. See what tags you are having there and what is their styling. For instance, if you open the page with Chrome and open the browser console, by right-clicking and clicking on Inspect Element, then you see the generated html. Click on the tags where you have the problem and see the CSS rules. Try to untick some of the rules until you manage to get rid of the problem. Your last untick is on the CSS rule which yields the problem. If you still did not find the solution, see whether there are tags, like <br/> and click on them still in the console, press backspace. If you manage to reduce the gap, then those tags are to blame. If you still did not find the source of the problem, then see the parent of the tags and check their stylings. And so forth, until you find the exact issue.
i want to change the size of the header of the Liferay portal page through css.How do i achieve this? i also want to change the color of the menu.
Nowadays every browser has some Firebug-style developer tools. E.g. on Firefox, hit F12 and the tool will open at the bottom of the page. Choose the "Inspector" (labels might vary, I'm looking at the german UI), find the "choose an element of the page" button, then point your mouse to the area of the page that you want to explore the CSS. You'll see how the appropriate part of the DOM is selected in the inspector and even the actual CSS rules that apply. You can temporarily change the CSS there and try out what values you actually want.
Next, learn how to build a theme in Liferay. You'll add the required CSS, identified in the step above, in your theme's custom.css.
Yes, this isn't the actual CSS that you need (probably you just wanted to know that single line), but your next question would be on how to change a different aspect of the default theme - this is how you can find it out and even solve other theme-related problems that you didn't even think of yet.
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.