. Researching, it looks like that "

" is related to CSS, wich is an alien language to me at the time. Could someone give me a hand on this one? Thanks in advance. [15:01:27] https://cdn.discordapp.com/attachments/407537962553966603/1385273279761088623/image.png?ex=685577c7&is=68542647&hm=506dc784f93e087b63f225b84387e4668d8b125bbbe185dcb3fd8c52bade05dd& [15:01:41] https://cdn.discordapp.com/attachments/407537962553966603/1385273338196398100/image.png?ex=685577d4&is=68542654&hm=e177b65c4579f8b63f40ca1a7cf66fe826ac32845a8e4be34803010a87a9e63f& [15:03:17] https://cdn.discordapp.com/attachments/407537962553966603/1385273742363594873/image.png?ex=68557835&is=685426b5&hm=a4acc908b065f7b691205ba723ecebc66211f6c17207e21fc3d7cd09b57b176a& [15:03:30] In most cases using someone else's template is fine, as long as you follow the license it's under. A lot of the time they are under some variety of CC, usually with attribution and sharealike. Meaning you have to get them credit and release your version under the same license. [15:04:29] CSS is a language for styling, I'll try and look for something beginner friendly for you [15:05:12] My original idea is to use a similar rules infobox like that one. [15:14:19] [1/2] This isn't on by default for mobilefrontend? [15:14:20] [2/2] https://cdn.discordapp.com/attachments/407537962553966603/1385276519601148135/image.png?ex=68557acb&is=6854294b&hm=c7bb06269004dea2ddbd9f1d3eb0c6699b681d6210d85142829ee313d4731fa6& [15:14:29] No wonder my mobile css was broken for so long [15:15:36] It is meant to be disabled by default, yes. [15:16:47] Such is the default value from the extension itself https://github.com/wikimedia/mediawiki-extensions-MobileFrontend?tab=readme-ov-file#wgmfcustomsitemodules [15:17:51] Strange [15:18:36] Sorry, I'm not quite sure how to best help you with the very basics of CSS. Perhaps others have something better to say. In the meantime, I do have this link for you https://meta.miraheze.org/wiki/Help:How_to_customise_the_look_of_my_wiki [15:18:56] Thank you very much Asko [15:22:58] [1/4] I'll try and do an example of how the CSS for that works though. Other than that, I can't help but throw you figuratively in the ocean with knowledge. [15:22:58] [2/4] Some extra reading: [15:22:59] [3/4] https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/What_is_CSS [15:22:59] [4/4] https://test.miraheze.org/wiki/Help:Cascading_Style_Sheets [15:26:49] It was on by default on Miraheze until that was changed recently, but I agree it should stay disabled by default [15:28:35] Saw that you had recommended that, indeed. Would like to know exactly why though. Seems like a lot of wikis prefer to have it on. [15:32:11] I feel like it creates problems because it doesn't load Common.css on mobile anymore, so you either have to add all CSS twice or use a gadget to load it on both platforms [15:32:39] [1/10] Basically custom CSS in wikis comes from a few places, most commonly from a page called `MediaWiki:Common.css`. In there you can specify how you want elements (most commonly categorized by classes, identified with a dot `.class`) to look like. [15:32:39] [2/10] Based on your example here the CSS might look like: [15:32:39] [3/10] ``` [15:32:39] [4/10] .gamerules { [15:32:40] [5/10] color: beige; [15:32:40] [6/10] ... [15:32:40] [7/10] } [15:32:41] [8/10] ``` [15:32:41] [9/10] In the template you would then refer to this class with the class attribute `class="gamerules"`, in effect saying: "I want this to look like "gamerules"! [15:32:41] [10/10] You'll also need to pick up on a few HTML basics as well. For example the `div` element is like an empty container where you can put content in. [15:33:04] Oh damn, not loading Common.css is a big one indeed. [15:33:24] Yeah [15:33:42] The best solution would probably be to load both Mobile.css and Common.css on mobile [15:33:57] Idk if there's a config option for that though [15:36:23] With a quick glance, there doesn't seem to be such an option. [15:36:44] https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/blob/ca7c9973ea14855025a9aa71336965911c4300b7/includes/MobileFrontendHooks.php#L447 [15:37:53] if it's on, bye-bye Common.css! [15:40:13] tbf though, using media tags in the css common.css and/or skinname.css can give you that functionality anyway [15:42:33] My smooth brain likes the idea of separating the CSS like that more though [15:53:12] Fair enough, but Mobile Frontend is more meant for making a radically different look than desktop, I believe, specially when using a desktop skin, that is not naturally mobile responsive, where loading stuff in common.css/skinname.css might straight up break the mobile layout [15:55:13] Which is why my smooth brain will have to suffer [16:26:19] https://cdn.discordapp.com/attachments/407537962553966603/1385294635760357396/IMG_2394.png?ex=68558baa&is=68543a2a&hm=e3010a95488c52211875dced2ec7e98200a312a1ee92c118ae51f353610b1e62& [16:26:26] how do i fix this on mobile [16:26:30] the quotebox is MASSIVE [16:26:48] [1/2] ```

