Jump to content

Forum list Node CSS styling/customizing


Recommended Posts

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!

22695826_Edittemplateth_node_list_grid_nodeslessGreaterRealmsAdmincontrolpanel.thumb.png.d4976997ae3bf8adddd7285ffe855583.png 1207300103_NodeforumlistGreaterRealmsAdmincontrolpanel.thumb.png.bbb276301f4316e6e16586c30ee8b0a8.png

Link to comment
Share on other sites

  • Admin

We're probably going to need a link to the site to be able to better help.

0_mainsignature.jpg

image.png

Profile set made by myself and original Artwork by Fae Merriman, my daughter.

 

 

Link to comment
Share on other sites

  • Admin

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.

0_mainsignature.jpg

image.png

Profile set made by myself and original Artwork by Fae Merriman, my daughter.

 

 

Link to comment
Share on other sites

Thank you @Morrigan!

Although, that doesn't appear to be working added to EXTRA.less with a hard refresh in Chrome. 1194542796_EdittemplateextralessGreaterRealmsAdmincontrolpanel.png.132b1e56812e72748004240ec9643b57.png

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! 
1392947432_EditnodelayoutandstylingTheRepositoryGreaterRealmsAdmincontrolpanel.thumb.png.281aac1b23ff4977324889c90d19047b.png

Link to comment
Share on other sites

  • Admin

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.

0_mainsignature.jpg

image.png

Profile set made by myself and original Artwork by Fae Merriman, my daughter.

 

 

Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.