How target html and css to a specific page? - html

Question

I am using Squarespace as my website builder. I have added a search icon above my blog feed https://www.livingwithphotography.co.uk/learn/ however for some reason the search box also appears on each blog post as well. This is what I don't want, instead I just want it to be shown on this page https://www.livingwithphotography.co.uk/learn/.
In order to code search icon I added this code in the site header
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
I then added this css code
.myTitle {
width: 100px;
padding: 10px;
border: 1px solid grey;
margin: 40px;
font-size: 22px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
Lastly I then added this code to the PAGE HEADER CODE INJECTION
<div class="myTitle"><img src="https://livingwithphotography.squarespace.com/s/Screen-Shot-2015-06-01-at-120646.png" alt="search icon" style="width:20px"> <a href="/search?q=&f_collectionId=5568d109e4b0cb923356090b">Search</div>
<script>
$(document).ready(function() {
$(".myTitle").prependTo("#content");
});
</script>
I hope there is a way, thanks for your help :)

Answer 1

This is a little hacky, but it should work. Wrap the code where you prepend the div in this if.
$(document).ready(function() {
if(window.location.pathname == "/learn") {
$(".myTitle").prependTo("#content");
}
});

Answer 2

Lawrence,
In your CMS (SQ), the type of mod you're wanting here is actually best done in 'developer' mode. Essentially, there's only one collection-ID assigned to the blog itself, which is why when you inject to the main page/content area, it appears across the board as you've noticed. The only differentiating factor is that blog overview pages have added class of "blog-list", while blog entries pages have added class "blog-items" (again, both still contained within the same collection).
So that all said, if you're trying to do this with Jquery in an existing template on a blog module specifically (and you are not toggling into developer), one way to workaround is to target the first instance of the ".entry-header" class on the blog [instead of using 'prependTo' #content].
After targeting the first instance of the entry-header, you would additionally need to also hide the display on the '.blog-items' pages as well (these are the actual entry items themselves). With this approach, your new class "myTitle" should appear only on the blog overview page (in your case: /learn/), but keep it hidden on actual article entry view.
So instead of what you have now, try instead using:
$(document).ready(function() {
$('.myTitle').insertBefore('.entry-header:first');
});
Then in Custom CSS put:
.myTitle {
font-size: 30px;
margin: 40px auto;
padding: 10px;
text-align: center;
width: 201px;
}
.blog-item .myTitle {
display: none;
}
As a note, while it's not totally "proper" form, many just put the whole shebang right into the blog module header since it's page specific and won't run globally.
In that case, you would just input all your code directly into: > Configure Blog > Advanced. Here's a screenshot example (note: shot taken directly from their UI and why the line wraps look funky):
Last note: This method does work, however, bear in mind that if you've manipulated other elements in your site as well (which I wouldn't know if you did) then those other changes could also impact.
Hope this helps.

Answer 3

You could use the Squarespace search block and summary block to do this without any coding:
Just create a new page.
Insert a "search" block and constrain it to only search your blog collection.
Insert a "summary" block and set it to display your existing blog.
Here is an example I set up on my site to demonstrate: http://www.figjamit.com.au/example