SP Simple Portfolio - Personalising Colours - Question | JoomShaper

SP Simple Portfolio - Personalising Colours

DE

Dan Ellmore

SP Page Builder 1 year ago

I am using Rectangle layout on SP Simple Poftfolio but my client has asked if it is possble to change the grey box and black text underneath the thumbnail image to - a blue box - Blue - #0015FF with orange text - Orange - #FF5F00

Is this possible please?

thanks

Dan

0
23 Answers
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 year ago #167964

Hi

Are you talking about these hadings?

https://prnt.sc/ZS1bHGUphhty

Then use this CSS

.sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-info h3>a {
    font-size: 18px !important;
0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 year ago #166751

Hi

Thanks for contacting us. Could you please give me your site URL and also a screenshot of your issue?

-Regards.

0
DE
Dan Ellmore
Accepted Answer
1 year ago #166770

Hi - this site is currently not live for the public but can be seen here

http://hellolincoln.co.uk/index.php

you can see the Portfilio module on the homepage - and my client wants to change the colours of the heading and grey box under the thumbnail images on the page

thanks

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 year ago #166954

Could you please give me a screenshot of that portion?

0
DE
Dan Ellmore
Accepted Answer
1 year ago #166957

Hi - we would like to re-colour the buttons and the boxes under the portfolio items - marked with arrows on the screen shot here - https://www.dropbox.com/scl/fi/ldqnlolybyzzzz3v2bzql/Screenshot-Hello-Lincoln.jpg?rlkey=za27qi8at257ow5mozacesf6y&dl=0

thanks

Dan

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 year ago #167088

Sorry it was a weekend here that's why late reply. Could you please send me the screenshot again?

https://prnt.sc/6elxk-A5bnPL

0
DE
Dan Ellmore
Accepted Answer
1 year ago #167224

I really hope this will be possible - this will finish off my clients website perfectly.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 year ago #167243

Hi

Use this CSS in your custom.css file

.sp-simpleportfolio .sp-simpleportfolio-filter>ul>li.active>a {
    background: #0015FF !important;
    color: #FF5F00 !important;
}
0
DE
Dan Ellmore
Accepted Answer
1 year ago #167268

Thank you - this has worked for the 'active button' but the other buttons have remained grey - you can see this here: http://hellolincoln.co.uk/index.php

Is there a way to make all buttons #0115FF with white text and the button that is 'active' selected to go #FF5F00 please?

thanks

Dan

0
DE
Dan Ellmore
Accepted Answer
1 year ago #167297

I have added the code as follws and this has changed the buttons to a new colour

.sp-simpleportfolio .sp-simpleportfolio-filter>ul>lia { background: #0015FF !important; color: #FFFFFF !important; }

I now have blue buttons with an orange active button - http://hellolincoln.co.uk/index.php

On the homepage the listings are shown in a block - my client would like to re-colour the grey underneath them - it is light grey and then goes to dark grey on mouseover - is there a custom code to update this to #0015FF and then #ff5f00 on mouseover please?

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 year ago #167404

Are you talking about this button?

Screenshot 2024-09-11 at 11.37.59 AM.png

0
DE
Dan Ellmore
Accepted Answer
1 year ago #167416

Updating this button would be great - we also want to update the grey area under the image -

https://www.dropbox.com/scl/fi/zd24qs99l03i2fn01senx/Screenshot-2024-09-11-at-07.45.36.png?rlkey=gu5xv2okubf4ns10jei9pgny3&dl=0

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 year ago #167543

Hi

Use this CSS in your custom.css file

.sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-info:hover{
  background: #643535 !important;
}
.sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-btns a:hover{
   background: #643535 !important;
}
0
DE
Dan Ellmore
Accepted Answer
1 year ago #167564

Thank you this works for the hovver - but has not changed the default light grey which we would like to be in blue #0015FF if possible?

thanks

Dan

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 year ago #167577

Use this CSS please

.sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-info{
  background: #0015FF !important;
}
0
DE
Dan Ellmore
Accepted Answer
1 year ago #167588

Thanks you this looks great - http://hellolincoln.co.uk/index.php

is there a code to make the text white please?

This will make it perfect! Thank you so much for your help

Dan

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 year ago #167607

Use this CSS

.sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-info h3>a{
  color: white !important;
}
.sp-simpleportfolio-tags{
    color: white !important;
}
0
DE
Dan Ellmore
Accepted Answer
1 year ago #167628

Many thanks absoloutely brilliant!

Final query - can the text size for these headings by adjusted to make it a little larger? I have tried in the Helis Utimate template but did not find where to alter this item only.

thanks

Dan

0
DE
Dan Ellmore
Accepted Answer
1 year ago #168016

Many thanks!

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 year ago #168082

You are always welcome.

I have a humble request too. It would be very kind of you if you can manage some moment to give us feedback on

Joomla Extension Directory

TrustPilot

This will inspire us to improve.

0
DE
Dan Ellmore
Accepted Answer
1 year ago #168160

Thank you I will look into this and leave a review

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 year ago #168202

Thanks a lot.

0