Override HTML-standardized image width, prevent third-party JS blown up photo?
Question
I host my website on Blogger and have a basic understanding of HTML and CSS. I want to add a collaborative add-your-link thingamajig with SimplyLinked . However...
The HTML they gave me was this:
<script type="text/javascript" src="http://www.simply-linked.com/listwidget.aspx?l=60A7D397-F94E-4840-8DFE-BCCB40BA298F"
></script>
But because I have HTML set the width for every photo posted to my website to be 800px, what really should be a small button at the bottom of the list ends up horribly oversized. See pic here .
How can I (or indeed, can I) override the HTML that programs the body of my blog so that the images in third-party javascript are their proper size?
Thank you!!
[EDIT 7/2/14 12:16 AM]
I so appreciate the responses and am quickly realizing just how little I know about this. Thank you for your help and your patience!
Wyzard: You're absolutely right – it is CSS. (I'm still learning!)
ejay_francisco: The CSS (as Wyzard correctly pointed out) is added right before the end of the skin. It's a ton of code, I don't think I can post the whole thing here..? But maybe this excerpt is helpful:
.post-body img {
width: 800px!important;
height: auto!important; }
#sidebar-left-1 {margin: 0 0px 0 -10px;
}
#Blog1 {margin: 0px 0px 0 30px;
}
#HTML6{
margin:60px 0 0 0px;
}
#navbar, #Attribution1{
display:none;
}]]></b:skin>
1 answers
solution1
0 2014-07-02 02:34:38
You can add this code to your HTML (preferably the <head> , but <body> would work):
<style>
.sl_i a img {
width: 181px;
height: 28px;
}
</style>
…Or even better, add it to your CSS, without the <style> and </style> tags.
Feel free to delete the newlines (carriage returns) and reduce strings of multiple spaces down to a single space if you'd like to conserve space:
<style>.sl_i a img{width:181px;height:28px;}</style>
What it does is target any <img> element nested inside an <a> element nested inside an element of class sl_i . I got that definition by opening the href in a browser window, inspecting the image, and noting its position in the DOM.
DEMONSTRATION: http://jsbin.com/gefiq/1/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.