{{{Quote}}}/div [16:26:49] [2/2] ``` is the quotebox [16:27:43] even better, is there a way to change what template appears depending on if it's viewed on mobile or pc? [17:01:58] So, started to "play" with this webpage (http s://developer.mozilla.org/en-US/play), and after getting a result i like it, i implemented in my wiki´s /MediaWiki:Common.css, but when i tried to implement it, the results were not what i expected.. [17:02:36] https://cdn.discordapp.com/attachments/407537962553966603/1385303766756102295/image.png?ex=6855942b&is=685442ab&hm=20d48af18ad392aa69a581619b61bad5e9506bbae9d7523a09af9e39572921a3& [17:03:04] https://cdn.discordapp.com/attachments/407537962553966603/1385303884049809408/image.png?ex=68559447&is=685442c7&hm=a359791ef915a9ad3dd9de116a5236f892b3a075d5895c645de3814ced0149db& [17:17:39] link to wiki? [17:20:51] how the FUCK do i make something appear on desktop but not on mobil [17:29:46] https://ndmc.miraheze.org/wiki/Armor_Piercing_(AP)_Ammo Got it to work...finally [17:47:32] mobilefrontend afaik [17:49:44] oh [17:49:58] is there no setting for "if mobile ==> display this, if pc ==> display this [17:50:57] So is it something in MediaWiki:Editpage-head-copy-warn that you want to change or the "this is only a preview" you want to change? [17:53:09] because i'd very much prefer this [17:53:32] because it's just affecting one template and i do not intend to add many more [17:53:50] MediaWiki:Mobile.css?? I would guess [17:54:21] wait so there's nothing i can do to the actual template page directly that allows this? [17:54:54] Not 100% sure, I might be misunderstanding the problem [17:55:21] The mobile.css would allow you to change the size of the quote box [17:55:22] it might also be because i'm poorly creating a quotebox [17:55:44] [1/2] this is how it displays on pc [17:55:45] [2/2] https://cdn.discordapp.com/attachments/407537962553966603/1385317140093206528/image.png?ex=6855a0a0&is=68544f20&hm=a2aba511aa9e89f66eb9e15adf8113dce5fb513b39ebd62967ca41efa90fe02d& [17:56:06] [1/2] https://cdn.discordapp.com/attachments/407537962553966603/1385317230991900764/IMG_2396.png?ex=6855a0b5&is=68544f35&hm=ee521367768406da8f329e28d816c03c3dd309134a5d455482153b895b0f6bb4& [17:56:06] [2/2] https://cdn.discordapp.com/attachments/407537962553966603/1385317231331643402/IMG_2395.png?ex=6855a0b5&is=68544f35&hm=771edf7cb0e687788bc5db651799a41605f1e15102a94246655e3df1d95a319c& [17:56:16] but it does this on mobile [17:56:30] ```

[[File:Quotebox.png|50px]]/div

i don't get how to define this in the css [17:59:36] and also, the quotation gets fucked up and placed here [17:59:40] same way you've defined an infobox [17:59:42] rather than in the actual box [18:00:18] i stole it from here [18:00:19] https://dev.miraheze.org/wiki/Template:Infobox [18:00:26] so i don't rlly know how to edit it [18:07:08] [1/8] So in your CSS if you're adding ".quotebox { [18:07:08] [2/8] margin: 1px 0.7em 0.5em 0.5em; [18:07:09] [3/8] padding:0.5em 1em; [18:07:09] [4/8] width:550px; [18:07:09] [5/8] border-left:solid 0.6em #eaa; [18:07:09] [6/8] background:#ecc}" [18:07:10] [7/8] Then the section of your template becomes "

