Full file name in Sublime Text when there are a lot of files - sublimetext2

I have opened a lot of files in Sublime text. Now it is very difficult to read file names. It is showing just few letters of each file name. Attaching screen shot for better understanding.
How can I see full name of each file? I wanted to fit full name of each file on screen. I don't want to hover over the file to see its full name.

You could edit Packages/Theme - Default/Default.sublime-theme and change tab_min_width to a higher value (and save it and restart ST or resize the window to see the change) or use a different theme which has a wider minimum tab width.
However, I'd highly recommend upgrading to ST3 - there is a new setting added in build 3048 called enable_tab_scrolling which will help keep tabs wider, and enable you to see them all.

Related

how do I search within a CSS file for specific class in Visual Studio Code?

I am using a bootstrap template for a webpage. I want to customise certain parts of it, but I am struggling to find the CSS rules that relate to the HTML classes because the .css file is so large!
All I can find when searching the web for a solution is ways to search for files rather than within them. It looks as if there was an extension that may have worked, but it doesn't seem to exist any longer.
any help would be hugely appreciated.
You can search over files in VS Code using CTRL/SHIFT/F, more info here
This is from the website:
VS Code allows you to quickly search over all files in the currently opened folder. Press Ctrl+Shift+F and enter your search term. Search results are grouped into files containing the search term, with an indication of the hits in each file and its location. Expand a file to see a preview of all of the hits within that file. Then single-click on one of the hits to view it in the editor.
The simplest way to "find the CSS rules that relate to the HTML classes" is still to open your template/website in a browser -> right click the page and "Inspect Element" -> Find the HTML you need to inspect -> You'll have all the CSS classes and rules involved into styling it ...in the sub-tab "Styles".
simple just "ctrl+f" and type whatever you want to search inside text box show on top right corner.

Specific Image not appearing in website unless I rename it?

I am learning HTML. I made a website for my photography and have some photos on my home page as the background, using:
background-image: url("images/homepage/IMAGE_NAME.jpg")
However, I noticed there is one specific image, named "DSC_0251.jpg", that does not display unless I rename it. I thought it was the underscore or the capital letter D causing it to not display, but I have other images in the same folder, that are named similarly, such as "DSC_0704small.jpg". They both start with a capital letter and have and underscore, the latter having even more than the former. However, "DSC_0251.jpg" will not display, until I renamed it, even just calling it "1.jpg" worked. I did not change the size of the image, it is 1.4mb, and everything else is exactly the same.
In other words, this line of code works:
background-image: url("images/homepage/DSC_0067.jpg")
but this line does not:
background-image: url("images/homepage/DSC_0251.jpg")
I used Filezilla to upload the files, and I thought maybe it was because I dragged and dropped the image to the server folder directly from the location on my computer, rather than navigating to the location within Filezilla and dragging and dropping it that way, but I tried it with another similarly sized and named photo, but that one worked. I want to keep the name the same so I know what it is, and plus it's a problem that needs a solution anyway, if it comes up again. Thank you!
If it is a Linux system, try checking the permissions of the file! I had a similar issue where my css and images, didn't load after copying to the new machine, for the same reason. As for windows, I don't work with them!
Just a noobie...

Do I need to update CSS to upload new images?

I want to start by saying that I did not build said website. I was given FTP access to the site and can download it's entirety.
What we are interested in is replacing the images as they are rather outdated.
If I replace the images (naming them as the ones that exist as of right now), they update just fine.
But adding more does not. Lets say that files are numbered 1-6. If I replace those with the same name, they change. If I add 7.jpg, for example, it does not show in the gallery.
Do I need to update the CSS code or upload it again?
I can provide the code in turn.
Without further details it's hard to tell what the problem is, but it looks like either someone hard-coded CSS or hardcoded HTML. But I would really need to see the code.
Please try to copy/paste at least the code for file that should render the images.
Your gallery should contain new images' name.
if you upload 7.jpg, this one is not in your gallery I guess.
I think it will not matter if you update the CSS.
A priori, to clear any doubt if the images are in cache, I suggest you refresh the page by typing ctrl + R or open a tab in incognito mode.

