Adding CSS or JS file to MediaWiki? - html

I've been following some tutorials at mediawiki.org but I didn't make it. I need to add a new CSS or JS code to be available in all my wiki (basically be cause I need to add some div tags).
Can you guys help me?
Appreciate that.

You can edit the CSS or JS files used by your wiki at the page names:
MediaWiki:Common.css
MediaWiki:Common.js
For instance, here is the Common.css used by Wikipedia.
There are also similar pages used for specific themes. For instance, if your wiki is using the Vector theme, you can place code specific to that theme at:
MediaWiki:Vector.css
MediaWiki:Vector.js
Editing any of these pages will require admin rights.

If you plan to reuse and extend an existing MediaWiki theme, you do not need to add a new CSS file. It is much easier.
Suppose your Wiki is running on mywiki.local/wiki/, and we use the Vector skin.
Now all you have to do, is to open mywiki.local/wiki/MediaWiki:Vector.css and add the styles for the DIVs you add to pages.
The real question here is: do you plan to modify the skin itself, or do you just plan to add your own DIVs into Wiki pages? Anyway, in both cases you can edit the skin CSS via MediaWiki to avoid hacking around in the file system - which breaks with each update.
Avoid editing MediaWiki files at any cost, upgrades become painful that way.
If you want to make styles for your DIVs in pages available to all MediaWiki skins, you have to edit mywiki.local/wiki/MediaWiki:Common.css. Changes made here are applied to all skins.

In my experience, I had to modify the /skins/Vector.php and /skins/vector/main.css files. Could you explain in more detail what are you trying to do?

Related

Can I use existing HTML and CSS code in WordPress?

So I've created a restaurant webpage from scratch (my first full webpage). I want to get into freelance work, but I've heard that a lot of people use WordPress and it's plugins to create websites fast. I'm not really a fan of template editing, but can I use my existing HTML and CSS, upload it to WordPress and edit it there, and utilize WordPress plugins? I really want to add stuff like online ordering, RSVP systems, or mini stores on these sites.
No Problem, you would be able to make custom templates with your existing HTML/CSS/PHP. While having the ability to take advantage of plugins. Using an open source platform like WordPress will give the administrative rights to the restaurant owner, and most likely prevent the requirement for maintaining the website.
Yes, you can use your own HTML, CSS or JavaScript to create a theme and start from there. It might take you longer but you can do it.
Wordpress allows you to create a "Child Theme". With this, you are able to have your own stlying (css) or custom JavaScript. The advantage of doing this is when the theme publisher (assuming you are not the original creator of the theme) updates the theme, all your custom styles and JavaScript will remain intact. That is a good way of going around it.
If you want a quick solution, most themes come with a "Customize" section where you are able to paste your own styling. All the best!
A helpful link on creating child themes is https://developer.wordpress.org/themes/advanced-topics/child-themes/

How can I add a table in a theme using Wordpress

I’m building a site as part of my research using Word Press. I’m trying to display samples on the homepage in a neat way, something similar to this one http://www.maitrechoux.com/menu/index.html?categ_id=all .
I have removed all of the home function using remove_action. How can I add the table and then how can I add the pictures inside each cell? Is it only matter of CSS or do I need to add HTML code for this? I recently joined word press community and this is the only thing remained to complete my website. Really appreciate any help!
NO, don't use tables. I think what you actually want is just to display something that looks like table.
You need to code both html and css for that.
You can use any of popular css frameworks to help you out, or you can code it yourself using, flex, floats, or grid...
When you are done then with wp functions you need to render that data in your wp theme.
Your question is to broad and big to be answered via code snippets or examples, sorry.
I recently wanted to change the template of my WordPress website and use React tables.
But this would cause my site to drop in Google rankings, and in terms of SEO, this would not be a good thing.
That's why I decided to use my template pre-built tables and change the files to my liking in the settings section by editing css files.

Can you have 2 app.css files or do you have to combine?

is it possible to have a website that contains 2 app.css files?
I have a website and want to build a new (but related) website under the same domain. So I guess you can consider the main hub more like a landing page of sorts, and then the two related "websites" would then branch off of the main domain. Each of the websites are going to be styled differently though. So I'm unsure of what is best - to create a single combined app.css file and list each style according to each website, or can I create a new one that sits beside the original?
You can do a separate css file for each site, or have them both point to the same file. Since you want different styling between the 2 sites, I'd recommend a different css file for each site.
You can create and use as many css file as you want. If both sites will be style differently, create a file (or even multiple files, them import) for each site.
Though the websites are related, it's better to create two separate css files as it will be easy to make changes(in future) to styles and debug incase of any issues. It also increases readability of the code so that in future if you may have to refer this code for any modifications, you can understand it easily and make required changes :)

