Loading Profile...
CSS Editor Changes
I am making changes to the Sidebar in the CSS editor and they are showing up there, however are not showing up on my other pages. I am using V1 and the CSS editor - help!
I’m unsure
1 person has this question
I have this question, too!
Tell me when someone answers.
The more people who ask this question, the more it gets noticed.
The more people who ask this question, the more it gets noticed.
-
Inappropriate?Hi Dr. E.
I'm sorry for the problems. I'll have to ask our expert on this tool.
He may be available tomorrow.
I’m happy to help
-
Inappropriate?Hi,
Can you tell me what code you are using for the SideBar? It's a tricky bugger...In particular, sometimes you just have to follow those declarations with the !important keyword.
#SideBar, .sidebar_v2 {
width:150px !important
}
This sets the width of the SideBar to 150 pixels, forcing it no matter what other CSS declaration thinks it has priority. My selector ("#SideBar, .sidebar_v2") is meant to be compatible to both versions of the SideBar as well.
I’m a CSS freak.
-
Inappropriate?This sounds like a problem I reported ages ago. It was that somewhere in the nested CSS's used by the developers of PBWIKI they had used an "important" tag, which AFAICS stops the property from being modified by later CSS's. My problem was that I couldn't change "Header1" font size and weight. It worked fine in the CSS editor, but ignored in the live WIKI.
After a lot of digging around and using firebug to work out what effective CSS was actually effecting properties I got to the bottom of it. Reported, but still a problem on our V1 wiki.
Not sure it if is the same, but sounds similiar.
I’m thin lipped, but smiling on the inside
-
Inappropriate?Actually jac2, I don't think I've seen !important being used in our built-in CSS very often. It's more likely that a complex order of cascades is going on and the most simple version of a declaration won't work. For example, let's say PBwiki defines h1's like this (I actually don't remember, and it's different for each skin anyway):
#wrapper-root #root div#displaycontent h1 { color:green; }
For you to get the header changed to red, you'd have to be AS specific, or MORE specific. Otherwise, this declaration would get precedence. For example, even the following would fail:
#wrapper-root #root #displaycontent h1 { color:red; }
You would have all the same steps, but since you did not define the element type for #displaycontent, it's not as good.
Furthermore, a problem where the blame is with us a little more is when we link our CSS after the user CSS, allowing our's to have the last say. For example, if we did something like:
<link href="/f/wiki.css" rel="stylesheet" />
<link href="sidebar.css" rel="stylesheet" />
Even if you DID get the declaration with the right priority/specificity, we would still be overriding it. So that's why with any user skinning, if you are having trouble, the best bet to try first is to use the !important keyword yourself, since we use it sparingly if at all and you can then override the built in styles.
Sorry for the longwindedness!
-
Inappropriate?Vu,
As I should have said, I am not an CSS expert, in fact trying to debug the issue on mine was my 3rd foray into CSS.
See https://vs1.pbwiki.com/common_both-v0...
which I am pretty sure is before my CSS. Notice the "important" overriders. I am right in saying the first one it hits sticks aren't I?
Also see thread: http://getsatisfaction.com/pbwiki/top... toward the bottom.
My advice would be to use firefox + firebug and see what css attributes are being enforced and by which CSS. -
Inappropriate?I am remember that bit of CSS now. With !important, if two identical selectors are used, then the last !important gets priority.
http://vupublictest.pbwiki.com/CSSExa...
And you're right, as a skin-designer and web-developer, Firebug has saved my life many times. Too bad IE doesn't have anything as useful.
-
Inappropriate?I had this same problem too. When I looked at the CSS in Firefox Web Developer, I saw that the PBWiki stylesheet had a number of declarations that were not in the stylesheet for the Minimalist skin.
They all start with: #displaycontent div.sidebar_v2. When I added them to my custom css with my settings I was successful in styling my sidebar.
I’m relieved
EMPLOYEE
EMPLOYEE