HotPinkUnicornMess 51 Share Posted March 5, 2019 My board software is Xenforo. I am using the Paid theme Abyss by Theme House. Included in that theme was TH Nodes, the ability to display nodes in a grid. I have figured out how to use images to represent backgrounds, but I am running into this issue: I am not a smart CSS person. Node= Forum Ultimately, I would like for the background images to be very faded on the forum list/forum index, so that the text is readable. Or some sort of image transition (perhaps node image slide in from the side when hovered over, IDK) Then on hover, I would like the image to fade in/appear/ with perhaps a very opaque background to the forum name and statistics so that the font remains readable when the image is no longer faded. (Or perhaps a drop shadow, something that ensures the font doesn't get hard to read due to a background image being too busy or bright. Does that make sense?) I am unsure where this would be coded, and what CSS should be used. Within the Node Grid mod there are options for custom classes. There is also Extra.less CSS for overall customizing as well as th_node_list_grid_nodes.less. I'm a bit over my head in what I can do and any help or ideas or links would be very much appreciated. I am having a very hard time finding some understandable css or customizing tutorials. (I would also like to edit the post bit avatar to have user group banners and a link to profiles and possible awards/trophies to display, but I think that is a whole 'nother help topic.) Thanks everyone, and hope you have a lovely Tuesday! Link to comment Share on other sites More sharing options...
Admin Morrigan 1,825 Admin Share Posted March 5, 2019 We're probably going to need a link to the site to be able to better help. Profile set made by myself and original Artwork by Fae Merriman, my daughter. Link to comment Share on other sites More sharing options...
HotPinkUnicornMess 51 Author Share Posted March 5, 2019 (edited) Woops. https://greaterrealms.us/index.php Sorry, and thanks! Edit: I just edited this 3 times. I just got home from work. I have the dumb. Edited March 5, 2019 by GreaterRealms 1 Link to comment Share on other sites More sharing options...
Admin Morrigan 1,825 Admin Share Posted March 6, 2019 It looks like your selectors are the id of the forum and looks like this: node--id13 So you'd add this into the custom css bits: .node--id13 { background: url(THEURLTOTHEIMAGE); } [class^=".node--id"] .node-body { background: rgba(0,0,0,0); transition: all ease 1s 1s; } [class^=".node--id"] .node-body:hover { background: rgba(0,0,0,.8); transition: all ease 1s 1s; } You would add a .node--id## per forum. I think that should work for you. Profile set made by myself and original Artwork by Fae Merriman, my daughter. Link to comment Share on other sites More sharing options...
HotPinkUnicornMess 51 Author Share Posted March 6, 2019 Thank you @Morrigan! Although, that doesn't appear to be working added to EXTRA.less with a hard refresh in Chrome. There's an area where I can plop an image URL into the TH Nodes node styling and it does show up on the forum; but I can't figure out what CSS the add on uses to control that specific area--maybe below is where I would add the transitions? I'm sorry if I'm clueless, by the way--because..I am :p Thanks again! Link to comment Share on other sites More sharing options...
Admin Morrigan 1,825 Admin Share Posted March 6, 2019 I'm not sure. I'm gonna be honest. I've never seen the Xenforo ACP in my life. I'm not personally a fan of the platform. You may be able to add it to the "CSS rules" that the node class thing mentions. Profile set made by myself and original Artwork by Fae Merriman, my daughter. Link to comment Share on other sites More sharing options...
HotPinkUnicornMess 51 Author Share Posted March 7, 2019 Thanks @Morrigan, I'll see if I can ask the add on creator. It might be css mixed with variables in extra.less that make it work, but again, I have no clue. I appreciate the help! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now