Isotope Corner Stamp (WordPress + Masonry) WordPress
- SOLVED
Hi i am using Isotope and Masonry layout on a website and i am trying to add a corner stamp to the layout but it isn't working.
So that you guys understand what I am trying to accomplish see first the following websites.
http://isotope.metafizzy.co/custom-layout-modes/masonry-corner-stamp.html
http://jsfiddle.net/desandro/xaE7F/
Other examples:
http://masonry.desandro.com/demos/corner-stamp.html
Now the website that i am implementing this to is http://www.latinunit.org
I have tried copying the exact methods found in the source code and the guides but I cant get it to work.
What i am trying to accomplish is to make the red square (corner stamp) stay on the top right corner so that i can add an Google ad
Answers (2)
Arnav Joy answers:
you have added it inside the "content" area of your files , rather you should add it to the header area and then it will work
open the header.php file and then find
<div class="header">
<div class="logo hide">
<!-- code for logo-->
</div>
<div id="megaMenu">
<!-- code for menu-->
</div>
<!-- add here your code-->
<div class="corner-stamp">corner stamp here.</div>
</div>
then at custom.css replace all the css for corner-stamp and replace with following
.corner-stamp {
background: none repeat scroll 0 0 red !important;
border-radius: 5px 5px 5px 5px;
color: white;
float: right;
height: 53px !important;
margin-right: 8px;
margin-top: 4px;
padding: 10px;
width: 251px !important;
}
see the screenshot of what i did from doing above things
let me know if you need any help
Plugarized comments:
Hi, the cornerstamp has to be insise the masonry layout along with the other items and it has to be filtered using some mothods found in those pages i listed so that when tue filtere from tue isotope ared the corner stamp stays in the same position.
Please try and append new items to the isotope metafizzy page and you will understand what i am talking about
Arnav Joy comments:
how can I add an item and where can you send a screenshot
Plugarized comments:
It seems that the fix is rather easy see this link ([[LINK href="http://jsfiddle.net/desandro/xaE7F/"]][[/LINK]])
I have to mod my js file [[LINK href="http://latinunit.org/wp-content/themes/videogrid-parent/js/isotope.js?ver=3.4.2"]][[/LINK]] and add the section from the link above where the comments are.
Please see the attached image...