non-issue Change the Background Image

[TechAngel85]

Is there a way to change the background image of a single wiki page from the default Skyrim image? For example, if a user is creating a guide for a different game other than Skyrim, they'd be able to change the background image to something from that game. I've tried this CSS code:

body{height: 100%;width: 100%;background: url('URL TO IMAGE') no-repeat;background-position: 50% 50%;}

It should work in theory; however, it's not. In fact, when I use the code all other CSS formatting is eliminated from the page. Very strange.

[CJ2311]

Are you using an external css file for the style? I noticed that previewing a page doesn't take css into account... Also for some reason the first css selector was being ignored so I had to add a dummy style at the top of my css page...

Pretty crazy behavior.

[TechAngel85]

  On 3/29/2014 at 5:14 PM, CJ2311 said:

Are you using an external css file for the style? I noticed that previewing a page doesn't take css into account... Also for some reason the first css selector was being ignored so I had to add a dummy style at the top of my css page...Pretty crazy behavior.

i am and linking to it within the page that needs to render the CSS. I haven't tried doing it in-line on the actual page yet. But I have a feeling it's something to do with the wiki rendering

tags.

[CJ2311]

Potential solution: (Section 3)

https://www.mediawiki.org/wiki/Extension:CSS#Problems_with_changing_the_color_or_background_of_a_specific_page

[TechAngel85]

  On 3/29/2014 at 6:20 PM, CJ2311 said:

Potential solution: (Section 3)https://www.mediawiki.org/wiki/Extension:CSS#Problems_with_changing_the_color_or_background_of_a_specific_page

Thanks. Tried it and it's still not working.

 

Knowing the dev team, it's probably hard coded into the wiki and can't be changed. Bummer if that's true but I'll wait for Z or s4n to reply.

[z929669]

  On 3/29/2014 at 5:42 PM, TechAngel85 said:

i am and linking to it within the page that needs to render the CSS. I haven't tried doing it in-line on the actual page yet. But I have a feeling it's something to do with the wiki rendering

tags.

Can you point me to the page you are using it on and how you are implementing it? You should use the #css extension, and as CJ says, it strangely does not use the very first css declaration does not get applied for some reason, so just use something like:

h1 {}

... before your other style references (that is how i had to do it for the STEP GUide)call it like so from the page you want to style:

{{#css:STEP:StepGuide.css}}

See the Extension page for use-case examples

[TechAngel85]

Page: https://wiki.step-project.com/User:TechAngel85/MassEffect

CSS: https://wiki.step-project.com/User:TechAngel85/MassEffect.css

 

I've added it back into the CSS temporarily so you can see that any inclusion of the "body" CSS completely nullifies the rest of the CSS.

[z929669]

I am 95% certain that it is because you are using a URL to an external site. Try uploading the image and use the path to the image, like:

'../images/path/blah.jpg'

I added the correct body declaration at the top of your css, so just edit that. Use a png with transparency for the best effect.

[EssArrBee]

  On 3/31/2014 at 7:03 AM, z929669 said:

I am 95% certain that it is because you are using a URL to an external site. Try uploading the image and use the path to the image, like:

'../images/path/blah.jpg'

I added the correct body declaration at the top of your css, so just edit that. Use a png with transparency for the best effect.

Does that apply to all file types or just images? I noticed fonts (.fft) do not apply either if they are from external URLs.

[TechAngel85]

  On 3/31/2014 at 7:03 AM, z929669 said:

I am 95% certain that it is because you are using a URL to an external site. Try uploading the image and use the path to the image, like:

'../images/path/blah.jpg'

I added the correct body declaration at the top of your css, so just edit that. Use a png with transparency for the best effect.

Your 5% has kicked you in the butt Still doesn't work and as before, any inclusion of the "body" CSS negates the entirety of the CSS code. This is very strange behavior...worse than IE. Haha!

[TechAngel85]

I have tried every way and trick I know to get this to work, but it refuses to comply... I'm all out of ideas. Time to dig deep into Google until s4n shows up.

 

"You must comply!" ~ Seven of Nine

 

---

 

Found this and it made me wonder if the page background is also hard coded into the .PHP files as the logo is:. This would account as to why it can't be changed. Regardless, this background is defined globally to the site somewhere. I'm not going to poke around as I'm sure s4n has all that locked down.

 

  Quote

Can I customize the logo in the top left corner? If so, how?

The logo is a portlet block without a pBody section. It is identified by the p-logo id. The background image is specified by the $wgLogo variable, which is defined in DefaultSettings.php. This location is relative to the web server root and not the system root. Redefine this in LocalSettings.php to change the image. If set wrong there will be no image on the page; check your web server error log and adjust accordingly

[WilliamImm]

Stuff like this makes me wish there was a wiki written in Ruby/Rails or some other programming language that doesn't make you want to die every time you mess with it.

[TechAngel85]

I think I found the answer to where the background image is found. It's coded into the default (STEP) skin of the site. Changing the skin eliminates the Skyrim background image and the issue of the "body CSS" negating all the other CSS code; however, it still doesn't allow the background image to be displayed. Appears as if some of the skin's CSS is taking priority over the user's CSS (this is not normal CSS behavior though).  If I could get my hands on the original "Step.css" file, I could look into to. Sound like a job for the Dev Team.
 

---

Just found this:
 
 

  Quote

Background image does not load properly
Hello, I'm experiencing some problems with my wiki's background image. For some reason, whenever I update the background image, the old one still presents as the current image. I have tried to switch back and forth between old and new images but nothing changed. The small preview images in the file's history indicated that there was nothing wrong with the upload process or the file (at least that is what I think), so I guess there must be some problems with displaying system. Is there anyway to overcome this? Venom00 05:52, February 16, 2011 (UTC)

  Quote

- Hi, I am not a offical STAFF but I can help you

[*]
[*]You need to use MediaWiki:Wikia.css, put this coding down but switch BACKGROUND with the background image link

{ body.mediawiki  {  background:#0F5835 url(BACKGROUND) fixed center top repeat !important; background-repeat-x: repeat !important; background-repeat-y: repeat !important; background-color: #0F5835!important{

 

 

If these "!Important" declarations are used in the skin's CSS for the body then that is the cause of all the issues. These declarations basically nullifies all child tags that might come under it. Therefore, the skin's CSS where they're included will take priority over anything defined by the user. These declarations will need to be removed.

[z929669]

It has somthing to do with the way s4n is loading the site CSS. The background-image custom assignment voids all css, regardless of whether '!important' is used to prioritize.

 

I put in the question to to s4n, but he has not been around for a few days. Lots to do, but I unfortunately cannot do it since he is the only person that knows the config well enough to address many current issues :/

 

PS: I edited the custom css page for clarity, so please leave the body element alone until s4n responds.

[TechAngel85]

I updated my post above. Can you check this Z?

 

EDIT:

:Ninja'ed

 

Actually, no...did you check to see if these declarations are defined in the skin's CSS? If so, even the user's "!Important" declarations will not work. They'll have to be removed from the skin.

[z929669]

!important is not declared in the site CSS for that element attribute, so that is not the issue. if you inspect the element, you will see that the background-image path is being pre-pended from elsewhere and the CSS is appending the path.

 

Let's let s4n explain.