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.
Related
I have an html page with a lot of links in it. I moved the content to which the link points to another storage location, so I got a new link. Is there a way to quickly replace links on my website? There are a lot of files involved.
I am not sure if I got it right, but I assume that this is what you are looking for:
When you have installed an code / text editor you can use search and replace to replace the links.
Another way is REGEX when the links are variable...
I use a site at work that has unordered list "ul" with a lot of "li" elements without borders, I would like to always highlight the "li" elements to have better readability.
What I do at this moment is right click the page and open the inspector and add this line:
<style>li:hover {background-color: #ffff99;}</style>
It works but I'm wonder if I can do a plugin for this or if there is another way to do it automatically (I have already send a request to the developer of the site to request this change but while I wait I would like to know what would be the best approach to automate this task)
The list look like this:
File.txt 85215165
File2.txt 96312121
File3.txt 41212123
File4.txt 65623443
File5.txt 69532055
... and so on
(It's not a continuous string, the file name and the number are elements inside the one "li" element and I'm not able to select them at the same time with the mouse)
And it has no style so it's difficult (at least for me) to see which number in the right match the file name in the left.
Note: The list is generated with a script and when I try to see the code of the page (right click see source code) I don't see it, I just see the script, that's why I do it with the inspector
This may solve the issue:
Stylish or Stylebot -- Chrome plugins -- both seem to add your preferred CSS on top of the specific websites you choose.
Paste this in the browser console, slightly faster and easier than editing HTML tags from within the tree in the inspect element tab.
document.head.insertAdjacentHTML("beforeend", `<style>li:hover {background-color: #ffff99;}</style>`)
As a favor for a friend, I'm trying to add a quick Valentine's Ad for an article that is supposed to be appended to the top of their existing site starting... tomorrow. They have an existing site made by somebody they are no longer in contact with back in 2010 built with Drupal.
I don't know Drupal. The only information I have is a HostGator login that I'm currently using to send a backup zip to my email.
HostGator's File menu doesn't even show search results for the text I'm searching for on the main page where I'd put this.
I have no idea what I'm doing, basically. I'm comfortable as a web developer in general and figured "yeah I can add a thing to the top of your pages, sure." I can write that HTML quickly, but everything else... do I need Drupal installed, etc, and will that run with the backup that HostGator is gonna send me?
Any advice? I realize I'm an idiot for signing up for a favor like this last minute.
Ultimately I just need to add some pictures and some text.
Easiest way to achieve this would be creating custom block. Not sure what version of Drupal you use, but let's assume it's D7 (similar for other versions):
Go to Structure -> Blocks -> Add block
Enter your static content into "Block body" field. Change that field format to "full html" so drupal won't filter out some of your tags.
If you don't want Drupal's block title to appear in Block title field enter < none > (without space signs in between! - SO can't show it without spaces).
Save your block
Now go to Structure -> Blocks...your block should be visible in block list. You can find and edit it from there.
Theme site uses has "Regions" (something like sidebars). If want your block to appear with main content find your block and select "Content" region. Or any other you want.
At top of that page should be a link "Demonstrate block regions" - click it to see which region is where..
After selecting region you can click "configure" link for your block to precise in what conditions block should appear on page. Click it.
Scroll down and in right sidebar at bottom of configure page you'll see "Pages", "Content types"... it for selecting on what pages, on what content types...your block should be visible. Default is everywhere, so if you need this - use it.
Save block. If you didn't save on Structure -> Block after selecting region select region again and Save.
You can embed your CSS there, but you can also go to (usually): /sites/all/themes/your_theme/styles/style.css or something like that.
If you can't find CSS turn the caching off for a moment: Configuration -> Development -> Performance and inspect location of loaded CSS file(s) (use browser inspection tool).
Good luck!
I am trying to use a text editor (without using an IDE e.g. eclise/IntelliJ) where I can analyse an HTML file e.g. which tags are unevenly used and also format HTML documents in a way that it picks up each tag and organises so that the document is more human-friendly.
I currently have notepad++ and Sumblime Text 2 on my machine. If there is any specific plugin that helps to do the job, could someone please advise?
** REASONING **
I have a messaging service that uses email templates and one of these has a bug somewhere. It's generating a misaligned (i.e. odd) tag which can be visible if I was to put it in some audit trail (gets picked up in a tabular view). I would like to use a text editor to check the buggy tag.
KR,
In notepad++ you can do that if your open and closing tags are below eachother for example
<div>
something here
</div>
but if you have it inline like this
<div>something here</div>
you cannot do much with it.
Is this what you are asking?
Also if you want the vertical tab lines to be visible click on the "show indent guide" in the top toolbar
There are several online tools that can format the HTML for you. Do a quick Google search for "online html formatter" and try a couple out. Some will provide more options than others. Once formatted properly, it'll be human readable and probably be pretty easy to spot the stray tag.
I am working with a MOSS 2007 site, the page I am currently trying to make additions/changes to specifically is a popup.
The page is an .aspx file and I know where it is located, but simply put I am trying to find and ultimately modify the original source html of this page(the html which shows up when you hit "view source" when brought up in my browser).
When i try to edit the page in sharepoint designer It only brings up a formatted view of the html code, I wish to see a much more complete version where i can edit the attributes of the tags and such.
Is there anyway to locate this original source html?
Try using CTRL + F to do quick find and then search your HTML tag id or any descriptive text you can find from viewing source or expecting the element. And then select Search Entire Solution or Current Project.
If the project is set up with a MVC structure, try finding
MainFolder/ProjectName_Web/Views
Alternately look in
MainFolder/ProjectName_Web/UserControls
If you are using Visual Studio, check out Kris Hollenbeck's solution.