I've added a third party widget to a webpage I manage in Hubspot, and it is changing the other CSS on the page. Font family, size, and colors have all changed without me editing any CSS. I haven't found a solution that works yet. I believe the widget is adding a style tag to the body of my page, but I don't have a way to remove it.
I'd appreciate any suggestions or direction toward an answer.
The widget is added with a div and script tag from the 3rd party like this:
<div id="ss-custom-reviews-widget-r"></div>
<script id="ss-custom-reviews-widget-s" src="https://12345.cloudfront.net/custom_script.js"
ss-custom-reviews-widget-api-key="12345" widget-key="{{ tableRow[0].expID }}"
type='text/javascript'> </script>
I'm unable to edit the css or js files for the widget.
Does the widget load its own CSS file? Sounds like it is and it's overriding your styles. To fix it you can modify the widgets CSS sheet if possible. If not add a higher specificity to your style sheet.
It depends on how the widget/library is added.
If it is added via a link or script tag in the HTML markup, some basic compiler line-reading behaviours can work, for example
<head>
<link rel="stylesheet" href="your-widget.css">
<link rel="stylesheet" href="your-custom.css">
</head>
But you should provide a screenshot and detail of how the widget is added.
Related
I'm currently trying to make some CSS changes to a WordPress child theme.
When I use the chrome developer tool, it tells me which line in the style.css file the elements refer to. For example, style.css:17.
However, on certain CSS elements, instead of referring to style.css it refers to (index). For example, (index):54. What does (index) refer to and where would I normally find it to make the changes?
Thanks
Wordpress theme options usually appends a stylesheet to the head of the html document.
<head>
<!-- added by Wordpress, usually found in functions.php -->
<style>
...theme specific styles...
</style>
</head>
I have a site currently styled with custom CSS files, all of which I am happy with.
Now I want to add the boostrap stuff, as there is plenty there I'd like to incorporate, most notably a datepicker and a modal dialog.
However I find that when I do add the default bootstrap CSS (.min and an extra file for the datepicker), the fonts of my custom CSS are overwritten.
Is there a way of 'choosing' (for want of a better phrase) which file wins?
I guess the answer is going to be either edit the bootstrap CSS or try and pick and choose what you want rather than just grabbing the default min files, I guess I'm trying to avoid having to do that.
Some Bootsrap default variables are overridable by passing your values to them, you can see it here:
http://twitter.github.com/bootstrap/customize.html#variables
Make sure you override them after importing bootstrap and you should be fine.
You will need to rearrange your css files in the following way :
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="css/datepicker.css" rel="stylesheet">
<link href="/css/yourstylesheet.css" rel="stylesheet">
I am using twitter bootstrap and i need to change the basic visuals of the framework like the form element etc. Is it a good practice to over write all the styles again in styles.css or modify the bootstrap.css and change the styles directly.
Is there any tutorial which teaches how to set up LESS for Bootstrap and use it ?
See Twitter Bootstrap Customization Best Practices regarding customization and LESS with Twitter Bootstrap.
In general, I wouldn't recommend directly modifying your bootstrap.css file, because it will make it difficult to edit in the future if/when the core css is updated by the bootstrap folks. Instead, just have a second style sheet that is referenced after the bootstrap css. Add your overrides/modifications there, like so:
<link rel="stylesheet" href="css/bootstrap.min.css" media="screen"/>
<link rel="stylesheet" href="css/my_styles.css" media="screen"/>
Of course, for performance, consider combining these and serving them as one to reduce your http requests.
You can do this in Step 3 on the Boostrap Customization page...
http://twitter.github.com/bootstrap/customize.html
You can do depend up on your requirement. If you want to change all the form value in your website, you can modify the bootstrap file. else you can create one more file called style.css and write the css code using specific some classes.
This the tutorial may be helpfull to you
Link1,Link2
For personal/demo/work in progress, I don't want to make my own css file, but still apply some nice looking standard layout. Is there some public css I can link to? Similar to jQuery CDN links?
I want to do this in my header:
<link rel="stylesheet" href="http://someone.com/styles/xyz/layout.css" type="text/css" />
and then possibly one or two wrappers div's in my html file (e.g. <div class="header">...</div><div class="content">...</div> )
I looked at jQuery UI Templates, but they were a bit too complex. They require me to set class names to every button, input, check box etc.
Thanks,
Ola
Twitter Bootstrap is a popular CSS starting point at the moment
I developed an application, and I used header and footer from another app. I created a separate style sheet for my app, called TestStyleapp.css. When I run my new application, the stylesheet I used from the other app is overriding my new CSS file.
Is there a way to include/reference the Teststyleapp.css (I tried calling it last) other than using !important in front of all the elements in teststyleapp.css?
When I use FireBug, I do not see Teststyleapp.CSS at all.
Even if it is LAST, if it is NOT more SPECIFIC (the other page items are more specific) it will not override what is above it in the stack.
Example:
div .myclass (background-color: red);
other (yours has)
.myclass(background-color:green);
you still see red.
<link rel="stylesheet" href="TestStyleapp.css" type="text/css" media="screen" />
It should be linked as such, between the head tags. Make sure the case is correct. I like using all lowercase and _ as a word separator. Just my personal style.
First, get the .css file to show in the NET tab in Firebug and we'll take it from there.