dl_23

23 hours ago, tuanphan said:

Did you add to Page Header or Site wide Code Injection Header?

I actually don't know the difference... From the Team page I did Settings-->Advanced-->Code injection and put that in the header

3 hours ago, creedon said:

@dl_23

Without being able to see the context of everything it is hard to say for sure. I think the kind of logic you are looking for isn't possible with CSS. CSS is kind of like a hierarchy and deeper elements can't effect elements higher up.

For the kind of effect you want you would need Javascript. The Javascript could check for the existence of an element and then apply a custom class to turn on your effect.

Using Javascript requires the business plan or above.

Thanks for your response @creedon! I am completely unfamiliar with Javascript... Do you happen to know the code/functions I would use, or have an idea of where I could learn?

Thanks!

Hi all,

When inserting an element (a button in this case) into squarespace using HTML in a code block, should I give it a unique element ID? If so, are there any requirements/best practices for creating the unique ID?

Thanks!

On 9/28/2021 at 5:57 AM, tuanphan said:

Hi,

You mean move to center?

Hey @tuanphan,

I was able to piece this code for the header injection together:

<style>
  .user-items-list-simple {
    justify-content: center;
    display: flex !important;
    flex: 1 1 0px
    flex-flow: row nowrap;
}
</style>

<style>
  .list-item {
    display: flex;
    flex-flow: column nowrap;
    flex: 1 1 0px;
    max-width: 15%;
    height: auto;
    margin: 0 auto;
</style>

It's working for the team page, but is there a way to target it specifically to that page or list sections with those characteristics? E.g., only list sections that don't include a button/list items that include the button "Read Bio"? Thanks!

Hi all,

Is it possible to target code injections so they only run if certain conditions are true? For example, I pieced together this code for centering list items:

<style>
  .user-items-list-simple {
    justify-content: center;
    display: flex !important;
    flex: 1 1 0px
    flex-flow: row nowrap;
}
</style>

<style>
  .list-item {
    display: flex;
    flex-flow: column nowrap;
    flex: 1 1 0px;
    max-width: 15%;
    height: auto;
    margin: 0 auto;
</style>

But would like it to only target either lists without a button, or only list items with a button that says "Read Bio". 

Any help would be greatly appreciated. Thanks!!

I'm trying to target specific list items (with cards) for color changes. I was able to make it work once using this code in Custom CSS: 

• #yui_3_17_2_1_1632946292246_406 [data-is-card-enabled="true"] {background-color: #23479f}

but later discovered that #yui codes change every time the page is refreshed. I also haven't been able to change anything but the border color, using this code at the moment:

.list-item:nth-child(3) [data-is-card-enabled="true"] {border:5px solid darkblue}

5 hours ago, tuanphan said:

Add to Last Line in Code Injection > Footer

<script>
  $(document).ready(function() { 
		$('div#block-aada196faed00d4629aa').insertBefore('nav.header-nav-list');
	});
</script>
<style>
  .header-nav-wrapper {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
  div#block-aada196faed00d4629aa {
    flex-basis: 60%;
}
</style>

This worked great, thanks! However, is there a way to control the width of the search bar so that it doesn't push the header navigation links to two rows?

Edited to add: Nevermind. Just changed flex-basis to 40% and it worked. Thanks so much again!

4 hours ago, tuanphan said:

Hi,

You mean move to center?

Yes, exactly!

4 hours ago, bangank36 said:

remove the # in the id="#...", that error repeat on the last 2 block

This was exactly the problem. Thanks so much!

4 hours ago, tuanphan said:

Hi,

You want to move this?

Exactly!

Hey @bangank36

Sorry, should have specified!

I'm trying out 2 options for different possible layouts. The lightboxes are on the "Specialties pop out" page.

Site URL: https://tarantula-porcupine-bkrr.squarespace.com/

Site password is 1234

Hi all,

I'd like to add scientific articles (Just title, citation, abstract, and link) to our site.

Is there any way to add automatic pagination to a specific page, so that when a certain page length is hit it moves the last item or so to a "Next" page, which moves its last item or so to the subsequent page, and so on? Any help would be greatly appreciated.

Thanks!

Site URL: https://tarantula-porcupine-bkrr.squarespace.com/

Hi all!

Site password is 1234

Using the Team 2 page layout, I'd like to center the items within each list section while retaining the Max Columns value. I've tried using different design options and using this code in Custom CSS:

.user-items-list-simple {
    justify-content: center;
    display: flex !important;
}

All with no luck thus far. Has anyone come up with a solution for this?

Thanks!

Site URL: https://tarantula-porcupine-bkrr.squarespace.com/

Right now I'm using this code injection in the header:

<link href="//cdn.rawgit.com/noelboss/featherlight/1.4.0/release/featherlight.min.css" type="text/css" rel="stylesheet" />   <script src="//code.jquery.com/jquery-latest.js"></script> <script src="//cdn.rawgit.com/noelboss/featherlight/1.4.0/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script></link>

And this code in the code block:

<a href="#" data-featherlight="#popPK-service">

<h2>

  Population pharmacokinetics </h2>

<p2>

Any more info here</p2>

</h2> <div style="display:none;">

<div id="popPK-service">

<h2 style="font-size:36px;">

Population Pharmacokinetics

</h2>

<p style="font-size:18px;">

 • Derivation of pooled analysis-ready datasets and exploratory tabular and graphical analysis

</p>

  </div>

  </div>

However, only three of the five pop-ups work, with the remaining two opening a small, empty square. Is this a problem with the code injection? Any help would be greatly appreciated.

Site: https://tarantula-porcupine-bkrr.squarespace.com/

Password is 1234

Thanks!

Hey @tuanphan

Sorry, just saw this!

site: https://tarantula-porcupine-bkrr.squarespace.com/

The password is 1234

Since I haven't been able to get the search block to work, I decided to go with Google's "Programmable Search" and just paste the HTML to a code block. However, I'd like to have the search bar in the header instead of taking up space on every page. Any suggestions would be greatly appreciated. Thanks!

Solved, but leaving up for anyone else that runs into the issue. The script will show as disabled until you save changes and exit the editor.

I'd like to add a custom search engine, built through Google(https://support.google.com/programmable-search/answer/4513882?hl=en&ref_topic=4513742) , to our site. Google's instructions for adding to a site in general are as follows:

However, so far my attempts to add a code block have failed, as have my attempts to edit the HTML directly--though, on this front I have absolutely no idea what I'm doing, so that could be a factor...

Any help would be greatly appreciated. Thanks!