While implementing the notifications via EngagesSpot. It adds two stylesheets one for engagespot and another one for fonts.
As displayed in the below picture:
Due to this,(fonts style-sheet >> https://fonts.googleapis.com/css?family=Montserrat:100,200,400").Custom css gets distorted.
Is there any way to fix this issue?
I don't think it's the Google font that's breaking your CSS. Some CSS properties in the engagespot.css file might be overriding your CSS. We'll be soon releasing an update that fixes these CSS issues for some websites.
it looks like you have syntax error, get rid of extra rel="stylesheet"
Related
On a blog post on my website, I decided to share some of my code using a GitHub Gist, since I thought it would be an easy way to apply code formatting and syntax highlighting to my code.
I've embedded the Gist in the post, but for some reason my website's CSS has overridden the CSS of the Gist and so I've ended up with code which is all grey and in a serif font. I assumed that since the stylesheet in the Gist is being linked to after my main stylesheet link, it would be fine, but this seems not to be the case.
How can I make it so that my main stylesheet won't modify the styling of the Gist?
Edit: Here is the page where the problem is occurring, the Gist is near the bottom.
Are you using the embed option? There would be one located on the left sidebar the says "embed this gist" which uses different ids from your css stylesheet so it wont conflict.
You can also rename your selectors on your website, the second stylesheet takes priority not the first.
I want a background image on my page (background.png), but some rogue CSS is thwarting me.
I can see that my style.css from line 39 is being overwritten. I would think this is being done by something like style.css. I search and do not find anything but my original desired specification in that file. I can not find out what css is doing the overriding.
I have searched all the css files I can think of for the specified image (bg_p2_28.jpg). I have searched all the css files for background, nothing seems to come up. It is not being specified in the main HTML
I am barely struggling through as a reasonably competent programmer that has not used HTML since the mid 1990's. I am just trying to modify a template I bought.
What techniques can I use, or how do I interpret what I have here shown here to figure out what CSS override is ultimately being pushed into the page?
EDIT:
Adding the !important; works. It feels very dirty for some reason. I do not know why. I have tried following the javascript in, but the debugger is confusing to the uninitiated. Is the Important! a terrible thing to do, or reasonable? I think it would be useful to understand where these are being set in the java code, but when I search the code, I think the values are stored in variable, so can only be caught at run time.
That's coming from the inline style="" attribute.
If you don't see it in the HTML source, it's probably being set by Javascript.
You can right-click the element in the inspector and click Break on Attribute Modifications to find out where.
You could try background: url(src) !important;, not the perfect solution, but i think it will work for you in this case.
The grey element.style means that it's a style attribute directly on the element itself. Any style on an element will override styles from style sheets unless the sytlesheet style is marked with !important
It's the red marked "navigator" I am talking about. I need to move them away so they don't mess up my design. I have tried to change a lot of different settings without no success.
Here is the View for it:
What should I do?
I am using the following themes: Pixture Reloaded 7.x-2.2 and AT Core 7.x-2.2
Modules: Calendar, chaos tools, views, date modules..
It is obvious some mix up in css. It is a large possibility that elements created by calender inherit some css properties.
Easy fix is to view the source code of he page. Using FireBug(for firefox) or some alternative will make it easier to find. You will find some css rules being applied to your menu. Just try to enable and disable some css rules and see what happens.
When you find mischief just write a css function with higher priority which would negate that other global rule.
I got the same problem and i solved just yesterday hacking some css. I share you here what i have done in my case that i think i will help you also or at least work around there.
First to fixing the big buttons of the calendar navigation you should look in your theme css files at some css class called "ul.pager li a" or "ul.pager li span" there must be a property like "display:block" that is causing this buttons see that way. i just commented that property and they look as normal them should be.
In my case the theme css file was "navigation.css" and this property inside that file is found at line 375. Maybe in yours could be similar, anyway you can check and find where is using the firebug extension for firefox inspecting that buttons.
Second for fix the position of this navigation buttons is something similar but in the css file of the calendar module itself, after modifying the core css file of the module i recommend you to override it placing a copy of it in your template css folder and declaring it on the .info file of the template. In my case the file was calendar_multiday.css, in the line 778 and 818 there are the classes ".view .date-nav-wrapper .date-prev" and ".view .date-nav-wrapper .date-next" inside them with the property "right" and "left" i controlled the positions where must be this buttons.
This is the work around on how i solved it, hope this works for you also but if not anyway the problem is close there.
What I would like to do is apply a system-wide CSS reset. How can I do this?
Here's a little bit of information about what is meant by a CSS reset.
The goal of a reset stylesheet is to
reduce browser inconsistencies in
things like default line heights,
margins and font sizes of headings,
and so on.
http://meyerweb.com/eric/tools/css/reset/
We do this by linking a reset.css in our host html page, as you normally would. It works like you would expect. You can also link reset.css into your module file, but it seems more appropriate in the host page.
What you might not expect is that GWT's default css will be injected afterwards, even if you don't link it in, if you're inheriting the default theme in the module.xml file. You can affect that behavior. Read http://code.google.com/webtoolkit/doc/latest/DevGuideUiCss.html for more information about the details of CSS and GWT.
For the past few years, I've been developing sites with Eric Meyer's CSS resets. I love it and will never look back. I never even thought of looking back. But then today, we implemented a Telerik Rad Editor control. Unfortunately the CSS resets break the internal layout of the Rad Editor as well. Is there some way to prevent the resets from cascading down into the Rad Editor.
Thanks in advance.
We use the RadEditor extensively in our application, and have found similar issues with it. I've been working with the editor CSS code for almost 2 years now, and have found it to be fairly easy to overcome these issues.
Firstly, are you using a custom skin for the editor? This is the best way to overcome these issues. If you aren't you can simply add one by copying an existing theme and renaming it. This will allow you to modify the CSS in an external file, rather than trying to fiddle with overriding the stylesheet the is embedded in the Telerik assembly.
After that, it's going to be a simple matter of isolating which styles are causing the issues. I'm guessing from your comments that the buttons are not rendering correctly, most likely because your reset stylesheet is overriding the default list styles. I would use firebug to see where the reset file is overriding styles defined in the stylesheet.
Most likely it's because there is no style definition at all for things that are being reset, as anything defined in the Telerik stylesheets would be more specific than the reset styles, as they would contain a preceeding class name, which would increase the CSS specificity by 10.
If you could provide more specifics, I'd be happy to try to help more.
Hardly, as there are no "excluding" statements in CSS. You would have to re-introduce the things the reset stylesheet removes.
But from experience, I'm quite sure the reason for the screwup is just one or two things going awry. It may be possible to examine and fix them in reasonable time.
You could use an iframe to delineate the CSS contexts. But, it makes some things harder.
No. That's one of inherent problems with CSS reset.
That's a $1000 control?! Perhaps you should give them a call and request making it compatible with CSS reset.
Reset makes some deprecated attributes from Transitional HTML unusable, but "industry's best" editor shouldn't be relying on these. Everything else is fixable with appropriate stylesheet.
Actually, you can specifiy specific CSS files for the RAD Editor to reference when it loads up. Just create a CSS file that adds in what the reset takes away and only the RAD Editor will reference that CSS file.
For example this editor will refence a specific file called 'radEditor.css" when it loads on a page.
<telerik:RadEditor ID="RadEditor1" runat="server" AllowScripts="True">
<Content>
</Content>
<CssFiles>
<telerik:EditorCssFile Value="~/css/radEditor.css" />
</CssFiles>
</telerik:RadEditor>
Good luck, and hope this helps some.
You can find out what are the default values for the element (make an unstyled page with only the element and check with Firefox's DOM Inspector), then add the rules again at the end of your stylesheet with !important added to every rule.
If you're trying to work out the styles the elements started with you could refer to one of the popular browser's default stylesheets - for example, here's the WebKit one for HTML. I presume from the markup you can narrow it down to just a few elements?
Edit: Here's the Gecko one.
I'm just adding this here for reference. Twitter Bootstrap makes most of the buttons disappear. Here is the fix. The EditorCssFile is just used to change the background color of the editor back to white.
<style type="text/css">
.telerik img {
max-width:none;
}
</style>
<div class="telerik">
<telerik:RadEditor ID="RadEditor1" BackColor="White" ToolbarMode="RibbonBar" runat="server">
<CssFiles>
<telerik:EditorCssFile Value="/assets/css/editorContentArea.css" />
</CssFiles>
</telerik:RadEditor>
</div>