UI.X

UI.X 1.5.22.0

No permission to download
Overview FAQ Updates (53) Reviews (118) History Discussion
Jens1986 said:
Hi,

I have two questions:

1) I want to change the icons in the side bar (I use widgets framework). How do I do this? See attachment.

2) When I look at pictures in posts some of the buttons are missing. Is this something I can fix by using the color palette? How? See attachment.

Thank you. Great theme :)

View attachment 68471 View attachment 68472
Click to expand...

Hi :)

1. Due to the inconsistent nature of sidebar markup it is a bit difficult for me to explain except on a per plugin basis. So on my demo, I've enabled the widget framework. Here is a screenshot of the area in question; the icon.

sidebar_icons.webp

Note the markup is different than XenForo's ever so slightly but enough to where (I) couldn't find a way to make it work with one line of code. So this will be different if you do not have the widget frame work installed:

Code: 
.section .secondaryContent.widget.WidgetFramework_WidgetRenderer_Stats h3:before {
    content: '\f080';
}
The code about selects the h3 that falls inside the section block class named WidgetFramework_WidgetRenderer_Stats. Then note the :before, which is a pseudo selector that essentially selects the space before the h3 and creates a square that an icon can fit inside of. Now don't worry I did all that work for you, the only think you need to do is:

1. Find an icon that you want

2. Note its character unicode value (the thing in parentheses on the link in point 1; the fontawesome cheat sheet

3. From that unicode value, strip out some stuff. So for example, if I wanted fa-heart, the unicode value for that is: . So what I want to do is just note the f004; or just everything after the f character, really.

4. Find the class of the block you want. Do so by inspecting or viewing the source on your webpage. You'll have to see the unique class on each block, and generally they will end in blahblah_users or blahblah_donate or something. Note that above I was selecting the stats block, or as the widget framework names it: WidgetFramework_WidgetRenderer_Stats

5. Now fill in the blanks:

Rich (BB code): 
.section .secondaryContent.widget.theClassFromPoint4 h3:before {
    content: '\f080';
}

The green is the class you found from the source code, the red is the stripped out unicode from the icon you wanted from FontAwesome. If you want to use a different icon, you can just replace this with a background image to that icon or a font-family + new unicode and I think it should work fine. but by default I have the font-family of FontAwesome here.

6. Add the code from point 5 you created to somewhere generic, such as extra.css, which is where I'd recommend adding it.

Should be good!

xKillerbees said:
I've had a ticket for days with no response. :(

Trying to get the theme to work with forum tabs. Worked fine with my previous styles, but stopped working with this one. When you click on the tabs, nothing shows up except for the top one, rest are blank.
http://xenforo.com/community/resources/forum-list-tabs-by-waindigo.1476/
Click to expand...

Sorry for the delay in response had a flu all weekend. As you can see our collapse function doesn't seem to like the waindigo tabs, so I will take a look and try and figure out why when I get a chance.
 
AntonioC said:
Should this theme works with xenforo 1.3 RC1 ?
Click to expand...
No :(
Audentio said:
Since we haven't released the 1.3 version yet, that would explain why it isn't 1.3 supported. I have all the leg work done, just need to release :) Since things are going along smoothly I figured I wait until the official release which, if everything goes well for XenForo I could see it being no more than a week or two.
Click to expand...
 
Gazhyde said:
What did you do with the template merging not, err, merging? It's the only thing stopping me going live with 1.3 atm
Click to expand...
Only took a couple of mins to manually merge the 3 (or 4?) templates that didn't action automatically.
 
Audentio said:
Hi :)

1. Due to the inconsistent nature of sidebar markup it is a bit difficult for me to explain except on a per plugin basis. So on my demo, I've enabled the widget framework. Here is a screenshot of the area in question; the icon.

View attachment 68509

Note the markup is different than XenForo's ever so slightly but enough to where (I) couldn't find a way to make it work with one line of code. So this will be different if you do not have the widget frame work installed:

Code: 
.section .secondaryContent.widget.WidgetFramework_WidgetRenderer_Stats h3:before {
    content: '\f080';
}
The code about selects the h3 that falls inside the section block class named WidgetFramework_WidgetRenderer_Stats. Then note the :before, which is a pseudo selector that essentially selects the space before the h3 and creates a square that an icon can fit inside of. Now don't worry I did all that work for you, the only think you need to do is:

1. Find an icon that you want

