Black Responsive [Deleted]

[Arty]

Width and quote issues: can you post link to forum? That sounds like compatibility issues with using outdated style on newer XenForo.

To check if you are using latest version check if style has customized EWRporta2_Global.css Support for your add-on was added in latest version so that file should be there even if your add-on isn't installed.

Sprites: nothing is missing. See relevant template files that add-ons should ideally reuse instead of writing their own rules.

 

[Jaxel]

Width and quote issues: can you post link to forum? That sounds like compatibility issues with using outdated style on newer XenForo.

Your demo forum: http://www.artodia.com/xfdemo/11/forums/
Reduce the width of your browser... a horizontal scroll bar will appear.

To check if you are using latest version check if style has customized EWRporta2_Global.css Support for your add-on was added in latest version so that file should be there even if your add-on isn't installed.

Yes, its there... I'm telling you, we're using the most recent version.

Sprites: nothing is missing. See relevant template files that add-ons should ideally reuse instead of writing their own rules.

Attached is the xenforo-ui-sprite.png included in your package. Notice its missing sprites.

 

[Arty]

Horizontal scrollbar: you are right. Thanks for noticing! It is caused by misplaced quick search in header.

To fix it open search_bar.css, find

<xen:if is="@enableResponsive">

add after it

@media (max-width:@maxResponsiveWideWidth)
{
   .Responsive #QuickSearch
   {
     right: 0;
   }
}

+Quote button is there. Maybe you have it disabled on forum?

Sprite: there is also xenforo-ui-sprite-editable.png with the rest of images. I agree that situation is not ideal, that's why in my latest styles I didn't touch sprite image at all (its not used, but its in package so third party add-ons could use it). What exactly sprite are you looking for?

 

[Jaxel]

Sprite: there is also xenforo-ui-sprite-editable.png with the rest of images. I agree that situation is not ideal, that's why in my latest styles I didn't touch sprite image at all (its not used, but its in package so third party add-ons could use it). What exactly sprite are you looking for?

Its not that its not ideal... its that its BROKEN. When the forum needs to pin "sticky" or "locked" thread icons, it looks at xenforo-ui-sprite.png, NOT xenforo-ui-sprite-editable.png. Therefore, in this skin, there are no sticky/locked/etc icons.

 

[Arty]

Or you can simply reuse discussion_list.css for existing css instead of creating your own.

 

[Arty]

@Jaxel: to prevent this problem from happening, in next version I'll rename existing xenforo-ui-sprite.png to something custom and will put original xenforo-ui-sprite.png in its place, so add-ons that refer sprite instead of reusing existing css would work fine without modifications.

My new styles already do that (not using sprite at all, but file is still there for third party add-ons). I'll apply it to this old style as well.

 

[Jaxel]

Arty, you're misunderstanding... THIS SKIN is looking for xenforo-ui-sprite.png, NOT xenforo-ui-sprite-editable.png. So with THIS SKIN, you have no sticky/locked thread icons. I had to upload the xenforo-ui-sprite.png from a previous version to get my sticky/locked thread icons back.

Why are you making it so complicated? Why don't you just use this:

Instead of this?

 

[Jaxel]

Go to YOUR DEMO FORUM!
http://www.artodia.com/xfdemo/11/forums/suggestions-archive/

Inspect the element of your sticky thread icon:

background:
    transparent url('styles/black_responsive/xenforo/xenforo-ui-sprite.png')
    no-repeat 10000px 0;

See? xenforo-ui-sprite.png

 

[Arty]

xenforo-ui-sprite.png is there. I've checked zip file for latest version - it is there and it has sticky icon.

File you linked is xenforo-ui-sprite-big.png, which is replacement for some icons for high definition displays. It doesn't replace all icons, only few so it doesn't include icons it doesn't replace.

 

[Jaxel]

Also... xenforo-ui-sprite-editable.png doesn't even have the sprites we are talking about here.

 

[Jaxel]

xenforo-ui-sprite.png is there. I've checked zip file for latest version - it is there and it has sticky icon.

File you linked is xenforo-ui-sprite-big.png, which is replacement for some icons for high definition displays. It doesn't replace all icons, only few so it doesn't include icons it doesn't replace.

