Our team is currently utilizing Strongloop's LoopBack framework for our REST APIs and we are looking to customize the CSS of the LoopBack Explorer. Unfortunately, it seems unclear which CSS files are being employed (LoopBack vs Swagger) and their exact location. I have been unable to locate any specific documentation regarding this issue.
There are more changes you can make beyond just adjusting the css. If you create your Loopback application using slc loopback as I did, you'll notice that the server/server.js file does not initially appear in a configurable format like it is shown in the accepted answer.
Instead, you can utilize the server/component-config.json file to direct the loopback component explorer to use a different directory for static files for the swagger-ui. By setting the uiDirs configuration as shown below, I directed it to search for static files in the server/explorer directory.
{
"loopback-component-explorer": {
"mountPath": "/explorer",
"uiDirs": "server/explorer",
"apiInfo": {
"title": "My API",
"description": "Description of my API"
}
}
}
* If using IISNode, set uiDirs to "explorer"; otherwise, it should be "server/explorer" as per @phegde 's comment
I created an index.html in my server directory by copying from
node_modules/loopback-component-explorer/public/index.htmlhttps://i.stack.imgur.com/IENrd.png
Lastly, to apply custom css, duplicate the
node_modules/loopback-component-explorer/public/css/loopbackStyles.cssserver/explorer/css/loopbackStyles.cssIf you want to customize Swagger UI files, you can do so by using the options.uiDirs parameter.
To begin, open your server/server.js file and include the following configuration option:
app.use(explorer(app, { uiDirs: path.resolve(__dirname, 'explorer') }));
Next, copy the contents of
node_modules/loopback-explorer/public/cssserver/explorer/cssFeel free to make any necessary modifications to the copied CSS files.
Remember to specify the specific version of loopback-explorer in your package.json file to prevent any unexpected changes that might affect your customizations when a newer version is released.
In case you forgot to lock the loopback-explorer in package.json or if you began running your application from the latest release of loopback(v2.x), you'll need to make an additional adjustment:
If you used the generator tool to create your loopback app, modify server/component-config.json as follows:
{ "loopback-component-explorer": null }
2.Transfer the folder
node_modules/loopback-explorer/public/server/explorer/ per Miroslav's recommendation. If you choose to copy the entire directory, you can also update the index.html file.
server/server.js file and include this line: app.use('/explorer',explorer.routes(app, { uiDirs: path.resolve(__dirname, 'explorer') }));var explorer = require('loopback-component-explorer');4.Personalize the user interface of your explorer, with all the required files located in server/explorer
When using the loopback-component-explorer, it is important to ensure that the uiDirs specified in the component-config.json are configured correctly. I encountered a similar issue and resolved it by adding the following line:
"uiDirs": ["server/explorer"]
instead of
"uiDirs": "server/api-explorer",
I have successfully applied custom CSS styles to the Loopback API Explorer header.
Here are the steps I took:
- Navigate to node_modules > loopback-component-explorer > public > css folder
- Copy the file named loopbackStyles.css
- Create a new folder called explorer under the server directory
- Create a css folder within the explorer folder and paste the loopbackStyles.css file inside
- Add the configuration below to the component-config.json file
{
"loopback-component-explorer": {
"mountPath": "/explorer",
"generateOperationScopedModels": true,
"uiDirs": "server/explorer"
}
}
To modify the color of the Loopback header, I simply changed the background-color property in the body #header CSS selector in the loopbackStyles.css file.
To replace the default logo name in the header with a custom name, I added the following CSS styles to loopbackStyles.css:
.swagger-ui-wrap #logo{
display: none;
}
.swagger-ui-wrap:after {
content: "MyOwn API Explorer";
color: #fff;
font-weight: bold;
}
I've been struggling with this issue for quite some time now and I just can't seem to make it work. The JavaScript I'm working on involves using addClass and removeClass to display and hide a submenu element. While the addclass and removeCla ...
I'm in the process of creating a flexible website design. Everything seems to be going well so far. Here's what I have: <div class="container"> <div class="products-block"> <h2>Products</h2> <p> ...
Exploring a CSS Show/Hide functionality using radio buttons is my current challenge. The snippet below demonstrates how smoothly it works. .refusal, .acceptance { display: none; } input#refusal:checked~.refusal { display: block; } input#acceptanc ...
I struggle with CSS and have a basic understanding to make adjustments to my website. The issue I am encountering involves the .entry-content ul li elements. On desktop, they display correctly without random word breaks, but on mobile, words are being cut ...
I am perplexed as to why the navigation items keep appearing every time I refresh the page in mobile view. Despite checking that aria-expanded is set to false, it still does not seem to work. Below is the code snippet: <html lang="en"> & ...
I have a list of products. When I click on a product, it should be added to the database. If I click on the same product again, it should be removed from the database. I am toggling the wishlistFlag using ng-click. This works correctly for one div element, ...
I am trying to modify my image within a bootstrap container to extend it to the side while keeping the rest of the layout unchanged. Here is what I currently have: https://i.sstatic.net/Mcukl.jpg. There is a gap on the right side of the image that I want t ...
After building my News Website using Next.js with Server Side Rendering, I encountered an issue with setting the page title. Despite using export const metadata = { title: "TEST" }, the title remained unchanged. The metadata object appears to be ...
Issue Resolved (After noticing that Divi was adding padding twice to <ul>'s in their footer and Text Module, I created a new class to remove the padding-bottom from the sub-list item.) In a Divi text module, I created an unordered list with a s ...
Issue with SCSS styling on image link I attempted to modify the cursor style from pointer to default, but after saving and reloading my React app, the change did not take effect. I tried writing some code, but it seems that Stack Overflow is indicating an ...
After deploying my application, I noticed that the loading time has significantly increased. Is there a way to compress CSS and JS files? I include only the necessary code in each page and occasionally use minified versions of JS. Thank you. ...
Just a quick question - I currently don't have access to a printer. My client is wondering if the hidden elements of the webpage (items that are only visible when clicked on) will be included when printing or if they will remain hidden? ...
I'm looking to develop a scrolling grid with card tiles similar to Google Plus that has three columns. I am currently using Material UI, but I can't seem to find the right functionality for this. I have experimented with the standard Material UI ...
I've encountered an issue with a Watu quiz I created where the labels are not aligning with the radio buttons. Any suggestions on how to style this and fix the alignment? You can view the page here. Here is a screenshot for reference: https://i.sst ...
The text sent from JavaScript to the modal does not make the text_description element in the modal body responsive Modal Image HTML Code Snippet <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/ ...
I managed to create a nav bar in the center (check out the link below), but for some reason there is a slight 2-3 pixel gap between each navigation element. Even though I have set both Margin and Padding to 0, the issue persists and I am unable to solve it ...
Looking for some assistance with a web development issue I'm facing. Here's the scenario: I have two sections on my webpage - TOP and BOTTOM. In the bottom section, there are 3 list records each with a checkbox and button. What I need help with ...
Perhaps a repeated inquiry, yet I have been unable to discover a solution for this issue... I am dealing with a div element (referred to as master) that I do not have the ability to adjust in terms of width or height. Contained within the master is anoth ...
Working with asp.net mvc, I am encountering an issue where the label text is displaying on two lines instead of one. The expected behavior is for it to appear on a single line. I need the label text to display without wrapping to a new line. For example, ...
I am in the process of creating a functionality where clicking on one element will fill another element's content from bottom to top. Although I have managed to make it work on hover, the same functionality is not triggered when clicking on the eleme ...