• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
UI.X 2

UI.X 2 [Paid] 2.0.0.2

No permission to buy ($35.00)
I have a new question I how do you make an icon go the full width of the forum? My header image is 1200x204 but for whatever reason, it will not go the full width there padding on each side.
 
Simply go to appearance > style properties > node icons

Upload your node-sprite some where on your server then go to image forum icon and image forum unread icon.

Put the URL of the image in each image box. To get it to work you simply need to put -32px on the background-position or whatever px amount would move it around enough to appear.

So in the little box that says "Freeform CSS/LESS code" make sure you have this in the first one that says image forum icon:

Code:
background-repeat: no-repeat;
background-position: -32px 0;
In the forum unread icon box make sure you give the position "0 0".

Code:
background-repeat: no-repeat;
background-position: 0 0;
Just play around with background-position until you can position the sprite correctly. You might need more than -32px depending on how the sprite looks. For link forum and page forum you can add more background-position if that's also apart of the sprite to achieve the same effect.

Good luck!
You two guys are the best I got the node icons working now I just need the header image fixed
 

Brad Padgett

Well-known member
I think the skin is bugged its completely ignoring the unread icon.
Actually I've noticed that too. My icons aren't showing the unread icon either.

I have a new question I how do you make an icon go the full width of the forum? My header image is 1200x204 but for whatever reason, it will not go the full width there padding on each side.
Give it a background size of 100% 100%.

Code:
background-size: 100% 100%;
It will take up the full header if you do that.

EDIT: If that doesn't work try this:

Code:
padding: 0 !important;
 
Actually I've noticed that too. My icons aren't showing the unread icon either.



Give it a background size of 100% 100%.

Code:
background-size: 100% 100%;
It will take up the full header if you do that.

EDIT: If that doesn't work try this:

Code:
padding: 0 !important;
I tried the background thing, And I put it in the logo height area and it didn't work and I disabled the logo and put it in the header area and it didn't work and I put it in the logo CSS and it didn't work. I am not exactly sure where its supposed to go.
 

Brad Padgett

Well-known member
I tried the background thing, And I put it in the logo height area and it didn't work and I disabled the logo and put it in the header area and it didn't work and I put it in the logo CSS and it didn't work. I am not exactly sure where its supposed to go.
Appearance > Style Properties > Header and Navigation > Header Wrapper

Did you try using the CSS on the header wrapper? That should be correct for where you need to put the edit.
 

Brad Padgett

Well-known member
Actually @Gregory Lynn the header wrapper area wasn't working for me before when trying to change a background color so I'm going to give you the code to put in extra.less

Code:
.p-header {
padding: 0 !important;
background: url('path/to/image') no-repeat !important;
background-size: 100% 100% !important;
}
The !important flag may or may not be needed but I added it in all of them just in case. Sometimes it's needed to over write the previously styled property or css. All it means is it's overwriting the previous styled element with a new one. You may not need it but I added it just in case so it would work.
 
Appearance > Style Properties > Header and Navigation > Header Wrapper

Did you try using the CSS on the header wrapper? That should be correct for where you need to put the edit.
I tried it there and it made the header image go out of the header block. I wish I knew what color my friend made the logo because I would change the color of the logo background to that green and it might not look so bad. I sent her a message but she is always busy I just have to wait until she responds.
 

Brad Padgett

Well-known member
I tried it there and it made the header image go out of the header block. I wish I knew what color my friend made the logo because I would change the color of the logo background to that green and it might not look so bad. I sent her a message but she is always busy I just have to wait until she responds.
Okay you can try the code I gave you above and put in your image URL to replace path/to/image in extra.less

The right selector is ".p-header"
 
Actually @Gregory Lynn the header wrapper area wasn't working for me before when trying to change a background color so I'm going to give you the code to put in extra.less

Code:
.p-header {
padding: 0 !important;
background: url('path/to/image') no-repeat !important;
background-size: 100% 100% !important;
}
The !important flag may or may not be needed but I added it in all of them just in case. Sometimes it's needed to over write the previously styled property or css. All it means is it's overwriting the previous styled element with a new one. You may not need it but I added it just in case so it would work.
Thank you, thank you, thank you, it worked and its members like you that truly make this community great. :)
 

Brad Padgett

Well-known member
Thank you, thank you, thank you, it worked and its members like you that truly make this community great. :)
Thanks for the compliment and I appreciate it. I guess the header wrapper was the wrong one. Just assumed that was right because of the way it looked since I didn't see another place for it. Anyways glad you got it to work! :D

Now we just need to wait for them to fix the unread icon not working. :D
Yeah not sure why it's not working. Not a big deal to me personally but I'm sure they'll get to the bottom of whatevers causing it.

I've gone ahead and reported this on our GitHub Issue Tracker, thank you for reporting it @Gregory Lynn @Brad Padgett
No problem. Thanks
 
Hi to all,

need some help.
After configure one background image (with transparent background) on a node, i've lose all text default theme colors, all text changed to white.
How can i add an image, preserving all text default theme colors?
Thanks
printNode.png
 
Last edited:
Hi to all,

need some help.
After configure one background image (with transparent background) on a node, i've lose all text default theme colors, all text changed to white.
How can i add an image, preserving all text default theme colors?
Thanks
Adding an image via TH Nodes will add an image overlay, and change all of the text colors to white. If you do not want this behavior, I'd suggest adding the image in via custom CSS as opposed to TH Nodes. This is meant for specifically for full backgrounds.

In the future we will consider adding an option to toggle the overlay/text changes.