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?
Related
I am using the same style sheet for 2 pages (index.html & contact.html). All styling has been applied to index.html. Now I have copied and pasted the same code into contact.html, but have found that the new CSS styling I have tried to use will not apply to this page. The pathfile to the style.css sheet has not been changed. What I don't understand is why some of the styling is being applied from the other page but when trying to add new styling it does not?
Have you tried clearing your browser cache or going incognito/private browsing
Are you applying new styles using classes or ids? Id is unique, while classes are reusable. Also if you have inline styling it will override the stylesheet. Can you post your code as an example?
Well there can be a couple of reasons for this:
Make sure that your stylesheet is properly loading. I don't know if you are using in page styling or an external stylesheet but make sure that it actually exists there.
How can you do that? When you open the contact.html page in the browser, hit Ctrl + U if you are using windows or Command + U if you are using Mac. If it is an internal styling, you will be able to see the actual code there. If you are using an external stylesheet make sure that the <link> tag exists in the page. If it exists the right click on it and select Open file in a new tab. If you see can see the code in the next tab. It means that your styles are properly loading.
Make sure that your elements in the html page and stylesheet file have the same appropriate names. For example # of id's and . for classes.
If everything is okay then it can be a cache issue. Since browsers cache the static assets, you should consider refreshing the cache by Hard Reloading the page. How can you do that? It's simple, just hit Ctrl + Shift + R if you are using windows or Command + Shift + R if you are using Mac. If these keys don't work, just click and hold the reload button on the browser until it shows a dropdown. Then simply select Hard Reload.
In case it doesn't work, then send us a link to your webpage. I'm here to help you. Just let me now :-)
I have a site that has multiple pages. The first page is just a listview with icons and links to the other pages. CSS stylesheets work fine on the first page, but when I go to one of the linked pages, my custom css stylesheet (and js for that matter), related to that page, is being ignored. If I look in the FF inspector I see that it has dropped the associated lines that tell it about my stylesheet. If I directly go to the desired page or if I hit refresh, the styles look fine, but whenever I come from a link off the first page, the styles are gone. I see no errors when loading the page. Is this a know issue? How can I force it to not ignore my stylesheets.
I am using jquery mobile 1.4.5 in addition to my own.
Looking further. It looks like hitting the link is appending the body of the 2nd page at the end of the first and not simply loading the 2nd page.
It turns out that by default links behave a little different than normal when using jQuery Mobile. The don't do a full page load, but instead only inject the part contained in a div marked with data-role="page". I did not know this.
http://demos.jquerymobile.com/1.1.1/docs/pages/page-links.html
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
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
At http://jqueryui.com/demos/dialog/#modal-form, there is a sample modal dialog; when you click on "Create new user", it displays a modal dialog and fades everything but the dialog.
On my work based on that, I've specified "modal: true," and the modal dialog appears and disappears appropriately, but nothing else is greyed out; the rest of the screen looks as it looked before.
Do I need to apply additional CSS or serve up an image? A brief look at the sample source code didn't make it clear what I need to be adding so that it greys out the background.
If I need to have other static content served up, how can I serve it up under a Django /static/ tree? In other words, do I need to make /foo/ and /bar/ additional static content directories, or will it work with subdirectories of /static/?
When you're passing modal:true as one of the options to ui-dialog, there should be an overlay div element created with a high z-index and a classname of ui-widget-overlay assigned to it. If you decided to write your own stylesheets rather than use one of the available ones as a template, it could just be that you need to define the ui-widget-overlay class in your stylesheets, set its opacity etc.
Do you have the appropriate theme files in the correct place on the server? If you aren't using a standard default theme you can create your own using jQuery UI's theme roller.