xenDark [Deleted]

it_

Member
Code:
#logoBlock {
background: #000 url("@imagepath/header.png") no-repeat center;
}
For the header, what I used is this code, just simply change the file path accordingly and add it to the "extra.css" template.

Code:
#logoBlock {
background: #000 url(styles/default/rwbyheader.png) no-repeat center;
}
Let me know if it works out for you.
Sorry, doesn't work for me... :(
Tryed alot, also considered, there are might those "-symbols missing... Nope.

Currently Code:
Code:
#logoBlock {
    background: url("@imagepath/header.png") no-repeat center;
}
It seams to not overwrite the style, since this is what it shows in FireBug on the actual page:
Code:
#logoBlock {
    background: none repeat scroll 0% 0% rgb(0, 0, 0);
}
Page

Best regards
 

Sage Knight

Well-known member
Code:
#logoBlock {
background: #000 url("@imagepath/header.png") no-repeat center;
}

Sorry, doesn't work for me... :(
Tryed alot, also considered, there are might those "-symbols missing... Nope.

Currently Code:
Code:
#logoBlock {
    background: url("@imagepath/header.png") no-repeat center;
}
It seams to not overwrite the style, since this is what it shows in FireBug on the actual page:
Code:
#logoBlock {
    background: none repeat scroll 0% 0% rgb(0, 0, 0);
}
Page

Best regards
When you use @imagepath the "P" should be capital. In other words property names are case sensitive. The right property name is "@imagePath".

This should now work, let me know if it does not;
Code:
#logoBlock {
    background: url(@imagePath/header.png) no-repeat center !important;
}
 

WhoIsDo

Active member
For the header, what I used is this code, just simply change the file path accordingly and add it to the "extra.css" template.
Code:
.nodeList .node_3 .categoryStrip {
        background-color: #ece8ec !important;
    background-image: url(@imagePath/white.png);
    background-repeat: no-repeat;
    background-position: right;
}
Instead of .node_3 add your own node ID for each node and style it accordingly to your taste.

Same thing for the different node category titles:

Code:
.nodeList .node_3 .categoryStrip .nodeTitle a {
    color: #d42231 !important;
}
Again take note of the .node_ID and change it, all of this code goes into Extra.css

Let me know if it works out for you.
I was able to get the color of the node's background to change, but I can't get the background image to work even when I use the full URL for the image.
 

Sage Knight

Well-known member
Can we make this Style Fluid, and does it supports Simple Portal?
Yes, just go to Style Properties > General > Page Width Controller

Remove "max-width: 1120px;" and add some padding-left: 10px and padding-right: 10px

And it supports pretty much every xenForo plugin.

Any tips on how to get an image next to your logo like you did on the RWBY forums?
What I did was used a background image in the logoBlock div, like this:

Code:
#logoBlock {
background: #000 url(styles/default/rwbyheader.png) no-repeat center;
}
And the actual logo is just the regular built one found in the Header & Navigation Style property settings.

@Sage Knight any issues if I upgrade to 1.2.1?
Nope, the only thing you will see is the footer template is outdated, which can be ignored. I will provide a formal update by tomorrow but feel free to update without any worries.
 

WhoIsDo

Active member
What I did was used a background image in the logoBlock div, like this:

Code:
#logoBlock {
background: #000 url(styles/default/rwbyheader.png) no-repeat center;
}
And the actual logo is just the regular built one found in the Header & Navigation Style property settings.
Is this going in the extra.css section?
 

Sage Knight

Well-known member
Strange. I've added that code in & even added the full path to the image and it still doesn't show.
I made a silly mistake, the image path should be like this:

background: #000 url(styles/xendark/yourimage.png) no-repeat center !important;

Take note of the /xendark/ image path and !important to override the original. Let me know if it worked.
 

WhoIsDo

Active member
I made a silly mistake, the image path should be like this:

background: #000 url(styles/xendark/yourimage.png) no-repeat center !important;

Take note of the /xendark/ image path and !important to override the original. Let me know if it worked.
Thanks, that works. Any idea on how to fix the category image issue I mentioned above?

Also, I'm trying to figure out a way to make the header image disappear if it gets to a certain width (mobile). Any tips on this?
 
Last edited:

Sage Knight

Well-known member
Thanks, that works. Any idea on how to fix the category image issue I mentioned above?

Also, I'm trying to figure out a way to make the header image disappear if it gets to a certain width (mobile). Any tips on this?
For the image, add !important right after the the path, like so;

Code:
background-image: url(@imagePath/white.png) !important;
background-repeat: no-repeat !important;
background-position: right !important;
I'll make this a bit more efficient in the next update so that you can remove the !important property, but for now this will work.

To not display the header image use the following media queries and change them to suit your needs, everything goes in the extra.css

Code:
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveWideWidth) {
#logoBlock {display: none;}
}
@media (max-width:@maxResponsiveMediumWidth) {
   #logoBlock {display: none;}
}

@media (max-width:@maxResponsiveNarrowWidth) {
   #logoBlock {display: none;}
}
</xen:if>
The first one is if you want to not display it when it reaches 800px or below, the second one 610px or below and the third one 480px or below.

So if you want to not the header to now show up on mobile use the 3rd one (480px or below).
 
Top