shaynald

@lajoyonline

Hi joy,

Two things:
1- you wont crash your site by changing the CSS….you might make it look bad for a minute or two, but if you have a back up and make changes one at a time you can always revert back to a previous version. Don’t be afraid to experiment, it is the only way to learn!

2- One of the best tools you can use as a web developer is the element inspector. I like to debug in Firefox, but most (if not all) browsers have a similar tool. right click on the element you want to change the CSS of and select “inspect element’ (in Firefox you have both ‘inspect element Q’ and ‘inspect with firebug’ … I like the ‘Q’ one. A panel will open a the bottom or side of your screen that lets you play with the HTML and CSS settings. These changes won’t effect the actual code. they are temporary and will disappear when you refresh the browser. This is how I figure out what the selectors are so that I can change the CSS values. Once you find what you like, you can copy the code into your code editor.
I uploaded a screenshot of the element inspector in action on the a3portfolio demo site HERE
In that screenshot you can see what happens if I change the background-color of “.a3-portfolio-item-container a.a3-portfolio-item-block .a3-portfolio-card-title-under” to a light purple.

I’d love to see you find the other selector that you need to change to do this yourself, but, if you get stuck, feel free to leave another follow up.

Good Luck!
Shayna

@amelieke

Sorry I didn’t see your question until lajoy asked…maybe it was the @ that notified me. I hope the answer above helps you too.

@lajoy,

You are only going to be able to do this if you know how to edit the CSS files. In fact, I recommend adding the necessary CSS to your theme’s styles (I assume you are using a custom or child theme), so you can upgrade the a3portfolio plug-in without losing your changes.

You can use the element inspector in your browser to find the CSS selectors to change. I think the background of the pop-up is: .a3-portfolio-expander-popup so to make that element white instead of black, add this to your theme css:

.a3-portfolio-expander-popup{
background-color: #fff !important;
}

The green text in the pop-up is all the color for links, so you can add this to make it black:

.a3-portfolio-inner-wrap a,
.a3-portfolio-inner-wrap a:link{
color: #000 !important;
}

You might also want to add hover states to these selectors.
I hope this helps. If this doesn’t make sense, feel free to ask more questions.
-Shayna

Hi,
the developer has an add on for about $50 that allows you to customize the styling (color, fonts, etc) youy can get it here: https://a3rev.com/shop/a3-portfolio-dynamic-stylesheets/

Alternatively, you say you don’t know much code, but if you have basic CSS skills, you can add the styles to your own CSS file, as i did here: https://whosyourwebsite.com/dev/portfolios

You might try putting in a ticket with their support desk, or looking to see if one of your plug-ins or something about your theme is causing a compatibility issue (that was my problem). I found the customer support system very helpful.

Thank you for replying. I checked all the settings and they still looked correct… I just deactivated and uninstalled the Plug-in and then re-installed and reactivated it and everything worked smoothly. I guess i should have tried that first! Thanks again for your reply.