[[File:Quotebox.png|50px]]/div

[8/8] Because you've defined the class in your Css, just like you do with {| class=wikitable. [18:07:33] then you're free to configure the dimensions how you would prefer in mobile and on desktop. [18:20:11] so now how do i do this [18:20:22] for pc, it's gonna stay as 550px [18:20:29] for mobile, it's gonna be set to auto [18:21:28] On MediaWiki:Common.css you'd have the above, on the mobile.css you should just be able to remove the width parameter [18:21:49] ah [18:22:02] [1/7] so in that case, i just need to add [18:22:02] [2/7] ".quotebox { [18:22:03] [3/7] margin: 1px 0.7em 0.5em 0.5em; [18:22:03] [4/7] padding:0.5em 1em; [18:22:03] [5/7] width:auto; [18:22:04] [6/7] border-left:solid 0.6em #eaa; [18:22:04] [7/7] background:#ecc}" [18:22:04] for mobile.css [18:22:29] as far as I'm aware that should be what you need [18:33:10] https://cdn.discordapp.com/attachments/407537962553966603/1385326560021844149/IMG_2397.png?ex=6855a966&is=685457e6&hm=e20aa1fe367d4d9699d0fdbb4d78477966507560d9fd76cffe70b955f9c94029& [18:33:11] hmm [18:33:16] doesn't look like it's working [18:34:25] also, could i shove

[[File:Quotebox.png|50px]]/div into css somehow? [18:34:32] so i can chuck it out for mobile [18:40:03] Could it be it takes some time to changes in the MediaWiki:Common.css to have effect? [18:42:51] oh ok [18:42:58] it looks like its working properly now [18:43:29] actually. no vm [18:43:30] nvm [18:43:36] it's taking a very long time for the css to update [18:45:17] It'll take a little bit before the css updates. sometimes its good to try css in your user css first to check it out [18:58:40] oh yeah [18:59:05] is there any way i can move the quotation into common.css? [19:00:33] [1/7] because we have [19:00:33] [2/7] ```.quotebox { [19:00:33] [3/7] margin: 1px 0.7em 0.5em 0.5em; [19:00:34] [4/7] padding:0.5em 1em; [19:00:34] [5/7] width:550px; [19:00:34] [6/7] border-left:solid 0.6em #eaa; [19:00:34] [7/7] background:#ecc}``` [19:00:58] i want to make it so

[[File:Quotebox.png|50px]]/div is in common.css so i can kill it in mobile [19:11:56] how long does it take for .css to update, usually? [19:15:16] because i updated styling to minerva for mobile [19:15:23] and a few pages haven't updated [19:25:21] [1/7] ``` [19:25:21] [2/7] .quotebox img { [19:25:22] [3/7] position: absolute [19:25:22] [4/7] } [19:25:22] [5/7] ``` [19:25:22] [6/7] that should select the image inside of the quotebox i think [19:25:23] [7/7] and then in mobile css you can do display: none to make it not show [19:25:38] <_arawynn> common or skin css can take a while. You can try to speed it up by purging the cache [19:26:48] what [19:26:51] how do i make it pick the image [19:27:09] [1/4] do i append it like [19:27:10] [2/4] ```.quotebox img {[[File:Quotebox.png|50px]] [19:27:10] [3/4] position: absolute [19:27:10] [4/4] }```? [19:27:11] idk [19:27:56] add that to common.css or wherever you put the other thing, and put

around the actual template [19:28:27] [1/2] where exactly? [19:28:27] [2/2] https://cdn.discordapp.com/attachments/407537962553966603/1385340470204301393/Screenshot_2025-06-19_at_3.28.15_PM.png?ex=6855b65a&is=685464da&hm=84483d580a33df4b3b813f05196ea61d9992bcd9e09bb48eb00b48bd4ab08b02& [19:28:27] the img just selects all images inside the

