How to Change Theme Colours

SupportCategory: TA PortfolioHow to Change Theme Colours
adymond asked 5 years ago

Hi,
I’m working on customizing the colors of the TA portfolio to match my brand, but I’m getting stuck on a couple things.
 
I’m trying to change the colour of the dark blue in the navigation bar, and I’m also trying to change what used to be green, but i managed to change to light blue (behind what says “I’m Amanda Dymond”) to an image. See circled items in this screenshot:
http://s725.photobucket.com/user/adymond87/media/colors-1_zps2ed29635.jpg.html
 
I managed to change the colour of this button, but for some reason cant get the on hover color to change:
http://s725.photobucket.com/user/adymond87/media/button-onhover_zps3a834cfb.jpg.html
 
Basically what I’m trying to do is to get it to have the same elements as my resume/personal brand:
http://s725.photobucket.com/user/adymond87/media/resume_zps72c3f698.jpg.html
 
Thanks so much for your help 🙂

17 Answers
Best Answer
bjarkof answered 5 years ago

Haha, don’t worry about it! I’m a noob aswell. Just ask if there’s any more you need help with 🙂

For changing the nav links add this to css:

.navbar-default .navbar-nav>li>a {

color: #000;
}

bjarkof answered 5 years ago

As for changing the color of the navigation bar, add this to your CSS (Change the colors according to your needs):   
 
 
.navbar-default {  
background-color: #000000;  
}    
 
For the button hover, add this to your CSS (Again change the colors according to your needs):

 
.btn-success:hover, .btn-success:focus,.btn-success.focus, .btn-success:active, .btn-success.active, .open>.dropdown-toggle.btn-success{
color: #ffffff; background-color: #128f76; border-color: #11866f;
}  
 
Hope this helps! 🙂

adymond answered 5 years ago

Thanks so much, this helps a lot 🙂

I’ve changed my nav bar to white.. and now I can’t find how to change the nav links up there 🙁 I’m such a noob lol

Rohit Staff answered 5 years ago

Sorry for the late response. It seems that you’ve solved the problems by yourself. Well done!

Rohit Staff answered 5 years ago

@bjarkof Thanks for your sharing solutions.

bjarkof answered 5 years ago

No problem! I’m happy to help 🙂

adymond answered 5 years ago

I’m still having a few issues with my background in the portfolio-header area.. it’s getting all stretch out and pixelated (the dimension of the image i’m using is 3525px x 520px):
http://i725.photobucket.com/albums/ww258/adymond87/bg_zps2d3f3baa.jpg
This is the css I’ve put in:
.portfolio-header {
text-align: center;
color: #fff;
background-image: url(“http://i725.photobucket.com/albums/ww258/adymond87/bg-blue_zps47a0c2c5.jpg&#8221😉 ;
background-repeat: no-repeat;
background-position: center center;
background-color: #5ccbd2;
background-size: 100% 100%;
Thoughts?
 
Also how do I make a gallery for my project? There doesn’t seem to be any documentation on this.

Rohit Staff answered 5 years ago

Hello, it will be better if you can provide your site url. For gallery, just install Jetpack plugin and create a galley for your project on edit page. Thanks!

adymond answered 5 years ago

Here is the link to my site: http://www.amandadymond.com/
 
I’ve installed the jetpack plugin, but which edit page do I go to to create a gallery?

Rohit Staff answered 5 years ago

For your first question, you can add height css for header area, e.g. height: 640px;. To crate a galley, on your portfolio edit page, click “Add Media” and “Create Gallery” on the left side, select the images you want. Finally, you will get some code like –gallery type=”rectangular” link=”file” ids=”29,27,25,23,21,19″ orderby=”rand”– on the post editing area. Thanks!

adymond answered 5 years ago

My gallery images aren’t opening in a light box like your example here:
http://portfolio.themeart.co/portfolio/flat-icon-submarine/
my site:
http://www.amandadymond.com/?portfolio=abandoned-cart-series
 
how do i enable this option?
 

Rohit Staff answered 5 years ago

Hello, please active “Carousel” module from Jetpack panel. Thanks! 

adymond answered 5 years ago

Perfect – thanks for all your help 🙂

adymond answered 5 years ago

Another question – is there a way to reoder my “portfolios”
for example: 
if i wanted to move the last piece “Fall lookbook” on my site (http://www.amandadymond.com/) to be the first one?

Rohit Staff answered 5 years ago

Hello, just modify the publish date of the portfolio, it’s ordered by date. Thanks!

adymond answered 5 years ago

How would I go about changing this hover effect on the navigation

Rohit Staff answered 5 years ago

Hello, please add “.navbar-default .navbar-nav>.active>a { color: #1a242f; background-color: #fff; }” to the Custom CSS filed, for font color and background color. Thanks!