Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Styling descriptions to portfolio grid layouts in 7.1


visionsbyfurks

Question

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.

Link to post
  • Answers 22
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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() {

We got there 🙂   

Posted Images

22 answers to this question

Recommended Posts

  • 0

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);
    }
});

 

Edited by loueeze
Link to post
  • 0
$(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.

Link to post
  • 0

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>

 

Link to post
  • 0

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 👍

Link to post
  • 0

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

Screen Shot 2021-03-05 at 11.47.14 AM.png

Screen Shot 2021-03-05 at 11.47.21 AM.png

Link to post
  • 0
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

Screen Shot 2021-03-05 at 11.47.14 AM.png

Screen Shot 2021-03-05 at 11.47.21 AM.png

Hi. Can you share link to page in screenshot?

Link to post
  • 0
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!

Link to post
  • 0
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?

 

Link to post
  • 0
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!

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...