/div [19:28:33] that should be fine [19:28:48] oh wait [19:29:04] [1/2] if i slap it on like this it works??? [19:29:04] [2/2] https://cdn.discordapp.com/attachments/407537962553966603/1385340626744119306/Screenshot_2025-06-19_at_3.28.53_PM.png?ex=6855b67f&is=685464ff&hm=823a6a406194db654a0eeecc3144cf7e1cf3e5a4ed5dac4adc4486a7f9af4b24& [19:29:13] yeah [19:30:45] im assuming i need to uhh [19:30:47] add noinclude? [19:31:06] https://cdn.discordapp.com/attachments/407537962553966603/1385341141032898580/Screenshot_2025-06-19_at_3.30.58_PM.png?ex=6855b6fa&is=6854657a&hm=cf8801c2d75bf52adc4bffec502adbed8d4f72015aa922032f51f2de4236e171& [19:31:14] probably after the last /div yeah [19:33:39] awesome [19:33:49] now final issue with quoteboxes [19:33:56] [1/2] how do i fix this [19:33:56] [2/2] https://cdn.discordapp.com/attachments/407537962553966603/1385341851308916766/Screenshot_2025-06-19_at_3.33.43_PM.png?ex=6855b7a3&is=68546623&hm=fbdb8108366d2e7086e8af88bec00acc5eef4bd5e3fb85aa0946d924f1184b4a& [19:34:07] it appears that the quotebox is stretched to the max for some reason [19:34:51] [1/2] when in reality, it should look something like this [19:34:51] [2/2] https://cdn.discordapp.com/attachments/407537962553966603/1385342081794445503/Screenshot_2025-06-19_at_3.33.43_PM.png?ex=6855b7da&is=6854665a&hm=20f61a5cb3a819d8767f0f608fa56b578a79f3e6d8dc44a0002304d4d32dca90& [19:37:04] does it still look fine on a larger screen size (where the infobox isnt taking up the full screen)? [19:38:00] infoboxes have slightly different styling at screen sizes under 640px [19:38:08] @finsanity this is on mobile [19:38:15] i would like to fix this issue for mobile users [19:38:44] [1/2] for pc users it works EXACTLY as i intended it to [19:38:44] [2/2] https://cdn.discordapp.com/attachments/407537962553966603/1385343059226792066/Screenshot_2025-06-19_at_3.38.27_PM.png?ex=6855b8c3&is=68546743&hm=ba018238da51b2ea16ef5dbf2ed54238a7f62dbebaa356ce8f3ad31dfe068183& [19:41:33] also it appears mobile.css is not working very well [19:41:52] [1/8] ``` [19:41:52] [2/8] @media (max-width: 640px) { [19:41:52] [3/8] .quotebox { [19:41:53] [4/8] clear: both [19:41:53] [5/8] } [19:41:53] [6/8] } [19:41:54] [7/8] ``` [19:41:54] [8/8] clear: both makes the element move below all other elements preceding it [19:42:35] and 640px bc thats where the infobox should switch to being 100% width [19:43:02] [1/2] aight, i cooked this up [19:43:02] [2/2] https://cdn.discordapp.com/attachments/407537962553966603/1385344141788975184/Screenshot_2025-06-19_at_3.42.50_PM.png?ex=6855b9c5&is=68546845&hm=fb2c3a2465d4bf830381d3b212ca0de8b4d703c44ba725ebc771adacc7cccc62& [19:44:18] i mean like add the media query below the stuff on common [19:45:02] granted idk what mobile devices would be over 640px, but in the random case that it is there just wont be styling on the box [19:45:50] oh ok [19:46:35] hm, can I change something in my wiki app? [19:48:24] App? [19:48:29] You mean application? [19:48:35] yes [19:49:32] Like it says I can download wiki app on mobile [19:54:04] hm [19:54:09] it appears this broke [19:57:11] (I should have clarified I had meant application like wiki request lol anyways) we don’t have a mobile app, are you getting confused with the Wikipedia app? [19:57:41] https://cdn.discordapp.com/attachments/407537962553966603/1385347828695699467/Screenshot_20250619-225733.jpg?ex=6855bd34&is=68546bb4&hm=4436abb51926fb9ccadc8456cd967dc8e1a5c58b6f78e02f8a511e831a092e99& [19:58:06] [1/2] I mean this app [19:58:07] [2/2] https://cdn.discordapp.com/attachments/407537962553966603/1385347935872483429/Screenshot_20250619-225754.jpg?ex=6855bd4e&is=68546bce&hm=5bfa30f91c135d93463e227df16644c656eed38b5aac85d901cafe4c8676b68d& [19:59:16] That’s a website [20:00:19] yes [20:00:35]