I want to add some HTML and Javascript to my wordress theme; this HTML would usually be added to the head of my page just before the </head> and the javascript just before the </body>. As I have no HTML pages in a wordpress theme how would I do this?
Please go to http://www.jorgemonedero.com/blog/ and click on any of the photograhs - on the single gallery page is a close button (return to index) top right below the social icons - I want to move the close button to the bottom of the page like this - http://clba.nl/sitepoint/test-close-button-position-script.htm.
I was told to add this in the bottom of the page, just before the </body></html> tag
<script type=“text/javascript”>
/* ===== replacing/creating the close button ===== */
var allDiv=document.getElementsByTagName(‘div’);
for (var i=0; i<allDiv.length; i++){
// insert new close button in the caption line:
if (allDiv[i].getAttribute(‘class’)==“item-title” || allDiv[i].getAttribute(‘className’)==“item-title”){
allDiv[i].innerHTML=‘<a href=“http://www.jorgemonedero.com/blog/” title=“Close”>’
+‘<img id=“closebutton” src=“http://www.jorgemonedero.com/blog/wp-content/themes/expression/images/close-button.png” alt=“” title=“Close”></a>’
+allDiv[i].innerHTML;
}
// adapt width of the caption line:
if (allDiv[i].getAttribute(‘class’)==“preview-content”){
allDiv[i].style.width=allDiv[i].offsetWidth+60+“px”;
}
}
</script>
And the CSS below In the <head> of the document, just before the </head>:
<style type=“text/css”>
.close-btn { /* close button in old position (if close button is existing) /
display: none !important;
} #closebutton { / new close button */
width: 27px;
height: 27px;
margin: 0 30px 0 0;
padding: 0;
vertical-align: middle;
opacity: .5 !important;
transition: opacity .35s ease-in-out;
} #closebutton:hover, #closebutton:focus {
opacity: 1 !important;
}
Unfortunately I have no HTML pages so where can I put these codes?
The gallery pages are generated/sit in the “single-portfolio.php” (for example: single-portfolio postid-160) and the pages are styled by style.css.
Hi Eruna,
I tried that and nothing happened?
instead of getting rid of the existing button and making a new one would you know how I would move the existing one down to the bottom? I have been told the problem is: The close button element is being obscured because it’s hitting the edge of the containing div that has a class of “slider-image”. To my mind, the close button shouldn’t be inside this element, but then the image title and counter are, and they’re not falling foul of the same problem.
I tried making the element an image rather than a div with a background, but (a) it didn’t work and (b) it became modified by the “.full-height img” CSS directive.
There are two different questions here, and they should be addressed separately. The code may have been correctly inserted but conflict with the existing template. First check the source code to see if your code was added. If it wasn’t, you could have edited the wrong theme, there could be multiple headers, etc… If its there, then the problem is with the code itself.
