Help
cancel
Showing results for 
Search instead for 
Did you mean: 
Copilot Lvl 2
Message 1 of 2

Issues with Jekyll theme: particles

Hi everyone! 

 

Here is the website I made that I am asking questions about: kessenma.github.io and here is the repo with the code to that website. I forked the starter code from this theme and edited some of the JavaScript to my liking-- the biggest change I made was that I changed the background to white which leads me to my problem.

 

I am trying to change the default color of the down arrow on the theme to black. Below are two screenshots. the first screenshot is without my mouse hovering over the arrow in the bottom center. The second image is with my mouse hovering over the arrow icon. 

no arrow.png

 

arrow.png

After inspecting (right click in Google Chrome on the webpage and click inspect) the code I beleive that I have to edit the color of a 'chevron' somewhere in the main.css file (kessenma.github.io/assets/css/main.css). This themes CSS is kind of a total mess, and is only 7 lines of code. The word Chevron shows up 8 times and color shows up 396 times. The word 'color' is not near the word 'chevron' anywhere in the code, so I don't know which color to change.  

 

(if any of this is confusing feel free to ask clarifying questions! It is definlty an indepth questoin) Thanks in advanced for any help!

1 Reply
Highlighted
GitHub Staff
Message 2 of 2

Re: Issues with Jekyll theme: particles

That chevron is a link with a class titled "down" — that class has a color defined in main.css twice.

 

Here's where the default color for down and other classes is being defined, along with alignment:

 

.down,.header-icons .icon{color:#fff;text-align:center}


Here's the color when the link is hovered/pressed, along with those in your footer:

.down .icon:active,.down .icon:hover,.footer a:active,.footer a:hover{color:#4b5664}

 

 

 

If you always want the chevron to be black (and not change color when hovering), I'd separate it out and define it on its own. You can do this by changing those two blocks to look like this:

 

.header-icons .icon{color:#fff;text-align:center}

 

 

.footer a:active,.footer a:hover{color:#4b5664}.down{color:#000000;text-align:center}