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!
Announcement
Collapse
No announcement yet.
How to isolate and individualize the primary_module_subheader_background?
Collapse
X
-
Please post a link. Seeing the actual page to fix UI issues is the fastest way to solve them. -
-
- 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:
Code:#[COLOR=#FF0000]forum16[/COLOR].category-header { background: #304f8e url("images/css/categoryplane8.png") no-repeat 0 0; }
- Move the background from <thead> (.topic-list-container .topic-list-header) to the <table> (.topic-list-container) tag.
Comment
- 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:
-
Code:.topic-list-container .topic-list-header { background: none; } .topic-list-container { background: #0069d5 url("images/css/categoryplane8.png") 0 0; }
Comment
-
-
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.
Code:#[COLOR=#FF0000]forum16[/COLOR].category-header { background: #304f8e url("images/css/categoryplane8.png") no-repeat 0 0; }
Code:.topic-list-container .topic-list-header { background: none; } .topic-list-container { background: #0069d5 url("images/css/categoryplane8.png") 0 0; }
Comment
-
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...
Code:#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; }
Comment
widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
Comment