When the shift to a fluid layout was first announced, we also detailed how backgrounds would be treated in the new responsive design. That forum thread has screen shots that illustrate how a single-image background will be split in the center, in order to keep the visible portions aligned with the edges of a community's content area. Tiled background images will continue to behave in the same way they do now, since no split is needed with that option.
These adjustments all happen automatically once fluid layout is enabled. So that's good news: you don't have to do anything to prepare your background for fluid layout!
However, we received a number of questions and requests from some of the communities that use transparency in their site design. This makes sense, of course — if you've got a great background image that's visible behind the content area, you may not want it to be split down the middle. Or perhaps the split is no problem, but what if your chosen solid background color works well on the far edges of your image, but not in the middle?
We're very happy to introduce some new options in Theme Designer that allow these scenarios to be addressed. These options are available once fluid layout is enabled on a community.
"No split" option
The maximum fluid width for a community's content area is 1600px. A background image that won't be split needs to be even wider than that, in order to be visible on either side of the content. So the "no split" option for an image does not become available until you upload an image that's at least 2100px wide. This will ensure that there's always a decent amount of the background visible on the sides.
With this option selected, the background image will remain static as the content area changes size. Or, to put it another way, the portion of the background that's covered will depend on the user's display size.
Two background colors
If the central split isn't a problem, but you'd like the color inside the split to be different from the color beyond the outer edges of your image, you can do that! There are now two color selection areas available in Theme Designer. The "main" color will show beyond the sides of the image, and most of the bottom area as well. The "middle" color will be the same as the main color by default, but can be changed depending on your needs for the specific background image.
One of the reasons we left time for user feedback was so that we could make changes like this, to help out communities with specific requirements. Thanks to everyone who brought these needs to our attention! If you’re an admin and you’d like some help preparing your community for fluid layout, let us know here.
For more tips on getting ready for fluid layout, see also:
For the no-split background option, does the background resize with the content area, or does the content area resize over the image. In other words, will the border between the background area and the content area stay in the same place, or will it change depending on page size?
This is for the general, etc like new users on wikia, not just you guys who have no prob with the background, even then, some supposedly 'old' wikis still have those basic background look
Imamadmad wrote: For the no-split background option, does the background resize with the content area, or does the content area resize over the image. In other words, will the border between the background area and the content area stay in the same place, or will it change depending on page size?
Excellent question! The content area resizes over the image. The portion of the background that's covered will change depending on the user's display size. I'll update the initial post to make this more clear.
Is the image size limit remain 150kb? Because with such large image resolutions for background, sometimes it's not easy to make it into 150kb and still have good quality image.
Unok wrote: Is the image size limit remain 150kb? Because with such large image resolutions for background, sometimes it's not easy to make it into 150kb and still have good quality image.
At this time, the size limit won't be changing. However, we're definitely aware that an increase would be helpful, for the reasons you stated. We're currently assessing the possible site performance impacts of an increase, which is extremely important to understand before we would make such a change.
Buckyfan99 wrote:
When IS fluid layout coming out?
Why don't you ask for it to be enabled on a wiki you're an administrator on?
Where do we ask to enable it?
You can probably ask it at http://YOURWIKIA.wikia.com/wiki/Special:Contact where you replace the "YOURWIKIA" with the name/first word in the url of your wikia, though I only asked in this thread.
Unok wrote: Is the image size limit remain 150kb? Because with such large image resolutions for background, sometimes it's not easy to make it into 150kb and still have good quality image.
At this time, the size limit won't be changing. However, we're definitely aware that an increase would be helpful, for the reasons you stated. We're currently assessing the possible site performance impacts of an increase, which is extremely important to understand before we would make such a change.
One wiki I'm on already uses CSS to insert a background because it was more flexible than ThemeDesigner with a fixed width. Sometimes those images are over 150kb, so as long as there's still a reasonable limit I don't think it would be a major change. Obviously it'll be impossible to set a background through CSS with fluid layout, so an increase would be very helpful. I hope in your considerations you include how likely someone is to leave a website that looks like it's from last decade with jpeg artifacts all over the place.
I'm contributing my voice in support of an increase on the 150kb limit of uploading background images. It's extremely restrictive on the quality of backgrounds, especially for video game or movie wikis. And now that you're asking for even higher resolutions on wikis that don't want to use the split option... we desperately need a limit increase. At the very least, 1MB.
SlyCooperFan1 wrote:
I'm contributing my voice in support of an increase on the 150kb limit of uploading background images. It's extremely restrictive on the quality of backgrounds, especially for video game or movie wikis. And now that you're asking for even higher resolutions on wikis that don't want to use the split option... we desperately need a limit increase. At the very least, 1MB.
The solution is simple: Use a colour background, not any fancy images.
When the new designer feature was introduced, I had to disable and enable splitting before it actually worked. I don't know if this is fixed already, but if your wiki has issues with the background try my solution and it will be fixed.
Over on the Backgrounds and skins message, it gave some more details about what the split looks like and how it functions. If you don't care about what goes along the top and don't use transparency to let the background image show through the content area, couldn't you just use about a 350x1100 background image and let the system split it in the middle to make it as wide as it needs?
The maximum width of the content area will be 1600px, so on most monitors you only have to worry about 170px on each side. With the 350x1100 image, that gives you a 5px buffer on each side. When I took measurements off the Muppet Wiki, it wasn't until I stretched the browser window to over 2010px wide (spanning two monitors) before any extra of the background became visible, and the background stopped being revealed at 2404px.
Are there any stats on what monitor resolutions people are viewing wikis on? I've seen them on the web browsers being used, but not resolutions. It would be helpful to know stats like 0.7% of the viewers of your wiki have a resolution of 1920x1080 or higher, or that 1.9% of all visitors to all Wikia wikis are running that resolution or higher. Then we could know if we even need to bother with a wider background than what I just described.
I'm guessing this was implemented in the last few days or so, and if so, I've run into a problem with a particular page on my wiki. We have a numbered list of movies that is quite long, and only today did someone notice that when the list extends past 1000, or adds a fourth digit to the numbering, the first digit gets cut off. So, instead of reading:
998
999
1000
1001
It instead reads:
998
999
000
001
Our wiki uses a single color background, if that's anything; it's the Jade template in the Admin dashboard.
Is this just a formatting error that may need to be corrected? If so, is there anything I can do on my end to fix this, or do I just have to wait until it's corrected on the design end?
Adolytsi, the problem you are describing is unrelated to this topic. This topic relates to the fluid layout update, which has not applied to your wiki yet (it will on December 4).
The problem you are describing is a problem among all wikis on Wikia. Numbered lists with more than 3 digits in the lists will not show more than the last 3 digits. It's not just your wiki; this is on all wikis. And it is not related to this topic.
Ah, my apologies. This formatting issue wasn't the case with us until the last week or so, so I assumed that this new rollout was the culprit. Can you provide a redirect to the proper topic/forum where this can be brought up? This is my first time posting about an issue, so I apologize if I seem blissfully ignorant of where and how to go about doing this.
I've noticed the formatting issue for a while. And this feature rollout isn't for another couple of weeks, so. xD
To be honest, I am just as blissfully ignorant as you are about stuff like bug reports. I was just replying to you since you brought it up in here. A staff member will soon enough be along to reply here and help you out, though. :)
Layyy wrote:
i'm new so really i don't know what to do here... Can i get some help please?
There isn't anything you have to do. Just wait and all changes will work themselves out. Pages will become wider, but if you don't know how to set a table width, there probably won't be any fixed tables for you.
Don't get me wrong, I like the current layout I'm just confused what you are changing.
"Fluid layout" is not the new Visual Editor. They are both part of Project Darwin, but they are two different things. Fluid layout is releasing on December 4, but the new Visual Editor is still TBD.
I don't notice the changes on the test pages, they look like regular pages even when I resize the window or move it from my 16:9 monitor to my 4:3 monitor
However, I use a transparent background on the main column, and don't want my background image to be split. I have resized my background image to be wider than 2100 pixels, so I don't have to split it. However, that makes either the file size very large or the quality very bad. Could the file size limit of 150 kb be raised?
I tried uploading my background image to my own server and override it with CSS to get around the file size limit, and that works fine (although I realize this is probably bad practice), but then the background image is still loaded when I shrink the browser window.
Hey Wikia, is there any chance you could make some sort of image that admins can use as a template to make new backgrounds around? Before, I would make a background around a screenshot of the homepage at 100% zoom, but now I can't do that because then the image won't fit with the page split. So can you make some sort of template image that admins can download into an image editing program and design their background around and have it fit perfectly when uploaded into the theme designer?
Imamadmad wrote: Hey Wikia, is there any chance you could make some sort of image that admins can use as a template to make new backgrounds around? Before, I would make a background around a screenshot of the homepage at 100% zoom, but now I can't do that because then the image won't fit with the page split. So can you make some sort of template image that admins can download into an image editing program and design their background around and have it fit perfectly when uploaded into the theme designer?
The routine that performs the split in the background image needs to be adjusted. I've seen several wikis that now have this white band on both sides where the split occurs. It looks like it's trying to do a fade to a white background, but when the background image is dark and the central fill color is dark, that fade really stands out.
Take a look at the Space Battleship Yamato Wiki. The bow of the Yamato is right up against the split, and since this is a picture of a spaceship in space, it kind of looks like the ship is running into a wall.
The split routine should do this:
At the point where the split is going to occur, sample the pixels immediately to the left and right of the split in a large vertical range.
Determine the color that occurs most frequently.
Retrieve the value of the background color that will be inserted.
Have the fade go from the value in step 2 to the background color from step 3.
Regarding step 2, on this wiki, the most frequently-occuring color appears to be a medium blue, so the fade would go from that color to whatever fill color was selected. Which I can't see since there's no transparency for the central text area. It wouldn't be perfect since that split is going to cut across the green, orange and light blue talk bubbles, but it would work better than a fade from dark to white immediately against a dark central area.
RRabbit42 wrote: The routine that performs the split in the background image needs to be adjusted. I've seen several wikis that now have this white band on both sides where the split occurs. It looks like it's trying to do a fade to a white background, but when the background image is dark and the central fill color is dark, that fade really stands out.
Take a look at the Space Battleship Yamato Wiki. The bow of the Yamato is right up against the split, and since this is a picture of a spaceship in space, it kind of looks like the ship is running into a wall.
The split routine should do this:
At the point where the split is going to occur, sample the pixels immediately to the left and right of the split in a large vertical range.
Determine the color that occurs most frequently.
Retrieve the value of the background color that will be inserted.
Have the fade go from the value in step 2 to the background color from step 3.
Regarding step 2, on this wiki, the most frequently-occuring color appears to be a medium blue, so the fade would go from that color to whatever fill color was selected. Which I can't see since there's no transparency for the central text area. It wouldn't be perfect since that split is going to cut across the green, orange and light blue talk bubbles, but it would work better than a fade from dark to white immediately against a dark central area.
Maybe even sample an area rather than a single color? If it's space for example, the area where the split is could be a repeated pattern of stars.
RRabbit42 wrote:
The routine that performs the split in the background image needs to be adjusted. I've seen several wikis that now have this white band on both sides where the split occurs. It looks like it's trying to do a fade to a white background, but when the background image is dark and the central fill color is dark, that fade really stands out.
Take a look at the Space Battleship Yamato Wiki. The bow of the Yamato is right up against the split, and since this is a picture of a spaceship in space, it kind of looks like the ship is running into a wall.
The split routine should do this:
At the point where the split is going to occur, sample the pixels immediately to the left and right of the split in a large vertical range.
Determine the color that occurs most frequently.
Retrieve the value of the background color that will be inserted.
Have the fade go from the value in step 2 to the background color from step 3.
Regarding step 2, on this wiki, the most frequently-occuring color appears to be a medium blue, so the fade would go from that color to whatever fill color was selected. Which I can't see since there's no transparency for the central text area. It wouldn't be perfect since that split is going to cut across the green, orange and light blue talk bubbles, but it would work better than a fade from dark to white immediately against a dark central area.
The fact that the center is a white-ish blue is actually a bug and not intended. This should be fixed when Wednesday's code rolls out.
Fosu jeffrey wrote:
Ok i acceptthe fluid and i donot know the Wednesday code.
can u show me.
What he means is that Wikia makes updates on a regular basis and the fix for this particular one will be put in place in five days. We don't have to do anything.
Any background template of anykind? This background either too small (and stays in the top left corner) or too massive. Sometimes it is the right size but the split doesn't work and it is not wide enough.
I hajve a 16:9 monior, how is it not wide enough, not only that when i stretched it across my extended screen it is off-center, the right side is hidden behind the content.
I fixed the Macross Wiki's background, first, I print screened a webpage on community central, downloaded the wiki-background file from community central and I overlayed the two layers on Photoshop. I'll upload the PSD file later if anyone is interested.
Does anyone know why the Theme Designer on my wiki still uses the old layout without a no split option, even though my wiki has had Fluid Layout for over a week?
DanBing wrote:
Does anyone know why the Theme Designer on my wiki still uses the old layout without a no split option, even though my wiki has had Fluid Layout for over a week?
Are you talking about it not giving you options to do with the split? Is your background using tiling? Because if it does, it doesn't need to split, so the option for putting in a colour within the split isn't needed. If you are talking about the no split option, your background will have to be over 2100px wide for that to become available.
Agent Paige wrote:
How can I make a background with a Realpicture?
If you want to use an existing image such as a photo in your background, you will have to edit the image editing program like Photoshop or (personal favourite) Paint.net to make it fit around the content area when put onto your wiki. You can use FortressMaximus' template above if you're using Photoshop, or you can put your browser at 100% zoom and resize it to be at minimum width and screenshot your screen to build your background around in another image editing program. Make sure you put something in the middle that will look fine with a solid colour split in the middle, and make sure your image doesn't just suddenly stop when on the outer edges for people on larger than max-width screens.
Will have to try Pixlr too. GIMP is pretty awkward to use. It has a lot of strange behaviors and seems slow. It is somewhat insulting to say GIMP is similar to Photoshop. Photoshop is so much better.
