I want to edit my css on the wiki, but I don't want to embed it immediately on the wiki. I'd like to do everything in the sandbox beforehand. But I ran into the problem that I don't know how to create a sandbox where I could edit css.
41,815
pages
ALL POSTS
All posts by 123sderhy
I have already corrected the code, but it still does not work with fandom links in the format [[
.fe-btn {
background: #080B0E;
border: solid #2c2d31 3px;
border-radius: 10px;
padding: 10px 20px;
color: white;
font-weight: bold;
font-size: 15px;
}
.fe-btn:hover {
background-color: #333;
}
.lrg-btn {
grid-column: span 3;
}
.fe-grid p {
display: grid;
grid-template-columns: repeat(3, auto);
grid-template-rows: repeat(2, auto);
grid-auto-flow: row dense;
gap: 5px;
}
Yes, I know about that. I waited for about 10 minutes because I went to the store, but nothing has changed yet.
Nope not working
just try it for yourself and you'll understand
https://gearworks-fan.fandom.com/wiki/Template:Main_page/For_editors
(Edited by 123sderhy)
I encountered a problem where my link only works for text, not for the entire button. How can I fix this?
HTML:
<center>
<div class="fe-grid">
<div class="fe-btn">[[Gearworks Wiki:Wiki rules|Wiki Rules]]</div>
<div class="fe-btn">[[Page Layout Guide|Page Layout Guide]]</div>
<div class="fe-btn">[[Manual of Style|Manual of Style]]</div>
<div class="fe-btn lrg-btn">[[Wiki Staff|Wiki Staff]]</div>
</div>
</center>
CSS;
.fe-btn {
background: #080B0E;
color: white;
font-weight: bold;
border: solid #2c2d31 3px;
border-radius: 10px;
padding: 10px 20px;
font-size: 15px;
}
.fe-btn:hover {
background-color: #333;
}
.lrg-btn {
grid-column: span 3;
}
.fe-grid {
display: grid;
grid-template-columns: repeat(3, auto);
grid-template-rows: repeat(2, auto);
grid-auto-flow: row dense;
gap: 5px;
}Hello i want to add a bottom-up gradient as shown in the example. I need to add it to the BOTM image
(The picture on the example is a photoshop)
2. I also wish that I could change the background image not through the css but in the template just by changing the file.
Css-It 's called BOTM:
https://gearworks-fan.fandom.com/wiki/MediaWiki:Fandomdesktop.css
Html:
https://gearworks-fan.fandom.com/wiki/Template:Main_page/BOTM/Editors
I 'd appreciate any help
(Edited by 123sderhy)
You're my savior. I don't know what I'd do without you and how to express my gratitude. ♥️♥️
I want to add an image above the galleries for example a red rectangle
And there's no example page. I think I overdid it with the visualization.
I have a problem that I want to add to the top of the galleries an additional image but I don't know how to do it for example as in this example the bottom image is what is inside the galleries the caption is what I want to add
here is a link to my wiki
https://gearworks-fan.fandom.com/wiki/Gearworks_Wiki
Sure if you need that
Page
https://gearworks-fan.fandom.com/wiki/Template:Content
Image
https://gearworks-fan.fandom.com/wiki/File:Bg_test.png
But really, I was just asking what part of the code is responsible for inserting the image.
Hi, I'm having a problem. I want to make a background like the one in the photo. I already have a content box.
Example:
Thx for help :D
How do I make the spaces between the buttons? Here 's the link to the page
https://gearworks-fan.fandom.com/wiki/Template:Main_page/For_editors
All the CSS is in Fandomdesktop.css at the bottom of the page under Test
Thank you very much. It took me two days to find the problem myself
Good day when I want to put something in the right column he has the content inside it move down although the rest of the content how to get crammed
https://gearworks-fan.fandom.com/wiki/Gearworks_Wiki
I want to make an activity feed like in the photo but I don't know how to make it
wiki link https://refinerycaves.fandom.com/wiki/Refinery_Caves_Wiki
Oh thanks, I had a look at flexbox and it seems really more convenient than the grid in my situations. I'll try redesigning my design to fit flexbox and if it doesn't work out I'll go back to the old system, anyway, thanks for the help
(Edited by 123sderhy)
How do I make the spacing between columns and round the edges of each icon?
Fandomdesktop.css
.home-grid {
display: grid;
border-radius: 15px;
column-gap: 1px;
grid: auto-flow dense/repeat( auto-fit, minmax( 9.375rem, 1fr ) );
grid-auto-rows: minmax( 3rem, auto );
grid-gap: var( --space-xs );
}Template source
<div class="home-grid" role="navigation">
<div class="home-card home-card--button" id="home-nav-trains">
<div class="home-card__background">[[File:Mainpage_items.png|alt=A Class 158 with the Saltire livery.|300px|link=List of Trains]]</div>
<div class="home-card__foreground">'''Trains'''</div>
</div>
<div class="home-card home-card--button" id="home-nav-stations">
<div class="home-card__background">[[File:Mainpage_items.png|alt=Passenger view of Gleethrop End Station|300px|link=List_of_Stations]]</div>
<div class="home-card__foreground">'''Stations'''</div>
</div>
<div class="home-card home-card--button" id="home-nav-signalboxes">
<div class="home-card__background">[[File:Mainpage_items.png|alt=An exterior view of the Dovedale Central Signal Box|300px|link=List of Signal Boxes]]</div>
<div class="home-card__foreground">'''Signal Boxes'''</div>
</div>
<div class="home-card home-card--button" id="home-nav-landmarks">
<div class="home-card__background">[[File:Mainpage_items.png|alt=The Lighthouse at Dovedale Central during the day|300px|link=List of Landmarks]]</div>
<div class="home-card__foreground">'''Landmarks'''</div>
</div>
<div class="home-card home-card--button" id="home-nav-Badges">
<div class="home-card__background">[[File:Mainpage_items.png|alt=Maxwell the Cat in his old shed. This was formerly located at Satus.|300px|link=Badges]]</div>
<div class="home-card__foreground">'''Badges'''</div>
</div>
<div class="home-card home-card--button" id="home-nav-docs">
<div class="home-card__background">[[File:Mainpage_items.png|alt=A photo of Marigot Crossing and the Marigot Crossing Signal Box in the background.|300px|link=Category:Guides]]</div>
<div class="home-card__foreground">'''Guides'''</div>
</div>
</div>
(Edited by 123sderhy)