Is there a way to override Olark css? - javascript

I'm working with Olark chat but seems like the design customization is limited, I'd like to change the background color for example. This is the script that loads Olark chat box.
I was thinking about something like loading a script after X seconds and overrides the CSS file that is loaded by this script but as you can be thinking there's not a way to know how much will take load the CSS file from Olark.
I'm using ruby on rails btw.
I'd appreciate any help, thanks.
<script type="text/javascript" async> ;
(function(o,l,a,r,k,y){
if(o.olark)return;
r="script";
y=l.createElement(r);
r=l.getElementsByTagName(r)[0];
y.async=1;
y.src="//"+a;
r.parentNode.insertBefore(y,r);
y=o.olark=function(){
k.s.push(arguments);k.t.push(+new Date)
};
y.extend=function(i,j){y("extend",i,j)};
y.identify=function(i){y("identify",k.i=i)};
y.configure=function(i,j){y("configure",i,j);
k.c[i]=j};
k=y._={s:[],t:[+new Date],c:{},l:a};
})
(window,document,"static.olark.com/jsclient/loader.js");
</script>

Yes there is a way. Create a new rule set inside your CSS file like the following:
#olark-wrapper .olark-launch-button {
width: 60px !important;
height: 60px !important;
}
Note: width/height are just examples, feel free to use any other
fields.
This rule set name gets generated by the the script you mentioned above. However, I do not believe you can change the background color (i.e. background-color: aqua;). But Olark provides options on their website to change the colors of the chat icon.

Related

Is it not possible to change CSS attributes with jQuery in Rails?

Say I have an example div called test-test which is some pixels wide and some pixels high, and I wish to add its background color using jQuery. Having thought this was very easy in Rails, I'm surprised to see it doesn't work.
My html:
...
<div class="test-test"></div>
...
My test.css.scss:
.test-test {
width: 300px;
height: 300px;
}
My test.js file:
$(".test-test").css("background-color","yellow");
Because a "hello world" test works I know my jquery and asset pipeline is working correctly, it's just changing css attributes that doesn't seem to work. Is there any workaround to this or is it specific to what you want to do in each case? This is just an example so this is not what I really want to accomplish, just so you know.
When setting background-color in javascript the property should be named.
"backgroundColor"
so
$(".test-test").css("backgroundColor","yellow");
It's also case sensitive.

Can #page directive(CSS) values be changed from code behind(C#) or javascript?

With the #page directive, we can specify printer margin of the page (which is not the same as normal css margin of a html element):
<style type="text/css" media="print">
#page
{
size: auto; /* auto is the current printer page size */
margin: 0mm; /* this affects the margin in the printer settings */
}
</style>
Can these values be changed from code behind(C# Code) or javascript?
i.e set size:landscape or size:8.27in 11.69in; and change margin value from code behind(C#) or javascript or jquery.
This seems to be inline css (directly in the page). If so, I can`s see any reason you should not be able to just output the values you want to be able to change as variables or properties from C#. Your browser does not know or care how the page is composed, it just accepts the html and other stuff within it - in your case, css.
If you are using external style sheets, you could use different style sheets for each option you want to provide, and then use C# to change the url to the appropriate style sheet as needed.
Yes, you can also change the CSS from java script if you prefer that. I havent tried manipulating#page` directives myself, but I can't see why it should not work. There are several ways to change CSS from JS. For example, a quick search turned up this other answer on SO.

How to pull Javascript from a specific element on a page from the front end

So I found a really cool web structure I'd like to implement into one of my sites on http://www.nextendweb.com/demo/smartslider2/. There are settings gearboxes that rotate as the user scrolls down the page.
It's being done using the Transform: Matrix function. I would post a code-block of the element but I can't seem to locate the JS behind it. This is not my site, so I obviously only have access to the front-end.
HTML
<div class="cog cog2" style="transform: matrix(-0.68823, 0.72548, -0.72548, -0.68823, 0, 0);"></div>
CSS
#technicaldetails .cog {
background: url(images/bigcog.png) no-repeat 0 0;
width: 502px;
height: 476px;
position: absolute;
}
the element in question is located in a div with Id's cog1 & cog2 if you're having trouble locating it on the web page.
could anyone guide me in finding the JS behind this element from the front-end? I tried inspecting and looking through the sources...
The site uses a JavaScript plugin called "TweenMax" from http://www.greensock.com, which is part of their "GreenSock Animation Platform (GSAP)" product.
The usage is simple. For example:
TweenMax.to("#technicaldetails .cog2",1,{rotation:"-=20"});
perhaps this website would be useful: http://croberts.me/2013/02/16/howto-rotating-gears-when-user-scrolls/
theres js, html and a codepen example
What I do when I want to find a behaivior or a style in a site is look for the ID or class name in all the javascripts and CSSs. In this case, you can find that the .cog class is being used in the scripts.js file, in which they use the TweenMax plugin to update the cog's rotation. Check that plugin too.

Making All image bootstrap responsive class automatically

is there anyway to make all image in html page to be responsive without need to type class="img-responsive" and width="100%" ? because i'm using tinymce html editor and when i put image into there, the image is not responsive and it's looks broken when i browse my site using smartphone, so maybe there is some way to make all to be responsive by default?
or maybe there is some javascript to do that? detect all img tag in page and add
class="img responsive" width="100%"
okay sorry that i miss something, this question is already been asked in here
so i just put a link to the answer
Images not responsive by default in Twitter Bootstrap 3?
so just add
img {
display: inline-block;
height: auto;
max-width: 100%;
}
just add this css line in the very bottom of your bootstrap.css or just make a new css file and named it mystyle and put it after every css link in your head (i do it like that so keep the original bootstrap.css file clean)
You can override another css attribute by using !important; as addition to your css attribute. So, without knowing the depth of bootstrap, you can try to add something like this to your stylesheet
img {
width: 100% !important;
height: auto !important;
}
Or insert this between <style> and </style> in your head-section.
Hope this helps as a quick tipp. If you need other suggestions please let me know.
UPDATE
The other provided answere is the clean one. You should mark that answere as correct ;)
Best regards,
Marian.
No need to handle this via css. You can apply "img-responsive" class at the time of adding the image in tinymce editor itself.
Add below property in your tintmce editor properties:
image_class_list: [
{title: 'Responsive', value: 'img-responsive'},
{title: 'None', value: ''}
],
Reference and credits:
http://archive.tinymce.com/forum/viewtopic.php?pid=114620#p114620

