Personalize the SB Admin 2 Theme to your liking

Looking for some assistance as I work on integrating a template into my Django project, even though I'm not a frontend developer. Specifically, I am trying to customize the CSS of the SB Admin 2 Theme using sass, but I am struggling to find the correct elements to modify. The CSS file on Github is quite disorganized (Github) and after running it through the sass compiler, I still can't seem to get it right. Any help would be greatly appreciated.

My main goal is to keep the sidebar fixed in a collapsed state that cannot be toggled.

https://i.sstatic.net/m2PMu.png https://i.sstatic.net/tkym0.png

cssbootstrap-4sass

Answer №1

Concerning the initial problem

To keep the sidebar fixed in a collapsed state and prevent it from being toggled.

You can use the following code snippet:

body{
margin-left: 6.5rem;
}
.sidebar,.sidebar.toggled {
width: 6.5rem;
overflow: visible;
position: fixed;
left: 0;
height: 100vh;
max-height: 100vh;
z-index: 9999;
overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
display: hidden!important;
visibility: hidden!important;
-ms-overflow-style: none!important; /* IE and Edge */
scrollbar-width: none!important; /* Firefox */
}
#sidebarToggleTop {
display: none!important;
visibility: hidden!important;
pointer-events: none!important;
}

Add this to the end of your style.css file. Let me know if it resolves your issue.

Regarding the second concern

The request is to make the area graph box flexible in width so that it can be replaced with a table tag.

I may need more information to fully grasp your requirements. Can you provide additional details?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to incorporate button classes from the <a> tag into a JQuery fade in/fade out function?

My jQuery image thumb Slider features thumb buttons that link to different div elements. When a user clicks on a thumb button, I want the associated div to smoothly fade in, replacing the previous one. The goal is to have a seamless transition between the ...

javascriptjqueryhtmlcss

Difficulty with setting a border for text spanning multiple lines

I am trying to style a header text with a border around it. The issue arises when the larger text spans over two lines, causing the border to break in between. In an attempt to fix this, I applied the CSS property box-decoration-break: clone;. However, thi ...

htmlcsstext

Utilizing Polymer attributes in internal Shadow Root styles

When it comes to setting styles dynamically, it's pretty straightforward. However, my question revolves around implementing dynamic styles within a Media Query. Specifically, I want the styling to change based on a property or some calculated JavaScri ...

csspolymer-2.xshadow-dom

Functions perfectly on Chrome, however, encountering issues on Internet Explorer

Why does the Navigation Bar work in Chrome but not in Internet Explorer? Any insights on this issue? The code functions properly in both Internet Explorer and Chrome when tested locally, but fails to load when inserted into my online website editor. Here ...

javascriptjqueryhtmlcssgoogle-chrome

Expand the list in both vertical and horizontal directions

I have a unique way I want this list to function: When clicked, it should reveal a vertical list. If an item in the vertical list is clicked, it should display horizontally with more information about that item. All items should be hidden until either Te ...

jqueryhtmlcsslistfold

What are the solutions for addressing popping behavior during hover effects?

Hello everyone, I am experiencing an issue with the image hover effect on my website. How can I make it enlarge smoothly instead of just fading in and out? To better demonstrate, I have provided a helpful example https://i.stack.imgur.com/TcZKy.jpg Any as ...

htmlcsshovercss-transitionscross-fade

Create a clickable element that triggers an action for a brief period of time before stopping automatically, using JavaScript, HTML, and CSS

Looking for a way to implement buttons or toggles that activate a feature for 3-5 seconds after the user selects them, without requiring further interaction. Any suggestions on how to achieve this using CSS, HTML, and JS? I currently have toggles in place ...

javascripthtmlcssbuttontoggle

Is there a way to display the icon in Javascript?

I added a glyphicon element to my page but set its visibility to hidden using CSS. My goal is to reveal the glyphicon (#gl1) when users input text and click the "post" button, but I'm encountering an issue where the glyphicon doesn't show up when ...

javascripthtmlcsstwitter-bootstrap-3

The Bootstrap row fails to align elements side by side as intended

I'm trying to arrange elements in my navigation menu side by side, so I decided to use the row class from Bootstrap 5.0. However, they are still stacking on top of each other. I am currently working on a Flask project and using Jinja to some extent. ...

htmlcssbootstrap-5

The orientation of the rating stars has transformed into a vertical layout

I'm having trouble creating a rating interface that prompts the user to rate the website (by clicking the stars) and leave a comment. The stars are displaying vertically instead of horizontally, as shown in the image provided in the link. I've tr ...

javascripthtmlcssrating

Modifying a css class via javascript

Is it possible to set an element's height using CSS to match the window inner height without directly modifying its style with JavaScript? Can this be achieved by changing a CSS class with JavaScript? One attempted solution involved: document.getEle ...

javascriptcsssass

How to center scroll overflowed div vertically on element using Angular (5)

I have created a unique table layout using divs and the flex property with Angular. Here is an example of how it looks: <div class="tbody"> <div class="tr" *ngFor="let ask of asks"> <div class="td centered red">{{ask.price | ...

javascripthtmlcssangular

Is it possible for Golang to operate solely with HTML, CSS, and JS without the use of a Front-End

Is it possible to develop an API using Golang and then display the content using only HTML, CSS, and JavaScript on a web browser? ...

javascripthtmlcssgofrontend

Troubleshoot: Issue with activating buttons in Bootstrap 4 tabs

I am facing a minor issue with my bootstrap 4 tabs: My goal is to switch between buttons similar to this example: https://codepen.io/anon/pen/vwQamK but using bootstrap. <div id="tab" class="btn-group btn-group-justified" data-toggle="buttons"> ...

buttonbootstrap-4tabs

Consistent form elements on both Mac and PC browsers

Seeking the most effective method to ensure consistent form elements appearance on all browsers, whether on PC or Mac. It seems like a basic question that I should have already known the answer to, but oddly enough, I'm struggling to figure it out. I ...

jqueryhtmlcssforms

What techniques can be used to prevent a person from zooming using css or html?

I'm attempting to disable the ability to zoom (in or out) on my website. I've tried adding this meta tag: <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> However, it hasn't worked so far... An ...

htmlcss

What is the process for adding a multi-carousel item slider in Laravel?

How can I implement a multi-carousel item slider in Laravel? I attempted to modify my code based on the solution for creating a dynamic carousel in PHP Laravel that only displays four images, but unfortunately, it didn't yield the desired results. ...

bootstrap-4carousellaravel-5.8

Exploring the interaction between Bootstrap and AngularJS in creating unique menu functionality

UPDATE: added JSFiddle link I am currently working on creating a dynamic menu or set of options that will be populated based on server requests. The data structure I am dealing with is as follows (some unnecessary data has been omitted): { "name" : ...

htmlcssangularjstwitter-bootstrapmenu

How can a div be positioned outside of an overflow scroll without resorting to absolute positioning?

I am currently designing a blog theme and I would like to include a small box that displays the post date offset to the left of each post, similar to this mockup: My issue arises because the post container has overflow scrolling enabled, making it difficu ...

htmlcssoverflow

Using jQuery to select the third element from every group of six

I am attempting to select the 3rd .foo element out of every set of 6. To clarify, here is a brief example: 1 2 3 (this) 4 5 6 1 2 3 (this) 4 5 6 and so on... So far, I have only managed to target every 3rd element, which is not exactly what I need beca ...

javascriptjqueryhtmlcss