Styling descriptions to portfolio grid layouts in 7.1

Site URL: http://www.studiofurks.com

Under the portfolio title, I've added a brief description of the project. I've done that bit but I don't know how to style it / change font and size. I heard it would have to be javascript I believe.

This is the code that I've used to put into the footer injection:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
  var title = document.querySelectorAll('h3.portfolio-title');
  for (var ss = 0; ss < title.length; ++ss) {
    var item = title[ss];
    item.innerHTML = item.innerText.replace(/#/g, '<br/>');
  }
});
</script>

On the actual post of the image I've used:
 

Title#Description

I just need help how to style this. I believe it's Javascript, if someone could help then I'd be grateful. Thanks.

You can use CSS but you didn't say how you wanted to style it.

e.g.

h3.portfolio-title {
    color: green !important;
    font-size: 20px !important;
}

@loueeze

Hey thank you, I tried the CSS but it changes both lines under the thumbnail

www.studiofurks.com

What are you trying to achieve? This was an example of how you can target the lines with CSS. You don't say what you want to do with them.

www.studiofurks.com/work

I just want to make the second line (description) under the thumbnail in a smaller font and a different font

Try this. It just has font-size but you can add whatever else to the style.

$(document).ready(function() {
    var title = document.querySelectorAll('h3.portfolio-title');
    
    for (var ss = 0; ss < title.length; ++ss) {
        var item = title[ss];

        var clientName = item.innerText.slice(0, item.innerText.indexOf('#'));
        var clientDesc = item.innerText.slice(item.innerText.indexOf('#') + 1, item.innerText.length);
        
        var newTitle = clientName + '</br><span style="font-size: 0.8rem">' + clientDesc + '</span>';
        
        item.innerHTML = item.innerText.replace(item.innerText, newTitle);
    }
});

@loueeze This code doesn't work sadly. It says Syntax error on line 1?

$(document).ready(function() {
    var title = document.querySelectorAll('h3.portfolio-title');
    for (var ss = 0; ss < title.length; ++ss) {
        var item = title[ss];
        var clientName = item.innerText.slice(0, item.innerText.indexOf('#'));
        var clientDesc = item.innerText.slice(item.innerText.indexOf('#') + 1, item.innerText.length);
        var newTitle = clientName + '</br><span style="font-size: 0.8rem">' + clientDesc + '</span>';    
        item.innerHTML = item.innerText.replace(item.innerText, newTitle);
    }
});

I've validated it again but I'm not sure why it's not working. 

You could try replacing just the bit between the document ready open/close brackets with my code.

@loueeze It's odd, still have the same issue. I am putting it inside the right area? Custom CSS?

Ah, that's it! It's JavaScript. So it goes in where your original JS script was injected. It's just an updated version of what you originally had. 

@loueeze I tried replacing the existing code with the above.

However when I insert the code and click save it's displaying as:

Did you put it in like this again?

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    var title = document.querySelectorAll('h3.portfolio-title');
    for (var ss = 0; ss < title.length; ++ss) {
        var item = title[ss];
        var clientName = item.innerText.slice(0, item.innerText.indexOf('#'));
        var clientDesc = item.innerText.slice(item.innerText.indexOf('#') + 1, item.innerText.length);
        var newTitle = clientName + '</br><span style="font-size: 0.8rem">' + clientDesc + '</span>';    
        item.innerHTML = item.innerText.replace(item.innerText, newTitle);
    }
});
</script>

@loueeze You life saver!! It works now. I really appreciate this!

We got there 🙂 

We did! – do you know what I'd need to add to the code to change text colour / boldness

You can change the style of the newTitle using the inline CSS. Keep the rest of the code the same, just edit or replace the line"var = newTitle" with one of the options below.

For bold & a named colour: replace "green" with your chosen named colour in this line:

var newTitle = clientName + '</br><span style="font-size: 0.8rem; color: green; font-style:bold;">' + clientDesc + '</span>';

OR

For bold & a HEX colour: replace "#365194" with your chosen HEX in this line:

var newTitle = clientName + '</br><span style="font-size: 0.8rem; color: #365194; font-style:bold;">' + clientDesc + '</span>';

If you have any issues just tell me the colour you're trying to change it to (name of colour or HEX) & I can redo the whole code for you so you just copy/paste it again 👍

Thank you it worked. Appreciate it 😁

Hi @stressbunny, thank you for looking into this issue! I've been struggling with this for a while and your code is the closest thing to a solution I found.

I've added your code into the footer code injection on my site and the second line / description  has successfully appeared. But now, I have two issues:

- I don't know how to change the text of the sub-line / project description for each vignette. Ideally, I'd also like the desc text to be a bit bigger.

- Somehow the last letter of my client's name has disappeared in the title...

Thank you so much for your time!

Gabrielle

On 3/5/2021 at 5:48 PM, Kodakism said:

Hi @stressbunny, thank you for looking into this issue! I've been struggling with this for a while and your code is the closest thing to a solution I found.

I've added your code into the footer code injection on my site and the second line / description  has successfully appeared. But now, I have two issues:

- I don't know how to change the text of the sub-line / project description for each vignette. Ideally, I'd also like the desc text to be a bit bigger.

- Somehow the last letter of my client's name has disappeared in the title...

Thank you so much for your time!

Gabrielle

Hi. Can you share link to page in screenshot?

On 3/7/2021 at 7:53 AM, tuanphan said:

Hi. Can you share link to page in screenshot?

Of course ! https://koala-capybera-rmtl.squarespace.com/

password: gabster

On 12/22/2020 at 7:45 PM, stressbunny said:

Did you put it in like this again?

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    var title = document.querySelectorAll('h3.portfolio-title');
    for (var ss = 0; ss < title.length; ++ss) {
        var item = title[ss];
        var clientName = item.innerText.slice(0, item.innerText.indexOf('#'));
        var clientDesc = item.innerText.slice(item.innerText.indexOf('#') + 1, item.innerText.length);
        var newTitle = clientName + '</br><span style="font-size: 0.8rem">' + clientDesc + '</span>';    
        item.innerHTML = item.innerText.replace(item.innerText, newTitle);
    }
});
</script>

 

@stressbunny This worked perfectly for me, thanks! One question: Is there a way to pre-load this with the page somehow (Java noob here) — at the moment, my "descriptions" show for like half a second as a massive flash of code before switching to the proper line of text. Not the worst, but would be great if that code implementation could happen before scrolling down to that section. Huge thanks again!

On 3/9/2021 at 4:38 PM, Kodakism said:

 

Of course ! https://koala-capybera-rmtl.squarespace.com/

password: gabster

Hi. I see 1 line here. Do you still need help on this?

On 3/19/2021 at 12:08 PM, AaronRolston said:

@stressbunny This worked perfectly for me, thanks! One question: Is there a way to pre-load this with the page somehow (Java noob here) — at the moment, my "descriptions" show for like half a second as a massive flash of code before switching to the proper line of text. Not the worst, but would be great if that code implementation could happen before scrolling down to that section. Huge thanks again!

@tuanphan Do you have any insight on this? Would love to get this to load without code flashing on the screen before switching to the modified "description" — Thanks!