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.
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.
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).
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.
For some reason whenever I go to the page of my website that has the crystal report on it my main navigation bar disappears. Here is what the header for the site (with the navigation menu) is suppose to look like:
and here is what it looks like when there is a report on the page:
Could someone tell me what is causing this and how I can fix it?
I'm using master page for the header by the way.
Greener, the Crystal Report viewer is a dynamic HTML representation of the report. It combines JavaScript, HTML and CSS (duh, what doesn't) to represent your report on the webpage. The toolbars are powered by JavaScript calls to .JS that is linked in when the CrystalReportViewer control is rendered to your page.
My point is, all of this introduces a LOT of stuff that can conflict with your existing page. In particular JavaScript errors can occur (which can cause certain things to stop rendering) OR CSS the report uses happens to apply styles you never intended to have applied to objects in your page.
I highly recommend installing the Web Developer toolbar and/or FireBug to FireFox, IE, or whatever browser they are offered on these days. FireFox's implementation of those is quite good in my experience.
When the page loads you can use the 'CSS' menu of the Web Developer toolbar to actually disable some or ALL the styles applied to the page. If disabling Crystal related styles (or all) makes your missing toolbar appear, then it's probably a conflict in your CSS. A front end developer would know to adjust the styles (i.e. add the !important directive to a style, change class/id names, etc.) to address this.
Alternatively, FireBug may be reporting JavaScript errors (heck, even FireFox can show these in the console) which could indicate a problem that prevents the completion of rendering your toolbar.
An outside possibility is that the report itself contains mark-up. For example, if you had certain fields in the report contain HTML that happened to be rendered by the browser, this could create an open div tag, css styles and even JavaScript that would do all the stuff I explained above.
I hope this narrows it down for you. Happy troubleshooting!
I was having the same issue and after hours of searching I finally resolved it... check this out... http://scn.sap.com/thread/1926659
In the crystalreportviewer css file, I adjusted the div class = clear and changed the height attribute and disabled overflow:hidden. Hopefully, that works for you. Good luck!
I found the solution after searching on the web and is a quite simple.
On the Site Master, change the Name for all the places you have the style "clear" for example "clear1" and change it too en the site.css with that name.
The problem is for the conflic with the namespaces with Crystal Report css.
Hope this help.
I'm working on an app that's sort of a bastardization of old and new tech (ASP/ASP.NET). It's all running in IE7. I'd like to be able to right click, View Source and actually see all the html that I'm seeing with my eyes. For example, I have a bit of text in the middle of the page that's in a table. I right click directly on that bit of text and "View Source" and the text isn't in the HTML that I'm looking at. There's no line break or special characters. It's a single piece of text like ABC123. Yet ABC123 isn't in the HTML that I see when I view source.
Is this just something that I'm stuck with? If not, how can I get to the HTML that I want? The app won't run in FF so Firebug is out of the question. I've tried a few developer toolbars for IE but have found them to be flawed at best, not working at worst. It's just very frustrating; I want to make a little change to a style of a TD and I have to go through way too much work just to see if I like it (because of the complex way that the HTML is generated).
When developing in IE I use the IE developers toolbar:
http://www.microsoft.com/en-us/download/details.aspx?id=18359
It will allow you to see rendered HTML on the page, and allow you to drill down and select specific elements that you want to see. There are various highlighting functions, and you can trace styles back to their source.
It's not the be-all and end-all of developer toolbars, but for those times I can't use Firefox / Firebug it does the job over other solutions I have tried
IE7 Pro gives a right click and "View Generated Source" option.
Some ideas:
Firebug Lite
Use IE8 (with its developer tools) in compatibility mode.
MS created a developer toolbar for IE7 (sort of like Web Developer FF extension): http://www.microsoft.com/downloadS/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en
Temporarily add a link with an onclick handler to dump document.outerHtml into a <pre>