This is a simple css file to move the Extra Networks such as LoRAs and HyperNetworks to appear below the settings and output box.
If you are like me and have a lot of LoRAs, it can get annoying scrolling through them to go back and forth between the prompt and the output. This simple CSS file will just move all of the LoRAs to sit below the output so you can scroll down and pick one, and then go back up and work with it.
I also included some code to remove the small scroll box for the LoRAs, so you can scroll through all of them.
How to use:
Unzip and grab the user.css file
Add this file to your stable-diffusion-webui folder in the root directory.
If you are already using a user.css file, you can just copy the contents of this file and add it to yours.
Reload the UI.
Description
FAQ
Comments (25)
Possibly the best thing uploaded on this entire site.
Truly what we long needed, but sadly, I can't get it to work. I had no user.css in my root directory before, and dragging yours in and reloading, does nothing for some reason. Any ideas?
make sure you reload the UI and not just refresh the page
@gurukast Did that multiple times, even restarted the whole thing. :(
You need to place the user.css file in the root folder in the automatic1111 webUI. (The same folder as config.json) The file should not have any hidden file extensions like user.css.txt. (You may need to turn on show file extensions in windows to view them.) Inside the file it should have two entries:
one titled /* Move Networks below everything */
and the other titled /* Hide the scroll Box around the cards */
It should work fine. My user.css file is much longer as I have a bunch of other tweaks, but I just tried testing it with only those two entries and it still moves the networks to the bottom.
@mrkuenning Perhaps there is a conflict somewhere, but I highly doubt it. I really don't know what the issue is. I did exactly as you said, yet it's like nothing changed, sadly. For good measure, i tried with all extensions disabled as well, which didn't help. I don't know if it is relevant, but I'm running:
python: 3.10.6 • torch: 1.13.1+cu117 • xformers: 0.0.16rc425 • gradio: 3.16.2 • commit: 64b7e838
@Lopodelas Hmm that is an older build as mine is:
python: 3.10.6 • torch: 2.0.0+cu118 • xformers: N/A • gradio: 3.29.0 • checkpoint: c0d1994c73
I have been using that CSS file for over a month now. But I am not sure if its compatible back to gradio 3.16.
commit: 64b7e838 is dated Mar 22
Is there a particular reason you haven't updated yours?
@mrkuenning I kept having issues at some point and after googling for a good while, someone mentioned that this exact commit doesn't have the issues I was having. I used to use the latest version at all times, but for a month or two, I've been sticking to this one
@Lopodelas I Use This Version:
python: 3.10.10 • torch: 1.13.1+cu117 • xformers: N/A • gradio: 3.16.2 • commit: 0cc0ee1b • checkpoint: 7f96a1a9ca
Try Changing The (Move Networks below everything) Section To This, it Worked For Me.
#tab_txt2img #txt2img_toprow ~ .form,
#tab_img2img #img2img_extra_networks,
#txt2img_extra_networks
{
order: 1 !important;
}
If you are the installer of Qiuye, please copy the text content into the style.css file,秋叶包的要件文本内容复制到style.css那个文件内
感谢
Thanks, really helpful!
Any chance to change it into an extra so we can install it using the built-in git?
CSS doesn't work that way, there's an extension to add extra CSS.
我想让你提供的user,css 里面的below 变成right,
可以没有实现。请问如何让额外网格移动到右侧呢。希望你能告诉我,感谢。
I got it working but I have really stupid question, how i can see the preview images of loras, lycoris etc.?
Try installing this extension: And then click the button at the top on the new tab that was added. This should look through civitai and download pictures for the models it finds.
https://github.com/butaixianran/Stable-Diffusion-Webui-Civitai-Helper
You can also manually do it by hovering with the mouse over the model, and clicking "Replace preview" after you've rendered an image.
Thank you!
Copied the user.css in root folder where webui-user.bat is, restarted console and nothing. I use firefox.
Same. I use Chrome.
Are you running an updated version of A1111? I know some people running an older version had to modify the code a little.
@mrkuenning I just got it working today. The instructions didn't mention that I had to click on the little extra networks button to show them. If someone doesn't know about that little icon, it can seem like it doesn't work at all. Also, this is AMAZING! Thank you so much. It's my very favorite add-on now for Auto1111 WebUI.
Ok, after updated ff and sd that work now. thank for all !!
能不能加个折叠隐藏?
Does this still work, and if so where to put it in V3.4?
Details
Available On (1 platform)
Same model published on other platforms. May have additional downloads or version variants.