Yeah... no. xenforo-ui-sprite-big.png is the exact same thing as xenforo-ui-sprite.png, except BIG.

These are the 4 sprite sheets included in dark_responsive.





Notice how there are no thread icons?

 

[Arty]

Oh, I found what's wrong with it! Black Responsive is fine, problem is with Dark Responsive style. It has wrong xenforo-ui-sprite.png in zip file.

I'll repack zip file in next 10 minutes. You can simply copy xenforo-ui-sprite.png from Black Responsive instead, its almost identical

 

[Arty]

Here is correct xenforo-ui-sprite.png for Dark Responsive style, which is a bit lighter than Black Responsive's image.

 

[Jaxel]

I'm also curious as to why black_responsive was renamed to dark_responsive.

 

[Arty]

Its a different color scheme. Few customers wanted to make style a bit lighter, but that's not possible without rebuilding all images, so I've added additional color variation.

Phew. So many confusions because of tiny name difference

 

[mauzao9]

Renewed my license, waiting for next update about ShowCase compatibility.

On another note i'm trying to achieve something with Black Responsive that is color nodes on the forum list per category, been happening that many users create the threads on the wrong sections, so i want to highlight better the categories.

The CSS i got that is working at default:

.forum_list .sectionMain { border: 0px solid #A5CAE4; padding: 0; }
.nodeList  .node_3 .categoryForumNodeInfo, .nodeList .node_3 .forumNodeInfo, .nodeList .node_1 .pageNodeInfo,
.nodeList .node_1 .linkNodeInfo {
    background-color: transparent;

}


.nodeList .node_3{
    margin-bottom: 20px;
    border: 1px solid #cc70cc;
    background-color: #fedbfe;
    padding: 10px;
    border-radius: 4px; }

.nodeList  .node_3 .categoryStrip {
    background-color: violet;
        border-top: 1px solid #cc70cc;
        border-bottom: 1px solid #cc70cc; }

.node_3 .nodeTitle a, .node_3 .nodeLastPost a  {
        color: purple; }
.node_3 .nodeLastPost.secondaryContent {
        border: 1px solid #e5b2e5;
        background: url("@imagePath/xenforo/gradients/category-23px-light.png") repeat-x scroll center top #f7e6ff; }
   
.nodeList .node_3 .categoryStrip .nodeTitle a {
        color: purple; }

.nodeList .node_3 .categoryStrip .nodeDescription {
        color: #ffe6ff;
        font-size: 11px;
        font-family: helvetica; }

.nodeList .node_3  .forumNodeInfo, .nodeList .node_3 .linkNodeInfo, .nodeList .node_3 .pageNodeInfo {
border-bottom: 1px solid #e1b5e1; }

If you can help poking this to work on Black Responsive would be amazing, because for some reason it won't change the background color on the nodes itself, and won't replace the actual borders.

 

[Arty]

If you want to change colors then change colors. That code also changes layout, so its not a good idea. You need to change only background-color and border-color values and only when border exists.

Using color values from code above, here is code that should work:

.nodeList .node.category.node_3 { border-color: #cc70cc; background-color: #fedbfe; }
.nodeList .node_3 .categoryStrip { background-color: violet; }

and so on.
The rest of code should work, just make sure to remove everything other than border-color (remove width and style) and background-color (remove image, image position and other stuff).

 

[mauzao9]

It's perfect! Last thing, how to also change the separators between the nodes? The 2 colors line?

I used one other effect for the category title and it turned out really nice,

.nodeList .node_3 .categoryStrip { background: url("@imagePath/xenforo/gradients/category-23px-light.png") repeat-x scroll center top; }

Thanks for your help ^^

 

[mauzao9]

Heya @Arty that CSS code you gave me there, for some reason it only works used Once, if i used it for node 3, and try to repeat it to node 4... nothing will happen (and vice-versa), only the .nodeList .node_3 .categoryStrip has effect.

Why is this?

 

[Arty]

Sorry, didn't notice your previous message

Separator between nodes: its a double border. Top part of border belongs to node above (its bottom border), bottom part of border belongs to node below (its top border). To add custom color add

.node.node_3 div.nodeInfo { border-bottom-color: whatever; }

Code should work fine for any node. Maybe you didn't get id correctly or made a typo (those are always the hardest to find) when copying code?