• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

Applying change from Firefox inspector to css

Sonny

New Coder
Sorry if this isn't the place for what is probably a very beginner question, but here goes:

I'm trying to remove a sidebar panel from a (Confluence wiki) page but am struggling to find out how to apply a change I can make from Firefox Inspector to the css.

This is the code I'd like to change (but can't directly, since I don't have full control over the html):

HTML:
<main role="main" id="main" class=" aui-page-panel" style="margin-left: 285px;">

If I edit this aui-page-panel class in Firefox Inspector, I can change the margin-left of "element" (inline) to 0px and see the result I'd like.

But if I copy the rule change from inspector, I get this code:

CSS:
element {
    margin-left: 0px;
}

Which seems very generic, and doesn't impact the sidebar if I paste it in the overrule stylesheet, and neither do some of my other beginner attempts like

CSS:
div#main { 
    margin-left: 0px; 
}
 

Johna

Frontend Web Developer
Staff Team
Guardian
div#main isn't going to work, because the element ith the main id is a main element and not a div element.
Just remove that "div" in the css selector and have #main
CSS:
#main {
  margin-left: 0px;
}
 

Sonny

New Coder
Thank you so much for the code and explanation. That did the trick. I spent an embarrassing amount of time on it, so for completeness' sake I'll add the additional steps I needed to take as well:

To properly override the inline html or some other css from elsewhere I needed to manually add !important:

CSS:
#main {
  margin-left: 0px !important;
}

Surprisingly, the sidebar still didn't disappear after that change. Even though changing the margin using Firefox inspector is enough to remove it (any idea why that would differ?). Anyway, the combination of adding the above code together with hiding another responsible element hides the sidebar:

Code:
.ia-splitter-left {
display: none !important;
}

(Although I didn't actually seem to need !important for this particular snippet.)
 

Antero360

King Coder
Staff Team
Security Analyst
Thank you so much for the code and explanation. That did the trick. I spent an embarrassing amount of time on it, so for completeness' sake I'll add the additional steps I needed to take as well:

To properly override the inline html or some other css from elsewhere I needed to manually add !important:

CSS:
#main {
  margin-left: 0px !important;
}

Surprisingly, the sidebar still didn't disappear after that change. Even though changing the margin using Firefox inspector is enough to remove it (any idea why that would differ?). Anyway, the combination of adding the above code together with hiding another responsible element hides the sidebar:

Code:
.ia-splitter-left {
display: none !important;
}

(Although I didn't actually seem to need !important for this particular snippet.)
One thing to note:
As the name suggests, css is "cascading". This means that the lower your style sheet is on your stylesheet reference (ie the <link> tag list in your <head> tag), the higher the precedence. Not only that, but the closer the style is to the actual element itself, the higher the precedence. This means that if you have a style sheet with a styling rule for #main to have width: 100%; and then in the html body you have a <style> tag with a rule for #main to have a width: 50%;.. the element with id of "main" will have a width of 50%. In-line styling, which is styling you add directly to the element via the style attribute, takes precedence over all. Adding the !important flag will override any styling set on the element.

For reference:
 
Top