I have been trying to figure out how to change the size of the Linkedin Company Profile width which we can create here. They will give you two script tag which will create the widget for you in your site. Nothing else. So you have no control over your css.
I had been struggling for days and finally figured it out. I tried to add inline styling on the site even with the !important tag but it still took the styles from the linkedin.css. I tried styling it every possible way but didn't work.
Since SO allows to share knowledge as Q&A format I thought of sharing this. Please see the answer below.
Here's an example of how to provide the width to a plugin:
<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/MemberProfile" data-id="http://www.linkedin.com/in/xxx" data-format="inline" data-width="400"></script>
You can add a data-width="400" attribute to the script tag. That's all.
Related
I was given a code snippet from a company we are working with for integration but the script they have given me is injecting their stylesheet. Is there any way to manipulate or better integrate their code into the site?
This is what they gave me:
<div id="aiVwbfPVDo2FdPTRGRWzhF9I8RbaTruD_get_appointment_container">
<script type="text/javascript" src="https://providers.doctor.com/siteEnhance/getAppointmentWidget?key=aiVwbfPVDo2FdPTRGRWzhF9I8RbaTruD"></script></div>
When I inspect the code with a web browser it shows a stylesheet and button are inserted...how can I manipulate that code?
If the CSS isn't in your side, you can't manipulate it, the most you can do is override the styles, take in account the CSS specificity
Here is a link for the type of image slider I want. It is by W3schools but, they are using a big css file for that...i only want the relevant parts of it...I mean a css only for the image slider...do you guys know any link or something, not necessarily W3...but any site, from where i can have that ?
Link: http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_self
The only part w3 schools uses CSS for is positioning the left and right buttons, try removing
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> and run it again.
you are using wrong link. this slideshow use w3 framework. go to w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow this is manual js slideshow by w3 tutorials
Hello check out this and tell me if that sounds like what you wanted.
Online demo of the code.
I am using mailchimps popup subscribe form. I have styled the content in mailchimp as far as I can. I want to add some more CSS to the popup, I have tried adding CSS to the CSS sheet already loading in my site yet the form will not pick it up in the popup even with !important etc.
The code from mailchimp is:
<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script>
<script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us8.list-manage.com","uuid":"731f7bb19522a201007a53699","lid":"138afe0d12"}) })</script>
Now, I have tried also adding inline styling in my page for a test, example:
<style>
#mc-EMAIL {
border:6px solid pink !important;
}
</style>
I have noticed my styles for the mailchimp are coming from this however mailchimp say I do not have access to change this CSS file.
My overall question which I am sure someone else must have faced before me:
How do I add CSS to my mailchimp popup form?
Is it Mailchimp popup came out with <iframe> tag?
If yes I think you can't custom it directly with css.
1. Inject your css to iframe by js.
How to Apply CSS to iFrame
2. Change to use mailchimp API integrate with your custom popup html/css.
It might get a lot of effort but easy to maintenance. (can ask me)
Mailchimp API DOC
MailChimp API 3.0 and WordPress HTTP API
GOOD LUCK.
CSS cannot target elements within an iframe from a different domain.
You can however use JS, but thats not a CSS answer :)
Because it's a iframe you can't change the css. But you can do that with JS. As you can see here.
I am developing a website for dentist friend. So far it's looking good, I am using Wordpress along with the enfold theme.
One of the requested features for this website is to include the DemandForce appointment form, so customers would be able to schedule their appointments inside the new website.
I visited Demand force and found that the way to include their contact form is by:
Copying the following CSS file into the header <link type="text/css" rel="stylesheet" href="//www.demandforce.com/widget/css/widget.css" /> Which I did by modifying header.php
Adding the following script into the body; <script type="text/javascript">
d3cp_bid = 'private'; // Business ID in DemandforceD3
//d3cp_appt_source = 'My Website'; //optional. See Instructions.
//d3cp_appt_returnpage = 'your_page_url'; // Optional. See Instructions.
//d3cp_appt_postdata = 'false'; // Optional. See Instructions.
</script>
<script src="//www.demandforced3.com/b/burlingamesmile/scheduler.widget" type="text/javascript"></script>
Which I also did simply by created a raw text field and inputing it.
The result of this can be seen here. As you probably notice the form is not correctly formatted and I don't really understand why. I checked the source code, and both the CSS file and the script are where they should, so I don't quite get the displaying issues.
Since I couldn't figure it out this way, I tried another idea. The actual reservation form is hosted here. The good thing about that form is that is actually responsive. So I created another page with the following:
<iframe src="https://www.demandforce.com/b/burlingamesmile/schedule" width="1000" height="1500"></iframe>. How this looks can be observed here
This behaves ok. But the frame size doesn't adjust well to different screen sizes (smartphone, tablet, etc.) I have looked into this one, but it doesn't do the trick.
At this moment I am running out of ideas, so any comments/help is greatly appreciated, as always.
Thanks so much everyone.
Try adding this to your custom CSS section of the theme:
iframe, object, embed {
max-width: 100%;
}
Worked for me, making the content within the iframe responsive.
I am trying to add a single most recent tumblr post to another page.
I found the easiest way is to use the Javascript code provided by tumblr
here is what they offered:
<script type="text/javascript" src="http://occupy837.tumblr.com/js"></script>
adding ?num specifies the number of posts, so I can see that I am almost there
<script type="text/javascript" src="http://occupy837.tumblr.com/js?num=1"></script>
when I go to the page
(www.Occupy837.com) One single post shows up!
my only issue now is that it has a single 1 on the left of the post
tumblr quotes "[use the] code to embed your posts as basic HTML that you can skin with CSS:"
Does anyone have any idea how I can remove that number?! what do I have to do with CSS to make that disappear!
Add this to your css
li.tumbler-post {
list-style: none;
}
Here is the answer!
after doing some research I found this to be the solution:
ol.tumblr_posts{
list-style:none;
}
be careful not to type "tumbler" because it is always without the "e"
My friend ran into this last night and tumblr exactly provides something that is pretty decent but with very few documentation. Every tumblr post has CSS classes. The above answers work. If you need to know more about the classes tumblr provides right click a post and click inspect element.
You can add these classes to the CSS of your website. Adjusting the CSS of tumblr doesn't effect it.
Adding the above CSS will fix this issue.