JPG image renders as code

My image thumbnail links to the full size image. Now only the image is showing up as some sort of code. I have been using the same HTML editor for years, all the pages are the same. It is only this group of 5 pages that have thumbnails. Take this link for example:
ÿØÿáExifII*ÿìDucky2ÿáyhttp://ns.adobe.com/xap/1.0/ ÿíHPhotoshop 3.08BIMZ%G8BIM%üá‰È·Éx/4b4XwëÿîAdobedÀÿÛ
I also discovered that if I get this code an then go up to the history and click on the name of the photo it pops right up as it should have been. I have no idea how to fix this. I have uploaded the photos several times with two file managers, used other photo software aswell. My editor shows that these pages are fine, but IE shows that the pages have no style and all browsers show the linked image problem.
I know this doesn't make much sense to you professionals, but this is my business website and a customer told me about the problem. After 8 hours of trying to fix this I am hoping you could help.
The problem:
This problem occurs when an IMG changes or got touched (by adobe, in your case) AFTER it was uploaded to the server and the name of the new (or modified) IMG remained the same. The image shown does not get refreshed. The old image is still shown, even though the database holds the right image. I have narrowed it down to the fact that the IMAGE IS CACHED in the web browser. If we hit the RELOAD button in Firefox/Explorer/Safari, everything gets refreshed fine and the correct image just appears.
I verified that on your site running the following:
function is_cached(img_url){
var imgEle = document.createElement("img");
imgEle.src = img_url;
return imgEle.complete || (imgEle.width+imgEle.height) > 0;
}
And then I called this function which returns true or false depending on cached or not:
is_cached("photos/back_to_school_pr5_tn.jpg");
And the result came back as:
<- true
Remember: When uploading an image, its filename is not kept in the database. It is renamed as Image.jpg (to simply things out when using it). When replacing the existing image with a new one, the name doesn't change either. Just the content of the image file changes.
Solution one - No code required:
Since you are not in the coding business (as you claim), all you need to do is to rename the IMG after it's been touched by adobe.
Whenever you modify a photo in adobe or you upload a new IMG you should give it a new name since the older version of the IMG IS STILL IN CACHE.
Solution two - Coding required:
If touching the IMG with adobe is a constant thing that you do after you upload the original picture, then the above solution can be an hassle, so you might want to look into ways to force the web browser to NOT cache images from this page.
NOTE: This solution is only good for the future. In your case, the IMG is already cached.
Besides, this will only work if the actual IMG is inside your HTML, but on your site the link takes you to the actual IMG.
Solution three - Coding required:
An important addition to the above solution is that you can never force a browser to do anything. All you can do is make friendly suggestions. It's up to the browser and the user to actually follow those suggestions. A browser is free to ignore this, or a user could override the defaults.
So the best long-term solution will be to save the filename with the database. This way, if the image is changed, the src of the IMG tag will also change.
For example:
<img src="picture.jpg?1222259157.415" alt="">
where "1222259157.415" is the current time on the server. (Note: I used python's time.time() to generate that)

Automatically save CSS changes made to existing styles in Chrome dev tools?

I've already mapped the necessary files to the local resource - however, while that does allow me to save any changes made to a file in the Sources panel, I was wondering if it's possible to automatically save changes to CSS made in the Elements panel. Otherwise at the moment, any changes made to the style in the Elements panel seem to exist only there.
I remember at some point there used to be a little indicator of the file and line number next to a class/id etc. in the Styles tab of the Elements panel - surely it can't be that hard to simply 'update' any changes to that style rule considering Chrome knows exactly where it's coming from (in the case that it's a stylesheet and not an inline style?). It would be a great relief to my workflow.
The answers to this similar question are obsolete.
When you have finished making your changes in the Elements tab. Next to the style there should be a link with the file name there, something along the lines of site.css:4 or similiar, if you click on that link it will open up the sources tab with that certain page what you have editied containing the modifications. Then you can go to save as, and then save the document from there.
I hope this helps you out :)