Is it possible when using firebug to debug css issues, to chagne a value of a css rule and then see how it changes the page dynamically /on the fly?
Yes, simply click the variable you want to change in the firebug panel. The variable should appear as a text box which you can edit immediately but not permanently, to show you how a style will effect an element.
Yes, you can dynamically edit and view the changes on the fly.But Firebug does not save changes to your theme, you will need to copy the changes you’ve made in Firebug and paste them into your theme’s style.css in the appropriate spot. These links will be of help :
http://www.tutorial9.net/tutorials/web-tutorials/quick-easy-css-development-with-firebug/
http://www.studiopress.com/tips/using-firebug.htm
Related
I have custom css for my nav buttons. On pressing buttons the page ofcourse reloads and I can for a split second see the original btn colors. Worse if one of my buttons does a "target=_blank" then button that was selected prior to it remains on the original bootstrap colors..
Would appreciate insights how to fully override the css so I always get the custom colors
Regards
M.R.
Try to use grunt to generate inline css and that would solve the problem.
If you are unable to configure the grunt then add button styles in inline.
Based on your site link. Your request takes too long so the css is not there. Just have that css load when your page does. There is no reason to keep a 1kb file to be loaded on request, or any size at all. What is your reason to have this approach?
The current workflow for our designer is:
Opens web page and edit the CSS
Write up all the CSS changes in an issue
Is there a way for chrome to save the 'diff' of the CSS and export it without using workspaces?
As of Chrome 65, Local Overrides can help with this. Check your Chrome version at chrome://version. If you don't have 65 yet, you can use Chrome Canary.
Open Sources.
Click Local Overrides tab.
Click Select folder for overrides and choose a destination.
Make your changes in the Styles pane on Elements panel or Editor pane in Sources panel. Chrome saves the changed files to the specified location.
GOTCHAS!!!
Changes made in the DOM Tree on the Elements panel don't get saved.
Neither do changes made in the Styles pane when the source of the CSS rules is a <style> tag in HTML. At least in Chrome 65. There's rumors that this may get fixed in 66.
Not sure if that's what you want, but...
You can edit the page from inspector (ctrl+shift+I) and after done with all your changes, just click on the stylesheet link at your left and copy everything you need
I want to hide the date on this page.
I tried to change it inside joomla but I couldn't. It's not an article but a JKit page and there is no such an option.
I used the "inspect element" feature to find the corresponding css file and line (bootstrap.css #554). When I change the element through the "inspect element" menu its working but when I open the css file and change it, it doesn't work.
Any suggestions how I can hide it?
p.meta {display: none;}
That ought to do it. Granted, any other metadata will also be hidden. You should add this to a custom CSS file and not modify core Joomla or extension files.
I find it hard to believe that jKit doesn't have a setting for that. (Update: I see that jKit is very new and lacks good documentation.) Also, a template override might be more to your liking.
Most Joomla components allow you to control things like this in the options for the items and also in the menu options when creating a menu link (or setting the global options to change the default behavior. If this component does not, make either an alternate layout or a template override (depending on whether you want to always change this or just on this one page). If you go into the template manager, template view there is a system in place that will automatically create a copy of the layout and put it in the right location. Just edit that to show what you want.
Ok so I solved by editing the according .php file of the component.
I just removed the echo line of the date.
Nothing else worked.
I'm trying to do a simple wysiwyg editor and I am trying to edit this page.
I inserted that code into my editor and included the original css file from the website, yet it seems like ckeditor is putting its own tags around the overall content which breaks the original design. Is there a simple way to overcome this?
Thanks
Inline editing is what you want to do there. Simply render the website (component) in your admin panel, using your default, frontend styles and create inline editors for all editable fields. Finally serialize contents of editors.
CKEditor uses CSS from ckeditor/contents.css - you have to add your CSS there.
Your file is visible at http://makehugeprofit.com/editor/ckeditor/contents.css?t=E0LB and as you can see, it doesn't contain much. How did do "included the original css file from the website"? Merge it with contents.css and you'll have greater luck.
The editable area is an iframe and thus not in the same CSS space as your surrounding site.
I am developing a feature where I want to increase the size(width and height) of Facebook Like button which is getting rendere on my page.
I have tried overidding the css but it is not working as my css is loading very late.
Help required.
Are you sure you're using the correct overrides in your CSS? If I'm not mistaken, it doesn't matter when the CSS is loaded, just that it is loaded.
Be sure to check your CSS includes in the header file to make sure you're using the latest version. Also double check the classes or ids you need to override.
Perhaps you could post the code containing the like button you're trying to manipulate. If you're loading it in via Javascript you can use Firebug or other Web Inspectors to find out the actual HTML that gets inserted.
First of all, the css MUST be interpreted by the browser before the html element it refers to is loaded...
Second, the reason you can't select the button through CSS directly, is because it is rendered inside an iFrame that is controlled by the Facebook framework (you can check this out with firebug or any other inspector).
I'm not sure if it's feasible, but you have two possible ways to do it:
use javascript and the DOM to access inside that iFrame, select the button and style it.
create a button yourself, and give it the same href as the one generated originally, thus losing the fan-counter capabilities and whatever else is part of their framework