Changing Colors in Default Theme

[jfnewell1965]

This question should probably actually read "Changing Colors in Copied Default Theme", because all of my changes are really being done on a copy of the default theme.  But since it is essentially the same theme, I figured it would work as a question description.

Also, I think this is more of a CSS question than a Thirty Bees questions, but I thought I would ask and see what I got back.

Line 334 in the "global.css" sets the color "black" for a variety of things:

a {
  color: black; 
  text-decoration: none; 
}

Unfortunately, some of what this applies to clashed with my theme color choices.  Such as, this works great on my menu drop downs with a white background, but not so great on my very dark grey footer where it also effects the CMS block list, the account block list, and the email address only in the store information block.

How do "override" this setting for certain sections, or otherwise change it just for the footer.

In my case this line 334 "black" setting is fine for everywhere else in the site, but not for in the footer.

[toplakd]

Parrent / child relation

 

#footer a {

or just for blockcms-footer

#blockcms-footer a {

and so on.

 

I suggest some reading on:

https://www.w3schools.com/css/

Edited March 20, 2019 by toplakd

[jfnewell1965]

@toplakd....I just can't get it.   I have studied, tried to follow w3schools examples....I can't make it work.

From what I can understand, the <ul class="list-unstyled"> in blockcms.tpl applies to the section.

List-unstyled is:

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

I have tried to change it to:

.list-unstyled {
  color: #f5e2ac;
  padding-left: 0;
  list-style: none;
}

But it seems to have no effect.

I created a new class called testclass and made the changes:

testclass {
  color: #f5e2ac;
}

<ul class="testclass">

and still nothing.

I even just eliminated the class:

<ul>

and even doing that did not have any effect.

All these different changes show up when I do a browser inspection, they just don't seem to have any effect.

Any suggestions on what I might be doing wrong?

 

[devjunckie]

it might be related to your browser cache.. or you are editing the wrong element.. work first on your browser inspect then implement the changes to your css file.. as a safe practice, create an override css file inside the themes/your_theme/css folder.. as a practice I usually call it override.css.. hope this help you in any way.

[jfnewell1965]

So...I almost have the Front Office the way I want it....almost to the finish line....but there is still this one nagging color issue.

For those of you in Thirty Bees Land reading this, I would not be asking if I had not tried everything within my power/knowledge/ability....I have tried literally for weeks to solve this.  My first post on this was March 20th...I have sat here everyday since then trying to solve this.

I am looking for help in solving this issue..for free, for pay, for bribe, I am almost willing to cut off a finger at this point!, etc.   What I don't need is vagueness.  I really need a hard answer.

The problem, again:

The text in the footer of my site is the wrong color.

It seems to be controlled by line 334 in the global.css.

a {
  color: black;
  text-decoration: none;
}

Unfortunately, that also controls many other elements on the page.

I need to know how to change the color of the elements circled in red on the attached picture.  

 

If you help with this for free, I will sing your praises forever.

If you help with this for pay, I will pay you when it is done.

If you help with this for a bribe, you need to come up with a sketchy alleyway were I can slip you an envelope. 
(We should also come up with secret code names)

If you help with this for a cut off finger, you will have to figure out how to ship it through customs.
( I prefer not to go with the cut off finger option!)

 

 

 

 

[toplakd]

On 3/20/2019 at 7:26 PM, toplakd said:

Parrent / child relation

 

#footer a {

or just for blockcms-footer

#blockcms-footer a {

and so on.

 

I suggest some reading on:

https://www.w3schools.com/css/

 

[jfnewell1965]

@toplakd   Yes, I saw that post.  I am unable to figure it out.  Thus this follow up post.

[tommat]

@jfnewell1965 as toplakd said you need to add that class in your themes global.css file, something like this:

#footer a {
	color: #CCC;
}

This will change all links in footer to be of color #CCC.

[jfnewell1965]

@tommat  Thank you!

I did as you said, and was able to expand with the addition of:
 

#footer a:hover {
      color: #b53014;   /*! Change from Black To Maroon */
 }

I will be honest, I still don't really understand it....I really don't understand the "hover"  part I added either....I just knew somehow that it was what I needed for the hover.

I really appreciate your help, and the help from others as well.

Sorry to be so thick headed on this, I just seem to have a mental block.


(The " /*! Change from Black To Maroon */ " is just my notes....I document anything I change with the word "Change")

[tommat]

@jfnewell1965 No problem, we can all be thick headed from time to time ;)

The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).

Simply said, hover is when you move your mouse over the link and it changes color (that's hover color). Hope that makes sense.