-2

So I'm definitely an amateur with HTML/CSS. I'm trying to edit an HTML template in various ways, and one of the things I'm stuck on is trying to change the background color of an active navigation tab. Where would it go? What string do I use? To be honest, I'm not sure I'm even asking the right questions or using the right terms since I'm so new to this. Half of what I've figured out how to do is by using "Inspect" on chrome to find out what the containers/etc. are even called.

screenshot of tab 1

I'd like to change the white to match the rest of the container below's background color of #fbf9f6, but only the one that's active.

screenshot of tab 2

I'd also like to change the background color of the selected icon to pink as well as the icon itself to white when active.

I'll mention that this code is only in HTML as far as I can tell, I don't think there's a CSS file for it since it was a template I copy and pasted. The website is Toyhouse if that helps at all.

This is what I'd like it to look like.

Here's the link to the code: https://codeshare.io/5e10QJ

Lee Caulfield
  • 7
  • 1
  • 1
    Could you provide some code, or a codepen so we could help you? – Laczkó Örs Jan 25 '20 at 14:54
  • Yes, here's the link to my current code: https://codeshare.io/5e10QJ Sorry about that. – Lee Caulfield Jan 25 '20 at 15:26
  • I don't quite understand. Is this your page? Or do you want to change the appearance of some page that you're using? – domsson Jan 25 '20 at 15:29
  • 1
    Link you shared is empty, at least for me! – Korovjov Jan 25 '20 at 15:32
  • I copy-pasted the shared code in a codepen. This was the result: https://codepen.io/JustAnUserName/pen/vYEPRjb – Laczkó Örs Jan 25 '20 at 15:35
  • Sorry, I don't know why it didn't save my code. It should be there now. Also, @domsson, it was a template I copied and I'm just trying to modify it. The website I'm using is a website for artists to create character profiles and thats what this code is. – Lee Caulfield Jan 25 '20 at 15:40
  • It looks like your code might also require [Bootstrap](https://getbootstrap.com/) to render correctly. If you add the Bootstrap CDN links, your page appears much like your image of how you would like it to look, as you can [see here](https://jsfiddle.net/rvnpk3y9/1/). If it is indeed Bootstrap based, you may have to do further research on how to change those styles specifically. Some use the `!important` keyword on style values, which you will have to include in yours to override, and others are further complicated by specific parent/descendant selectors. – chris Jan 25 '20 at 15:45
  • It probably is Bootstrap based, I just didn't know that was a thing lol. If you put your code into the site's editor it displays it correctly so I wasn't sure exactly how it did that, since I only see the html side of it. – Lee Caulfield Jan 25 '20 at 15:51

1 Answers1

1

First, It looks like you have all your styling in the HTML file. These styles should be removed and placed in a css file. Then, in your HTML file, you can use classes and ids to as selectors to style these elements.

In order to change the the color after an element has been active is by using pseudo classes. You can find information on that here.

https://www.w3schools.com/CSS/css_pseudo_elements.asp

AJS
  • 11
  • 2