Flexile

Flexile 1.1.5.1

No permission to download
Status
Not open for further replies.
I think I worked it out Erik. I made a test user and posted. I could see the new post icon on both. But when I post, I don't see it.
So I guess you can only see the color difference for new posts when it's someone else's new post, not your own.
Yeah, I think when you make a new post it automatically marks it as read since it makes sense that you read your own post. ;)
 
Erik, I know that the forum status icons that you use with this style are dependent on XF's Color Pallette in the Style Properties.

However, if I wanted to use a different set of forum icons for my forum, how would I go about changing them out? Is there css to be removed/changed? Templates to be edited?
There are quite a few things to change aren't there? Or not?
 
All the icons should be in the following 2 folders:

styles\flexile\xenforo\icons
styles\flexile\xenforo\widgets

I'm not sure if the style is called flexile or not so the paths may be slightly different.

You can do a simple replace of the current icons but you will have to keep the sizes the same otherwise some css edits will be required.

Erik can confirm whether he has replaced any of the other default icons such as the generic avatars, etc.
 
Thanks Brogan, I know where they are. :)

However, he uses one transparent image for the icon, then has coded the css to use the XF style properties color palette for new posts and read posts.
I would think that I'd have to remove all of that in order to use pre-made status icons.
 
Ah, I see the problem.

In that case, he has probably made changes in the node_list.css, assuming you mean the speech bubble icons which are the default?

The standard code is as follows:
HTML:
.node .nodeIcon
{
 @property "nodeIcon";
 background: transparent none no-repeat center center;
 margin: 10px 0 10px 10px;
 border-radius: 3px;
 float: left;
 width: 36px;
 height: 36px;
 @property "/nodeIcon";
}

 .node .forumNodeInfo .nodeIcon,
 .node .categoryForumNodeInfo .nodeIcon
 {
  background-image: url(@forumIconReadPath);
 }

 .node .forumNodeInfo.unread .nodeIcon,
 .node .categoryForumNodeInfo.unread .nodeIcon
 {
  background-image: url(@forumIconUnreadPath);
 }

 .node .pageNodeInfo .nodeIcon
 {
  background-image: url(@pageIconPath);
 }

 .node .linkNodeInfo .nodeIcon
 {
  background-image: url(@linkIconPath);
 
Below is what is in his node_list.css

Code:
.node .nodeIcon
{
    @property "nodeIcon";
    background: transparent none no-repeat center center;
    margin: 10px 0 10px 4px;
    float: left;
    width: 44px;
    height: 34px;
    @property "/nodeIcon";
}

    .node .forumNodeInfo .nodeIcon,
    .node .categoryForumNodeInfo .nodeIcon
    {
        background-image: url(@forumIconReadPath);
        background-color: @primaryLightish;
    }

    .node .forumNodeInfo.unread .nodeIcon,
    .node .categoryForumNodeInfo.unread .nodeIcon
    {
        background-image: url(@forumIconUnreadPath);
        background-color: @primaryMedium;
    }

    .node .pageNodeInfo .nodeIcon
    {
        background-image: url(@pageIconPath);
    }

    .node .linkNodeInfo .nodeIcon
    {
        background-image: url(@linkIconPath);
    }

Looks like all he did was add background color?
 
So if you want to replace the transparent icon with 2 new ones then you would just remove the background-color: @primaryLightish; and background-color: @primaryMedium; and upload 2 new icons.

Make sure they're the same size (44x34px) otherwise you will have to change the css at the top for the width, height and margin.
 
Beta 4 update released. There are no new images, so if you have a current installation of Flexile you can just import the new XML file and you will be set. One image has changed. In addition to uploading the new XML, you will have to copy the file /styles/default/xenforo/editor/icons.png to /styles/flexile/xenforo/editor/icons.png. The XML file is attached here for your convenience. Because xenforo.com won't let me upload a file with an XML extension, just rename the file and remove the .txt extension once you've downloaded it. :)

For those using the alternate color options, you do not need to update each color. Simply update the original parent Flexile style and the color variations will update automatically. :)

Here is the changelog for Flexile 0.3:
  • Updated for Beta 4.
  • Changed roundness of search bar back to original for consistency.
  • Slightly reduced sidebar padding.
  • Moved the right content box in the header down 10px so it doesn't butt up against the "Log in or Sign up" tab when a visitor is viewing the site.
 

Attachments

Good Work Erik...

Is able to change the color from navbar? (img)

View attachment 6964

Thx
The best way to do this would be to install all the child color styles that you want, and then edit the template on the parent Flexile style and add images with links the the URL's to change the theme. So, for example, if your "Flexile Red" theme had a style id of 3, you would add an image that depicts red (could just be a 30x30 block of red, for example) in the appropriate place in the navigation template, and then wrap it in a link that goes to the URL to change the style.

The problem is that changing the style when logged in requires that you have the correct token, to prevent a security hole. It's possible to do what you want, but somewhat complicated. I'll see if I can figure out the exact code you need tomorrow. :)
 
Status
Not open for further replies.
Top Bottom