2. Note its character unicode value (the thing in parentheses on the link in point 1; the fontawesome cheat sheet

3. From that unicode value, strip out some stuff. So for example, if I wanted fa-heart, the unicode value for that is: . So what I want to do is just note the f004; or just everything after the f character, really.

4. Find the class of the block you want. Do so by inspecting or viewing the source on your webpage. You'll have to see the unique class on each block, and generally they will end in blahblah_users or blahblah_donate or something. Note that above I was selecting the stats block, or as the widget framework names it: WidgetFramework_WidgetRenderer_Stats

5. Now fill in the blanks:

Rich (BB code): 
.section .secondaryContent.widget.theClassFromPoint4 h3:before {
    content: '\f080';
}

The green is the class you found from the source code, the red is the stripped out unicode from the icon you wanted from FontAwesome. If you want to use a different icon, you can just replace this with a background image to that icon or a font-family + new unicode and I think it should work fine. but by default I have the font-family of FontAwesome here.

6. Add the code from point 5 you created to somewhere generic, such as extra.css, which is where I'd recommend adding it.

Should be good!



Sorry for the delay in response had a flu all weekend. As you can see our collapse function doesn't seem to like the waindigo tabs, so I will take a look and try and figure out why when I get a chance.
Click to expand...

So for me this works on all the widgets except "Who is online" - this is the code I insert into extra.css:
Code: 
.section .secondaryContent.widget.WidgetFramework_WidgetRenderer_OnlineUsers h3:before {
    content: '\f007';
}

And do you have any idea about the other question I asked in my last post?

Thanks!
 
Last edited:
I'm looking forward to this being updated. I have several issues that will hopefully be fixed in the next release.
Too many to list here but will report back after installing the new release when it comes.
 
So I have an older version installed with a child theme, what is the best way to go about upgrading to the newer version? Rename my current one or something first?
 
UI.X question ...... any idea why, when I upload a logo.png file, that it shrinks it down? I have a 131px height logo, and have the "height of header logo" box set to 131. It uploads the logo, but shrinks it down to 32px high. If I look at the properties of the image on the page, it says it is "scaled." It works perfectly on the Xenforo default style.

Any idea what is up?

Thanks,

Tom
 
tom855 said:
UI.X question ...... any idea why, when I upload a logo.png file, that it shrinks it down? I have a 131px height logo, and have the "height of header logo" box set to 131. It uploads the logo, but shrinks it down to 32px high. If I look at the properties of the image on the page, it says it is "scaled." It works perfectly on the Xenforo default style.

Any idea what is up?

Thanks,

Tom
Click to expand...

Try emptying this area...
Screenshot_8.webp
 
Sheldon, you are a genius. At least relative to me you are. Thanks so much.

I wondered if you, or anyone else, could give me some guidance on the most effective way to do what I'm trying to do. Not saying it was the best way to do it, but on my old vB board, I had a header/logo that was basically a two tables.

The top table was a gray background with an image on the left, and another image (actually a blob of text I turned into an image), and was about 2/3 of the way across the page. So, as the page was made bigger or smaller, the leftmost image always stayed left, and the other image (text) kind of floated about 2/3 of the way across the page). It worked just fine.

The second table was simply a black bar to separate the logo stuff from the navbar. Again, not the most elegant, but it all worked just fine.

Now on my Xenforo dev board I have some choices to make. One choice would be to try to do it the way I did on my vB board, although admittedly when fooling around with the forum_list template or the header template I couldn't even begin to figure out how to do it.

Another way, I think, would be to redo the logo so that it included the gray background, the image on the left, and the text blob partway across. But, I think if the screen size changes, it's going to scrunch that text blob so it looks bad.... or will it?

Again, at this point I'm open to whatever is the most reasonable way to accomplish the look I'm trying to replicate. If it's easier to look at the old board, it's at www.christianparentsforum.com.

Thank you so much for your help!

Tom
 
Not sure if this has already been brought up or not but figured i might as well post up the missing image when editing thread titles.. I captured a screenshot because trying to inspect that particular element is difficult since its jQuery or something..
 

Attachments

  • Capture_03052014_005011.webp
    Capture_03052014_005011.webp
    7.2 KB · Views: 40
You must log in or register to reply here.

Similar threads

RichardM
1.5.6.0 & License Extensions
Replies
0
Views
2K
RichardM
RichardM
Infopro
cPanel Forums Moves Xenforo, UI.X
Replies
0
Views
3K
Infopro
Infopro
D
Audent.io
35 36 37
Replies
737
Views
108K
Dad.
D
D
Style UI.X - Advanced Theme - From Audentio Design
2
Replies
29
Views
7K
kezako
kezako
D
UI.X from Audentio Design
2
Replies
28
Views
4K
Dad.
D
Back
Top Bottom