How to change background color of jQuery UI Dialog?

I am having tough time figure out how to change background color of jQuery UI Dialog.
I've seen many reference how to change/remove title bar but not entire background including those curvy corner.
Here is my try:
http://jsfiddle.net/dEvKb/11/
The problem is .ui-widget-content only applies to square area within the dialog but not including curvy corner.
I found a class .ui-corner-all class hoping it will color the entire background but only half of the dialog is colored. (you can see this in the jsfiddle)
Has anyone done this before?
you can use this way
http://jsfiddle.net/dEvKb/15/
You should set to all class background with use !important.
.ui-dialog,.ui-widget, .ui-widget-content, .ui-corner-all, .foo, .ui-draggable, .ui-resizable {background:yellow !important}​
Use the css classes:
ui-dialog
Main container of whole thing
ui-dialog-title
This is where the title actually appears
ui-dialog-titlebar
Area where title of dialog would be if exist
ui-dialog-content
Area where your div is actually loaded
ui-resizable-handle
These divs are used to resize the dialog but are usually invisble according to your setup
ui-dialog-buttonpane
Here is where buttons would go if exist
ui-dialog-buttonset
This is where the buttons actually appear
Also, unlike answer given selected, take note, YOU DON'T HAVE TO USE !important.
If you want a direct call, set everything up and create your dialog. Load the page in Chrome or FF (chrome easier to read). Then simply open the dialog and select the element you want to change. Look at its CSS in your Browser's Developer Tools. You'll be able to see the exact line jqueryui uses to make it's css call. Simply copy that line into your own CSS and ensure it's loaded later and your dialog will get the new overwrite.
If you want to target a specific dialog you can do it this way:
$('#yourDialog').dialog(
{
autoOpen: false,
open: function(e) {
$(e.target).parent().css('background-color','orangered');
}
});
Use this class in css
.ui-dialog .ui-dialog-content {
border: 0;
padding: .5em 1em;
background: #ff0000;
overflow: auto;
zoom: 1;
}
Please be aware that you could also go and make your own custom CSS using this link in jQuery
http://jqueryui.com/themeroller/
jQuery allows us to make a custom-css. Please select the theme you would want from the gallery and hit the edit button, you will be able to change almost everything about the dialog box, as well as the rounded corners.
You then need to download the entire jQuery pack within it you will find css/custom-css folder just put in your css tag and it will be all sorted basically.
The above ways are also true as you will be able to change it but you will have to look for the classes and stuff like that in the CSS well jQuery does that for us in an easy way and it worked for me as well so you can try it too.
What I basically do is create two to three custom style sheets and then load them up and play with them and finally choose one for the website and discard the rest.
I hope this helps...
Short answer
your_stylesheet.css
.ui-widget-content { background: yellow; }
Make sure your stylesheet is included after the JQuery UI stylesheet, e.g.
your_webpage.html
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link href="your_stylesheet.css" rel="stylesheet" type="text/css"></link>
Long answer
To determine which class and style to override, you will need to inspect a tooltip. Show the tooltip:
$("#selector_for_item_with_tooltip").tooltip('open')
Right-click on the tooltip and choose "inspect". Scroll down in the "Styles" tab until you find the attribute you care about (background-color).
You can click on the value and type in a new value to verify that it will have the effect you desire.
To see the format you will need to use to override the format, click on the filename:line # on the upper-right to go to the .css file that defines the attribute (jquery-ui.css:802)
The format will be
.ui-widget-content
{
background: yellow;
}
Your .css file needs to use the same style and be included after this one (see "short answer", above).
People sometimes incorrectly add !important css suffix to bypass this requirement but that causes all kinds of other headaches.

Categories