Jump to content


Photo
Non-Issue

Change the Background Image



  • Please log in to reply
25 replies to this topic

#1 TechAngel85

TechAngel85

    Akatosh

  • Administrator
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 13,040 posts

Posted 29 March 2014 - 11:52 AM

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. :psyduck:



#2 CJ2311

CJ2311

    Jarl

  • Mod Author
  • PipPipPip
  • 1,183 posts

Posted 29 March 2014 - 12:14 PM

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.
  • 0

#3 TechAngel85

TechAngel85

    Akatosh

  • Administrator
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 13,040 posts

Posted 29 March 2014 - 12:42 PM

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 <body> tags.



#4 CJ2311

CJ2311

    Jarl

  • Mod Author
  • PipPipPip
  • 1,183 posts

Posted 29 March 2014 - 01:20 PM

Potential solution: (Section 3) https://www.mediawik...a_specific_page
  • 0

#5 TechAngel85

TechAngel85

    Akatosh

  • Administrator
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 13,040 posts

Posted 29 March 2014 - 08:50 PM

Potential solution: (Section 3) https://www.mediawik...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.



#6 z929669

z929669

    Ixian Inventor

  • Administrator
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 7,082 posts

Posted 30 March 2014 - 12:34 PM

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 <body> 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



#7 TechAngel85

TechAngel85

    Akatosh

  • Administrator
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 13,040 posts

Posted 30 March 2014 - 07:16 PM

Page: https://wiki.step-pr...el85/MassEffect

CSS: https://wiki.step-pr.../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.



#8 z929669

z929669

    Ixian Inventor

  • Administrator
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 7,082 posts

Posted 31 March 2014 - 02:03 AM

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.



#9 EssArrBee

EssArrBee

    Incompatibilism Manager

  • VIP-Supporter
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 7,461 posts

Posted 31 March 2014 - 02:38 AM

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.


  • 0

#10 TechAngel85

TechAngel85

    Akatosh

  • Administrator
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 13,040 posts

Posted 31 March 2014 - 09:27 AM

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 ::P: 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! :lol:



#11 TechAngel85

TechAngel85

    Akatosh

  • Administrator
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 13,040 posts

Posted 31 March 2014 - 10:41 AM

I have tried every way and trick I know to get this to work, but it refuses to comply... :dry: 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.

 

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



#12 WilliamImm

WilliamImm

    Legendary Blue Dragon

  • Mod Author
  • PipPipPip
  • 1,453 posts

Posted 31 March 2014 - 11:00 AM

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.
  • 0

#13 TechAngel85

TechAngel85

    Akatosh

  • Administrator
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 13,040 posts

Posted 31 March 2014 - 11:14 AM

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:
 
 

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)

- 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
      [/list][/list]
      { 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.



#14 z929669

z929669

    Ixian Inventor

  • Administrator
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 7,082 posts

Posted 31 March 2014 - 11:19 AM

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.



#15 TechAngel85

TechAngel85

    Akatosh

  • Administrator
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 13,040 posts

Posted 31 March 2014 - 11:24 AM

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

 

EDIT:

:Ninja'ed :ninja:

 

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.





Also tagged with one or more of these keywords: non-issue

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users