Customize color in Andrina-lite

Open up your themes style.css with a text editor or simply go to the editor in your dashboard and open the style.css and edit this style. Simply change the background color to whatever you like. Example, if you want light to medium grey instead of green simply change the hex value at the end of the background: to something like #333333 and then the green will turn to a medium grey.

Here is what you have now

.index-info {
    background: url("images/green-sep.png") repeat-x scroll 0 0 #71963C;
    border-bottom: 1px solid #47621F;
    margin-bottom: 0;
    overflow: hidden;
    padding-bottom: 0;
    padding-top: 8px;
}

and here is what would change if you wanted the medium grey

.index-info {
    background: url("images/green-sep.png") repeat-x scroll 0 0 #333333;
    border-bottom: 1px solid #47621F;
    margin-bottom: 0;
    overflow: hidden;
    padding-bottom: 0;
    padding-top: 8px;
}

if you don t know your hex values for colors thats ok too. Simply go to this site and get your value here. https://www.colorpicker.com/

Also note that the border color can be changed the same way, see the border-bottom:1pxect,ect… just change the 47621f to whatever color hex you like and then save it all and wah-lah, you now have new colors.

Do not make any of the above changes in your theme files directly. Your changes will be erased when the theme is updated. Instead use a child theme: https://codex.www.ads-software.com/Child_Themes

Or a custom CSS plugin such as jetpack.

As per WPYogis suggestion and if your really worried about theme updates, simply do this instead.

create a style.css

then in the top of your style.css add this to start

/*
Theme Name:     Andrina-lite Child
Theme URI:      https://example.com/
Description:    Child theme for the Andrina-lite theme
Author:         Your name here
Author URI:     https://example.com/about/
Template:       Andrina-lite
Version:        0.1.0
*/

@import url("../andrina-lite/style.css");

.index-info {
    background: url("images/green-sep.png") repeat-x scroll 0 0 #71963C; <!--change the hex value to what you like here -->
    border-bottom: 1px solid #47621F;<!--change the hex value to what you like here -->
}

Then put that in a folder called Andrina-lite-child and upload it your themes directory. Once its uploaded simply go to your themes panel in admin dashboard and select your new theme child and the changes will be made.

@james – you are missing the @import line.

Yes, you are most definitely correct there Yogi. So I went ahead and included a small tut for him above. For me and my circle of friends though, we just don’t worry about children and just kind of do our own thing. I guess our knowledge can become other peoples headaches if they don’t have the skill to back it, lol. Sorry Yogi, I will be careful to make sure to give child suggestions for these types of questions in the future. Thanks!

Opps, got it in there now, Sorry bout that just typed it out so fast and forgot to add it. Im not perfect, lol. Thanks for that Yogi~!

Excellent – it’s really just that it’s really unfortunate when people lose a lot of work and then tell us that someone here told them to do it that way. So we try to help them avoid doing things that can create problems later… You give lots of good help – and that’s certainly appreciated, so yeah, just add that tiny piece ?? .

Thanks Yogi ?? . No worries.

How do I create a style.css? I see in editor there is a style.css, but I do not see any place to create? But then you said to add it to the style.css and then save to theme directory? Sorry—I am confused, and I’m sure it has nothing to do with how you are explaining it. I am a beginner, and trying to fudge my way through this with as little errors ans possible.Thanks so much for your help!

@greggneck: It is impolite to interrupt another poster’s ongoing thread with a question of your own. It causes significant problems for the forum’s volunteers and prevents us from being able to track issues by topic. Please post your own topic.

@esmi
this is my thread

Gregg – sorry this got so off-track. You need to start by installing jetpack or another custom CSS plug-in so that you can make changes without losing them when the theme is updated. Then put this code in the custom CSS box:

.index-info {
    background: url("images/green-sep.png") repeat-x scroll 0 0 #71963C; <!--change the hex value to what you like here -->
    border-bottom: 1px solid #47621F;<!--change the hex value to what you like here -->
}

@esmi , lol he created this thread, lol.

@greggneck:

ok, your going to want to create a child theme to be able to change your colors and maintain up-date-ability for your theme. Its very easy to do, I will walk you through it.

first right click on your desktop (on your computer) and select new folder. Name the folder “andrina-lite-child” and then open it up.

inside the new folder right click once more and select new text document and name it style.css and save that. Once you have the style.css created, simply paste the following code into it. Here goes.

/*
Theme Name:     Andrina-lite Child
Theme URI:      https://example.com/
Description:    Child theme for the Andrina-lite theme
Author:         Your name here
Author URI:     https://example.com/about/
Template:       Andrina-lite
Version:        0.1.0
*/

@import url("../andrina-lite/style.css");

.index-info {
    background: url("images/green-sep.png") repeat-x scroll 0 0 #71963C;
    border-bottom: 1px solid #47621F;
}

Change the hex values above to the color you like and add the author name and uri’s if you like. Now save that file and close it.
Now you can simply take this folder and upload it to your themes directory. You must keep the Andriana-lite theme in there as this child theme will be riding on the back of its parent theme (Andrina-lite).
Now once you have it in your theme directory, simply log into your admin panel and go to themes and activate the child theme. When you wish to change the color for the footer item again, simply open the style.css in your new child theme and change the hex values. I think i posted a link to a color picker that will give you the hex value you need by simply dragging the little slider thingy around. I hope this helps, if not let me know and I will just make you one and send it to you, lol.

PS if your text editor does not save the file as .css (like maybe it saves it like this “style.css.txt” then you may need to download notepad++ and open the new style.css and re-save it as a css file. Sometimes they work for me but I have to use NP++ to make them save properly sometimes. I normally just use NP++ for everything anyway, with the cool plugins you can get for it, it makes coding a dream and always saves files in the right format, lol.

I didnt see Yogis post when I wrote that last 2. I dont have experience with Jetpack or any other custom css plugin but that is probably the better way to go if your not comfortable with writing code. Thanks for the Tip Yogi!. ??