How to isolate and individualize the primary_module_subheader_background?

[Aros12]

I am trying to use multiple images in my primary module subheader backgrounds as I have multiple categories that need their own specific imagery. Also, when I click into a sub forum, the subheader backgrounds are tiling as it appears there are several subheader backgrounds on this page. Please see my photos for reference. Thank you in advance for any helpful information!

[glennrocksvb]

Please post a link. Seeing the actual page to fix UI issues is the fastest way to solve them.

[Aros12]

Sorry, http://www.hobbysquawk.com. Thanks!

[glennrocksvb]

1. The id of the category-header row is in the format, "forumnodeid" of that category. For example, the RC Airplanes category has nodeid 16. The CSS to set the background would be:
   
   

   	#[COLOR=#FF0000]forum16[/COLOR].category-header {
   	  background: #304f8e url("images/css/categoryplane8.png") no-repeat 0 0;
   	}

   You can see the nodeid of the categories in the Channel Manager in AdminCP. You can also see it when you inspect the element using the browser dev tools.
2. Move the background from <thead> (.topic-list-container .topic-list-header) to the <table> (.topic-list-container) tag.

[Aros12]

Oh okay I understand the nodeid aspect...Not as clear on where I am supposed to perform #2...? Sorry I am pretty CSS-illiterate.

[glennrocksvb]

.topic-list-container .topic-list-header { background: none; }
.topic-list-container { background: #0069d5 url("images/css/categoryplane8.png") 0 0; }

[Aros12]

Does that code go in the same CSS I've been putting all of this other CSS code (Style > CSS Editor)?

[glennrocksvb]

Yes.

[Aros12]

Okay I will try again tomorrow. I did add the initial code (using a new nodeid and new .png image) but it didn't work. As for you topic-list-container code, when I am adding all of this new CSS in the additional.css, it starts out as a blank field and I simply cut and paste it in. Am I suppose to be seeing the entire css template so I can scroll down to existing code and add that topic-list-container code? I ask because you talk about taking code from the <thead> tag to the <table> tag but I don't see that.

#[COLOR=#FF0000]forum16[/COLOR].category-header { background: #304f8e url("images/css/categoryplane8.png") no-repeat 0 0; }

.topic-list-container .topic-list-header { background: none; } .topic-list-container { background: #0069d5 url("images/css/categoryplane8.png") 0 0; }

[Aros12]

I added the following to the additional.css to see if it would force two different images on the main page of hobbysquawk.com but it didn't change anything...

#forum16.category-header { background: #304f8e url("images/css/categoryplane8.png") no-repeat 0 0; }
  
  .topic-list-container .topic-list-header { background: none; } .topic-list-container { background: #0069d5 url("images/css/categoryplane8.png") 0 0; }
  
  #forum18.category-header { background: #304f8e url("images/css/categoryelec.png") no-repeat 0 0; }
  
  .topic-list-container .topic-list-header { background: none; } .topic-list-container { background: #0069d5 url("images/css/categoryelec.png") 0 0; }

[Aros12]

One other thing...Can I adjust the height in stylevars or does it need to be CSS in the additional.css? (And if so, may I have the magic code please)?

[Aros12]

Still needing help...Anyone?