Add my own HTML to WordPress website

A client of mine would like me to go into their WordPress website and add a fixed button to the bottom-right. This button should be on every page.
I know HTML, JavaScript, CSS and PHP quite well, but have never used WordPress before and it seems a little frustrating.
I only need to add this button and link it to a URL, but I don't want to download additional plugins. Can I add my own HTML to a theme? I've heard of the ability to make Child Themes to prevent my additional HTML from getting wiped when the parent gets updated. How does this work and how can I use it to achieve the above?
Child themes are the typical way to modify an existing theme, so that you can still update the original theme as its developer releases new versions. It is correct that updating the theme would wipe out your changes, if you don't use a child theme.
I've only made a couple child themes myself, but I found this documentation helpful:
https://codex.wordpress.org/Child_Themes
For modifying template files like the footer, the first section "Creating a Child Theme from an Unmodified Parent Theme" is the minimum to get started. The style.css file contains metadata that tells WordPress about the child theme and its parent, even if you don't add any styles. The functions.php file makes sure both themes' stylesheets are loaded, and can be used for other functions later. The page above has some code you can mostly copy and paste, with some changes for your site's specifics.
Once the child theme exists, you can copy footer.php from the original theme into the child's directory, and modify it as needed. Keep in mind that since you are overriding the original theme's footer.php, if there are later changes in the parent theme's footer.php, you may need to manually update your copy, to combine their changes with your site-specific code.
If you have a separate site or development environment where you can test your child theme first, I'd recommend using that, then copying it to the live site when it's ready.
You would have to do this within your Wordpress Theme / Template files.
You'd have to learn the architecture of Wordpress CMS (mostly) but also your applied theme you'd be customizing and adding this feature. You'll have to know what .php files drive what pages and where you can add this feature.
If you don't want to mess with both any core Wordpress CMS files nor your original applied 'Theme' files; you can consider creating a 'child theme' or 'plugin' to extend the features and functionality; this way.
Please start by understanding Wordpress CMS further. Here's a good article: 'http://www.wpbeginner.com/beginners-guide/beginners-guide-to-wordpress-file-and-directory-structure/' also check http://wordpress.org
Hope this helps, g'luck!
Building a child theme is ultimately the best thing to do, as any future theme edits for the client can be done there. Here's an article on WP child theme creation.
A quicker way should be mentioned, although it can be limiting: Go to Dashboard/Appearance/Widgets, make a new Text widget and place into your footer region. This is assuming, of course, that the theme you're using has a footer region defined (most do). In the widget, use some HTML like this:
<div style="float: right; width: 60px; background-color: red">BUTTON</div>

Locating html code in local joomla server files

I have been tinkering with joomla recently.I was able to change css style using chrome dev tool, which helped me locate the css code that is responsible for the style I inspect. Now I want the same for html codes. The template that I'm using has an offcanvas menu, and when I inspect it, I can see the codes that form the menu, and I want to modify them, as I did with many css codes, however there is no locate or open containing file for html elements. Is there a way to do this? Since I did not write this template, I don't know which is which and where. Many thanks.
You could use Joomla layout overrides to achieve what you describe, check out this link for full details:
https://docs.joomla.org/Understanding_Output_Overrides#Module_Layout_Overrides
The idea is that you move a copy of the module file you want to modify to
/templates/your_template/html/ and Joomla will override the original output with the output from your custom file. You can do the same with components and plugins, it's really powerful.
Another reason that overrides are the way to go is that there's no risk that you'll loose your changes when you update the extension you are customising.
If you Google Joomla overrides you'll find other resources and once you get started you'll find it's surprisingly easy :)
Good luck!
I don't recommend editing css or html in Joomla via the dev tools, because of the problem you're having - sometimes it's hard to know what(and where) exactly you're changing something.
If you have access to the file for the template it should have a pretty straightforward file structure, i.e. all the html is in a html folder, the css in a css folder etc. Learn more here.
I recommend locating those files and editing them with a text editor.
To make a file depends on the framework you add one to Joomla template is not used.
But in all cases you index.php is a file that can address the heads of a css your new address