Editing MediaWiki Menus hosted on AWS - css

i`m having a problem on the developing of my Wiki for my job, which is was created using MediaWiki.
The wiki is been hosted on AWS, and i`m using the virtual servers EC2.
I dont know if i`m using the right terms because i know nothing about programming but this job was given to me and i really have to make it work.
My problem is when i try to change the Menus (Navigation, Tools, etc..). I could change its color on the .css documents but trying to rewrite the name its been a huge problem.
Image of what is happening here!
The thing is that ">>" after the "Navigation" and "Tools" does not desapear, i have already accessed the mediawiki:sidebar but nothing changes. Also, there is no .css file that contains this code of the photo and there is no document on my wiki directory with this code.
I discovered that if i make any change on this code of the photo it will solve my problem but i dont know how to find this document or even if it`s possible.
If i click "Source" on Crome developers tool, i can see the directory of my wiki and inside of it the directories "Skin/gumaxdd" and "Index.PHP", the second one contains the "Main_page" that has this code on, and the first have all the .css and scripts files of my wiki.
I try to use the FileZilla to find this directory on my wiki but i did not found, so i would like to ask if there is how to edit these codes and how do i do it?
Sorry if it is a simple question, but is taking me so much time, i don`t even know what to ask about it in order to solve my problem.
Thanks people. :)

I have found the solution, i cannot access this but i can access the "gumaxdd.php", there is the code i have to change.
But first, if i now nothing about coding, i just make that things i want on google inspect and copy the line that comprehends the category that changes are located.
then i go to mediawiki:commons.css and paste it there.
When i do it, the mediawiki already put that code on the format i must put on the gumaxdd.php file, then i have to copy this code.
After that you'll need only open the file, search for that category that comprehends my changes and paste the code.
And it is done, everything is done without too much understand of coding !

Related

Logos missing after Wordpress migration

For some reason I cant find a place to edit the header logo. The logo will appear in chrome browser. In most browsers, it will just be a blank square and say logo.
This all happened after a migration to a different server/database.
There is some info about plugins needing an authentication key. However, Im unsure if this is the problem as it requires purchase. Any ideas? Thank you!
It's a bit unclear on why this would happen as there are a number of reasons.
Here are a few main things to check:
Did the wp-content/uploads/ folder get copied across fully?
If point-1 is correct, can you access the logo file via URL?
Are you using a theme builder to add in the logo? If so, you might need to export and import a theme builder file.
No need to purchase anything. Since you mentioned that this happened after migration. This could be a source issue, the url of the image could be broken or still leading to the old website url. You can check this by going to the DevTools on chrome by tapping F12. Then, click colsole to check if there's an error and let us know about it.

Google Maps Custom Icons will not load in any Browser

I used a tutorial to make some custom icons in Google Maps API for some local places. When I am in Dreamweaver and testing on my local server, the icons appear just fine. However, when I upload to my host and try to pull the page up on any browser (safari, chrome, canary, firefox), the images do not load. The placeholders for those images do show, though. I cannot understand what the issue is as I have reloaded and rechecked the code hundreds of times. Any help with this would be appreciated. As the code is very long, I have only included some snippets and the address where it is loaded.
To see the page, go to http://www.theriveroverlook.com/Local.html
I tried to load the code using the forum rules, but no matter what, it would not allow me to put the javascript in this post!
Please let me know if you can help me! This is the last piece of the puzzle I need to load this website! I am a newbie coder so I have made a lot of beginner mistakes!
Edited to add:
Thank you for your help. When I renamed the folder, it was fixed. For some reason, it did not like the folder name "icons". Perhaps this has something to do with Google's API
I get the following errors when I load your page:
Since those are the images you are using to create your custom icons they all fail to generate and won't appear on the map. Make sure you are hosting your images correctly and it should work fine.

Brackets editor code suggestion

I'm using the Brackets editor, and I ran into this extension.
If you look at the picture on this extension's page you can see the small light bulbs next to some lines. I really want this feature, so I've installed the extension, but I can't see those light bulbs.
Is it a part of this extension or is it another extension in this picture?
If so, which one is it?
Those icons come from the Brackets Interactive Linter extension, created by the same author. However, they don't give you "auto correct" options like the lightbulbs in some other editors. As far as I can tell, the icon just shows you more details about the linting error.
If "auto correct" is what you're looking for, you might still be able to interest someone in working on that functionality. (The Brackets community is pretty responsive!). I suggest:
File an issue in the extension's repo asking for the enhancement; or
Start a thread on the brackets-dev forum making this suggestion, in case any other extension developers would be interested in working on it.
If you are using AEM Brackets Extension and are unable to install the extension via url then either try to drag and drop the .zip into the DragDrop area or add your unzipped extension folder into \www\extensions\default directory and run the brackets tool via cmd line rather than double clicking on it.
It worked for me!!

WordPress - Changed directory and images do not appear

I changed the folder that my WordPress installation was in.
However, this worked fine, except now all my images are not showing up.
The problem is that each post has the full url of the image in it. (not my doing, this seems to be the default setting)
Is there a tool or a quick fix available for this?
There is a Update URLs plugin for Wordpress to help you with that. Hope that helps!
You need to update your settings to reflect the directory change on the settings page in your admin section.
Edit:
Since it seems to be a problem in the posts themselves, you'll probably have to write a quick fixme script that runs through your post table searches for '="/' or something similar and updates any hardcoded links.

Why can't I save CSS changes in Firebug? [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
Firebug is the most convenient tool I've found for editing CSS - so why isn't there a simple "save" option for CSS?
I am always finding myself making tweaks in Firebug, then going back to my original .css file and replicating the tweaks.
Has anyone come up with a better solution?
EDIT: I'm aware the code is stored on a server (in most cases not my own), but I use it when building my own websites.
Firebug's just using the .css file Firefox downloaded from the server, it knows precisely what lines in which files it's editing. I can't see why there's not an "export" or "save" option, which allows you to store the new .css file. (Which I could then replace the remote one with).
I have tried looking in temporary locations, and choosing File > Save... and experimenting with the output options on Firefox, but I still haven't found a way.
EDIT 2:
The official discussion group has a lot of questions, but no answers.
Been wondering the same for quite some time now,
just gut-wrenching when your in-the-moment-freestyle-css'ing with firebug gets blown to bits by
an accidental reload or whatnot....
For my intents and purposes, I've finally found the tool.... : FireDiff.
It gives you a new tab, probably some weird David Bowie reference, called "changes";
which not only allows you to see/save what firebug, i. e. you, have been doing,
but also optionally track changes made by the page itself....if it and/or you are so inclined.
So thankful not having to re-type, or re-imagine and then re-re-type, every css rule I make...
Here is a link to the developer (don't be disparaged by first appearance, mayhap just as well head straight over to the Mozilla Add-On repository .
I got here looking exactly for this feature, that is, being able to save edited CSS properties back to the original file (on my local development machine). Unfortunately after searching a lot and not finding anything that suits my needs (OK, there's CSS Updater but you have to register and it's a paid extension...) I gave up on Firefox + Firebug and looked for something similar for Google Chrome. Guess what... I just found this great post that shows a nice way of getting this to work ( built into Chrome - there's no need for additional extensions ):
Change CSS and SAVE on local file system using Chrome Developer Tools
I tried it now and it works great highlighting the changed lines. Just click Save and you're done! :)
Here's a video explaining this and much more: Google I/O 2011: Chrome Dev Tools Reloaded
I hope it helps if it doesn't matter to you changing browser while editing your CSS files. I made the change already for now, but I would really love to have this functionality built into Firebug. :)
[Update 1]
Today I just saw this video: Firefox CSS live edit in Sublimetext (work in progress) Looks promising indeed.
[Update 2]
If you happen to be using Visual Studio 2013 with Web Essentials you'll be able to sync CSS automagically as shown in this video:
Web Essentials: Browser tools integration
The Web Developer add-on let's you save your edits. I'd like to combine the editing of Firebug with the Save feature of Web Developer.
(source: mozilla.org)
Use the "Save" button (click CSS menu -> Edit CSS) to save the modified CSS to disk.
Recomendation: Use the "Stick" button to prevent losing your changes when you change the tab for doing other browsing. If it is possible, use only one tab to do the edit and other firefox window the related searches, webmail, etc.
I just released a firebug addon at the mozilla addon sandbox which might quite do what you want:
https://addons.mozilla.org/en/firefox/addon/52365/
It actually saves the "touched" css files on demand to your web server (by communication with a one-file webservice php script).
Documentation can be found at my homepage or on the addon page
I would appreciate any testing, bug reports, comments, ratings, discussion on this, as it's still in early beta, but should already work fine.
CSS-X-Fire
I'm surprised that it still not listed to this question, but probably because is new and the author didn't have time to promote it yet.
It is called CSS-X-Fire and it is a plugin for JetBrains series of IDEs : IntelliJ IDEA, PHPWebStorm, PyCharm, WebStorm, RubyMine.
How it works:
You install one of these IDEs and configure the deployment (supports FTP and SCP). This will allow you to stay in sync with the server.
After this you install this plugin. When it starts it will ask tell you that he will install a plugin for Firefox, in order to do the integration between Firebug and the IDE. If it fails to install the plugin, just use the drag-n-drop technique to install it.
Once installed it will track all your changes from Firebug and you will be able to apply them with a simple click inside de IDE.
FireFile
FireFile is an alternative that requires you to add one small php file to the server side in order to be able to upload the modified css.
You could link firebug to eclipse with fireclipse and then save the file from eclipse
I think the closest you're going to get is by going into Edit mode in Firebug and copying and pasting the contents of the CSS file.
We just introduced Backfire, an open source javascript engine that allows you to save CSS changes made in Firebug and Webkit inspector to the server. The library includes an example C# implementation of how to save the incoming changes to your CSS.
Here's a blog post about how it works:
http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/
And here's the code hosted at Google Code:
http://code.google.com/p/backfire/
I know this doesn't answer your question, but surprisingly, Internet Explorer 8's Firebug clone "developer toolbar" (accessible via F12) offers the option to "save html". This function saves the current DOM to a local file, which means that if you edit the DOM somehow, e.g. by adding a style attribute somewhere, this will be saved too.
Not particularly useful if you're using Firebug to mess around with CSS like everyone does, but a step in the right direction.
I propose a solution that involves a combination of Firebug and FireFTP as well as code that directly accesses the local file system when running a website locally.
Here are the scenarios:
Working on a website that is hosted on a remote machine
In this case you would provide the FTP details and the location of the CSS/HTML/Javascript and Firebug would then update these files when you save your changes. It may even be able to locate the files itself and then prompt you to verify that it has the correct file. If file names are unique it shouldn't be a problem.
Working on a website running on your local machine
In this case you could provide Firebug with the local folder location of the website and the same behaviour would be used to match and verify the files. The access to the local file system could be performed through FireFTP if necessary.
Working on a website hosted remotely without FTP access
In this case something like the FireFile add-on would have to be implemented.
An additional feature would be the ability to save and open project files that store the mappings between the local files and the URLs they are associated with as well as saving the FTP details as FireFTP already does.
I am the author of CSS-X-Fire which Sorin Sbarnea also kindly posted about in this thread. Guess I'm a bit late ;)
CSS-X-Fire emits CSS property changes from Firebug to the IDE where the changes can be applied or discarded.
There are a couple of advantages with this solution over most of the other existing tools which only know know about the filenames and the content downloaded by the browser (see NickFitz comment in the original post).
Scenario 1: You have a website (project) which has a handful of themes from which the user can select from. Each theme has its own CSS file but only one is known to Firebug, the current one. CSS-X-Fire will detect all matching selectors in the project and let you decide which should be modified.
Scenario 2: The web project has stylesheets created compile-time or during deployment. They might be merged from several files and the file names may change. CSS-X-Fire doesn't care of the names of the files, it only deals with CSS selector names and their properties.
Above are examples of scenarios where CSS-X-Fire excels. Since it works with the source files, and knows about the language structure, it also helps to find duplicates not known to Firebug, jump-to-code, etcetera.
CSS-X-Fire is open source under the Apache 2 license.
Project home: http://code.google.com/p/css-x-fire/
FireFile
Firebug was created to detect a problem not to be a debugger. but you can save change if you add new tool that integrate firebug with save changes. it is FireFile, click here
http://thelistoflist.blogspot.com/2010/04/how-to-save-change-you-make-in-firebug.html.
FireFile provide the desired functionality by adding a small PHP file to the server side.
Since Firebug is not working on your server but taking the CSS from the site and storing it locally and showing you the site with those local changes.
Use the CSS editor in the Firefox Web Developer toolbar:
http://chrispederick.com/work/web-developer/
It's got enough good stuff to use in conjunction with Firebug, and it lets you save your CSS out to a text file.
Use Backfire.
http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/
It's an open source solution that sends CSS changes back to the server and saves them.
Backfire uses a single javascript file, and the sourcecode package has a working .NET server implementation example that is easily portable to other platforms.
I had this problem forever as well, and finally decided that we shouldn't be editing things in the web inspector and built something for it (https://github.com/viatropos/design.io).
A better solution:
The browser automatically reflects CSS changes without reloading when you press save in your text editor.
The main reason we're editing css in the web inspector (I use webkit, but FireBug is along the same lines) is because we need to make small adjustments, and it takes too long to reload the page.
There are 2 main problems with this approach. First, you're allowed to edit an individual element that may not have an id selector. So even if you were able to copy/paste the generated CSS from the web inspector, it would have to generate an id to scope the css. Something like:
#element-127 {
background: red;
}
That would start making your css a mess.
You could get around that by only changing styles for an existing selector (the .space class selector in the webkit inspector image below).
Still though, the second problem. The interface to that thing is pretty rough, it's hard to make big changes - like if you want to try real quick copying this block of css to this place, or whatever.
I'd rather just stick to TextMate.
The ideal would be to just write the CSS in your text editor and have the browser reflect the changes without reloading the page. This way you'd be writing your final css as you're making the little changes.
The next level would be to write in a dynamic CSS language, like Stylus, Less, SCSS, etc, and have that update the browser with the generated CSS. This way you could start creating mixins like box-shadow(), that abstracted away the complexities, which the web inspector definitely couldn't do.
There's a few things out there that kind of do this, but nothing really streamlining it in my opinion.
LiveReload: pushes css to browser without refreshing when you press save, but it's a mac app, so it'd be difficult to customize.
CodeKit: also a mac app, but it refreshes the browser every time you save.
Not having the ability to easily customize the way these work is the main reason I didn't use them.
I put together https://github.com/viatropos/design.io specifically to solve this problem, and make it so:
The browser reflects the css/js/html/etc anytime you save, without reloading the page
It can handle any template/language/framework (Stylus, Less, CoffeeScript, Jade, Haml, etc.)
It's written in JavaScript, and you can whip together extensions real quick in JavaScript.
This way, when you need to make those little changes to CSS, you can say, set background color, press save, see nope, not quite, adjust the hue by 10, save, nope, adjust by 5, save, looks good.
The way it works is by watching whenever you save a file (at the os level), processing the file (this is where the extensions work), and pushing the data to the browser through websockets, which are then handled (the client side of the extension).
Not to plug or anything, but I struggled with this issue for a long ass time.
Hope that helps.
Firebug works on the computed CSS (the one which you get by taking the CSS in the files and applying inheritance, etc. plus the changes made with JavaScript). This means that probably you couldn't use it directly to include in an HTML file, which is browser/version specific (unless you care only about Firefox). On the other hand, it keeps track of what is original and what is computed... I think it should not be very difficult to add some JS to Firebug to be able to export that CSS to a text file.
I was wondering why can't I bloody well select and copy the text in front of my eyes. Especially when others say you can just "select and copy". Turns out you can, you just have to start the drag outside of any text (i.e. in the gutter above or to the left of the text) as any mousedown -- whether it's a click or drag -- on any text immediately invokes the property editor. You can also click outside text to get a cursor (even if it's not always visible) which you can then move around with the arrow keys and select text that way.
The text copied to the clipboard is devoid of any indenting, unfortunately, but at least it saves you from manually transcribing the entire contents of the CSS file. Just have your diff programme ignore changes in whitespace when comparing against the original.
You could write your own server script file that takes a filename parameter and a content parameter.
The server script would find the requested file and replace its contents with the new one.
Writing the Javascript that taps into firebug's info and retrieves the useful data would be the tricky part.
I'd personally rather ask the dev team at firebug to supply a function, it shouldn't be too hard for them.
Finally, Ajax sends the filename/content pair to the php file you created.
Quoted from the Firebug FAQ:
Editing Pages
Can I save to the source the changes I made to the webpage I'm seeing?
Right now you can't. As John J. Barton wrote on the newsgroup:
Editing in Firebug is kinda like taking out the pickles from and adding mustard to a restaurant sandwich: you can enjoy the result, but the next customer at the restaurant will still get pickles and no mustard.
This is a long-requested functionality, so someday it'll be available directly from Firebug. Meanwhile, you can try Firediff, an extension for firebug by Kevin Decker.
How can I output all changes that have been made to a site's CSS within firebug?
That's a feature implemented in Kevin Decker's Firediff.
Here's a partial solution. After you make your changes, click on one of the links to the relevant file. This is the original file, so you'll have to refresh the file, which is under the options menu button in the upper right of the firebug pane. Now you have the modified css page, which you can copy & paste. Obviously, you'll have to do it for each css file.
Edit: looks like Mark Biek has a quicker version
A very easy way to "edit" your page is to go onto the site via your internet browser. Save the page as html only onto your desktop. Go to your desktop and right click on the new web page file and select open with, choose notepad and edit the page from there, if you know html it will be easy. After all your editing is done, save the file and reopen your webpage, the changes should be there if done correctly. You can then use your new edited page and export or copy it to your remote location
Actually Firebug is a debug and analyze-Tool: not an editor and obviously not considered to be one. The other reason was already mentioned: how to you want to change CSS, stored on a server when debugging a webpage?

Resources