Hey guys... so my brain hurts over trying to figure this one out, and it maybe I've been out of the development game too long... so I thought I would check with you guys. I am trying to skin a joomla plugin and know it is possible to use a bootstrap CSS with, but the information I am getting from the forums on their site I cannot seem to make work.
Here is the thread I am working from: https://www.chronoengine.com/forums/posts/t95307/p343526.html
I am trying to figure out how to do what the ScratchUA post's says "I missed parent .gbc3 class in my CSS", which I assume somewho causes my CSS to override all the .gbc3 CSS elements such as:
.gbc3 html {
blah
blah
}
But I don't want to insert .gbc3 in front of every single element in the CSS I downloaded from http://bootswatch.com/ (like the OP says, that's over 6000+ lines), I thought there should be a way to say my bootstrap.css is an override for any .gbc3 element in some form, just not sure how... hence this post.
My googlings are what have my head hurting cause I can't seem to ask the right question :(. Any help would be appreciated.
What browser are you using and/or what CSS debugger are you using?
Browser: Any and CSS Debugger: none. Right now my CSS is NOT being picked up supposedly because of that missing setting.
Ok, well first of all use the developer console (if you're using IE press F12)
There is a CSS explorer which shows you what's overriding what
Also Max has your answer from what I can tell, you'll have to add your theme override to the elements that you want to override in CSS
.gbs3 textarea{
/* some rules here */
}
This code means that ANY textarea element will get your .dbs3 style override applied to it
Yeah, but is there a way to say every element in this CSS file is an override for the .gbs3? I have over 800 Elements in my CSS copied from bootstrap. Thats a lot of CTRL+Vs in front of every element.
Oh, use asterisk:
* {
/* your shizz here */
}
I guess I should say use caution doing this, not all elements interpret CSS the same way
Also from what you had above you're still going to have to apply that class to the elements you want it on since you're defining a class selector
.gbc3 * {
/* your shizz here */
}
<thing class='gbc3'>stuff</thing>
Hmmm almost there I think. So let me explain a little bit more.
I think there is this master CSS defined earlier in the Plugin that has the following:
.gbc3 body {
Blah
}
.gbc3 textarea {
Blah
}
.gbc3 H1 {
Blah
}
SO on and so on...
Then I have my own CSS in my own skin that has to override all those and my css currently has:
body {
Blah
}
textarea {
Blah
}
H1 {
Blah
}
And so on and so on...
Now how do I use * in my CSS to override those... I am lost a bit there.
CSS can be combined and in general the last definition wins:
p {
text-align: center;
color: red;
}
p {
text-align: left;
color: blue;
}
One overrides the other, guess which :)
You can also combine styles the same way:
p {
text-align: center;
}
p {
color: red;
}
The result would be red, centred text even if these definitions were in different stylesheets, since they don't clash they combine
Since we're on the subject you might be interested in how CSS specificity works:
http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
If you just want to play around with CSS check this out:
http://www.cssdesk.com/
Here's my above example, see what happens to the paragraph block if you remove the CSS for blue
http://www.cssdesk.com/9eG4R
Quote from: Mr. Analog on March 06, 2015, 03:54:31 PM
CSS can be combined and in general the last definition wins:
p {
text-align: center;
color: red;
}
p {
text-align: left;
color: blue;
}
One overrides the other, guess which :)
You can also combine styles the same way:
p {
text-align: center;
}
p {
color: red;
}
The result would be red, centred text even if these definitions were in different stylesheets, since they don't clash they combine
This I understand. What I want to do is in my
body {
Blah
}
textarea {
Blah
}
H1 {
Blah
}I want it to think there is a .gbc3 in front of everything in the file without having to manually type it there (some type of inheritance or descriptor to say put the .gbc3 in front of all elements in this file)... I'm trying to save my pasting of ".gbc3 " x800 times.
How about I put it another way, here is what I would like to be possible in CSS (but obviously this is not valid CSS):
.gbc3 {
textarea {
color:red;
}
h1 {
text-align:center;
text-padding: 3px;
}
...
}
I don't think you can do that above in CSS, but that is basically what I am trying to accomplish = for every .gbc3 element, I want to override these specific ones.
What I don't want to have to do is add .gbc3 800 times in my CSS like:.gbc3 body {
Blah
}
.gbc3 textarea {
Blah
}
.gbc3 H1 {
Blah
}
because I have all the elements already in there minus the .gbc3 for each one.
You could do it in "less". then compile to css.
So to be clear, the plugin has the gbs3 class attached to html elements in an html page. There is then a css file that specifies colours, etc, for, say, an H1 with the class gbs3 by stating ".gbs3 h1 { color: red }". You then want to override the settings in that css file with your own css file, which specifies colours, etc, for a lot of elements. And you just don't want to edit your own css file to add the class specifier to 800+ entries in your file.
Is that what your actual problem is?
If so, use some regex-fu with Notepad++. First, open your css file in Notepad++, then use the search and replace (make sure the "Search Mode" is set to "Extended") to replace "\r\n" with " " (replace carriage returns with spaces), and keep doing it until there are no more carriage returns. Then replace "} " with "}\r\n", which should put each style rule on its own line. Then replace "\r\n" with "\r\n.gbs3 ", which should put ".gbs3 " at the start of each line (might have to fix the very first line in the file).
Anyway, that's how I'd do large text replacements like that.
Man, I wish I had you on IM because I'm trying to figure out what you are are trying to do?
You have a defined class already, called gbc3, if you add that class to your elements either programmatically or manually it's going to override whatever CSS was applied there already with whatever is defined in that class.
<p class="gbc3">blah</p>
If you want to merge styles then just include the different stylesheets in the order you want the override to happen and the last include will override the previous includes.
If you want to completely override one style over another and preserve nothing of the first sheet don't include it?
Or are you defining a new class on all elements? Like this:
*.gbc3 {
color: blue;
}
<div>font not blue</div>
<div class="gbc3">font blue</div>
http://www.cssdesk.com/2C5NQ
Quote from: Mr. Analog on March 06, 2015, 04:35:32 PM
Man, I wish I had you on IM because I'm trying to figure out what you are are trying to do?
He's trying to avoid the mind-numbing task of editing his own css file with 800+ style rules to include .gbs3 in front of each style rule. He still wants different styles applied to different elements, which he already has defined in his css file.
Quote from: Thorin on March 06, 2015, 04:29:36 PM
So to be clear, the plugin has the gbs3 class attached to html elements in an html page. There is then a css file that specifies colours, etc, for, say, an H1 with the class gbs3 by stating ".gbs3 h1 { color: red }". You then want to override the settings in that css file with your own css file, which specifies colours, etc, for a lot of elements. And you just don't want to edit your own css file to add the class specifier to 800+ entries in your file.
Thorin has it, what I exactly want it to do in his first paragraph.
I was just hopeful I could use something in CSS to accomplish that rather than a large copy paste (fine replace regex) or similar function. Something that is clean and that was one or two lines.
This is very common in skinning in many areas (which I assume you are aware) - the base system uses one defined set of elements in a CSS, and your skin overrides those elements with your own CSS. The problem here is I didn't write the second CSS, I am borrowing one from an all-encompassing CSS sight called bootstrap that this particular plugin will use if you define it, but the all-encompassing CSS I downloaded does not have the plugin's class of .gbc3 defined on its elements. I was looking to see if there was an easier way to apply a class to all the elements in the file without having to put the class in front of every element in the file.
So I take it there isn't a way to accomplish this with some CSS class magic... just the "hard" way of putting the class in front of every element in my file as Thorin and Mr. Analog have suggested?
The assumption I'm making here is that his HTML elements already have a reference to that class, if so then all he needs to do is include that stylesheet and let the class references do the work, if he wants to define that class on all elements he can use the asterisk syntax (*.gbc3 { //stuff } )
If he doesn't have that class and rather has two stylesheets that have definitions that may override each other just include the stylesheets in the order he wants to override them (last include wins)
Otherwise he should consider what Tom suggested and check out less:
http://lesscss.org/
?
Also to add a class definition to an element you have to flip it around
h1.gbs3 { color: red }
ALSO also I just realized you might just be missing commas
(from Stack Overflow)
.composite,
.something { display:inline }
.composite,
.else { background:red }
Unfortunately, less isn't an option as I don't want to modify the code of the plugin (so that it is upgradable with my skin in tact), and I do not have access to the hosted solution. I am just trying to skin it.
Mr. Analog, you are correct, the HTML refereces gbc3 in its elements and I don't want to assign the class to all elements. My stylesheet is the second one loaded (the nature of skinning requires this), but my CSS does not reference the gbc class, only the elements themselves (which are ignored because the HTML elements define a class).
As stated before, just looking for an easy way to reference the class in my CSS for all the elements I've defined without having to include that class on every element definition in my CSS, just say "somehow" tell it at the top of the CSS file to include the class with every element in the CSS file.
Make sense what I am looking for? Not possible?
Yeah, I think you just need to edit your css file, since you're trying to alter the definition of the rules and the rules are defined in that file. Sorry, css just isn't that smart.
Quickly example:
HTML
<h1 class="gbc3">Hi World</h1>
<h2 class="gbc3">Goodbye</h2>
Base.css
.gbc3 h1 {
color: red;
}
.gbc3 h2 {
color:blue;
}
.gbc3 h3{
color:orange;
}
My Skin CSS
h1 {
color: black;
}
h3 {
color:black;
}
Base.css is loaded first, My Skin CSS loaded second. Want to force class .gbc3 for all my CSS elements without putting in my CSS .gbc3 on lines h1 and h3.
Quote from: Thorin on March 06, 2015, 05:04:45 PM
Yeah, I think you just need to edit your css file, since you're trying to alter the definition of the rules and the rules are defined in that file. Sorry, css just isn't that smart.
Damn, was hoping it was easier than that.
You can use !important on your CSS
From Stack Overflow:
a.bakground-none { background: none; }
body .bakground-none { background: none; }
.bakground-none { background: none !important; }
"The first two ?win? by selector specificity; the third one wins by !important, a blunt instrument."
http://stackoverflow.com/questions/20954715/how-to-override-the-properties-of-a-css-class-using-another-css-class
He'd still have to edit 800+ style rules in his css file.
He's trying to edit his css file without having to edit it :P
Yep, that's impossible because the earlier definition is more granular than the latter :)
Oddly enough if it was using a more generic selection it wouldn't be a problem.
If it helps this problem could also be solved in the element class attribute by specifying override classes in order but then you'd still have to define those classes and add them to the class attribute of everything you wanted to affect :)
This is why learning CSS specificity and how it works is really important:
http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
Yeah, like I said I didn't write it, just skinning it :(. Oh well......
Quote from: Melbosa on March 06, 2015, 03:27:35 PM
Yeah, but is there a way to say every element in this CSS file is an override for the .gbs3? I have over 800 Elements in my CSS copied from bootstrap. Thats a lot of CTRL+Vs in front of every element.
Text editor with
RegEx replacing is your friend ;)
also not sure if related to or helpful at all with what you need, but this new RW thread (http://forums.righteouswrath.com/index.php/topic,10582.0.html) mentions some "source code playground" tools that can be helpful in addition to the Firefox CSS Explorer etc. Stuff like "CSSdesk" mentioned above ITT (http://forums.righteouswrath.com/index.php/topic,10579.msg83790.html#msg83790).
Quote from: Tom on March 06, 2015, 04:25:27 PM
You could do it in "less". then compile to css.
Ooo! Good suggestion! But might be a bit of up-front mental "work" to really get how tools like LESS can be beneficial for advanced CSS'ing.
I still think either some solid RegEx replacing (or even a quick script (even if just written in JS) that parses the entire CSS file as a string, and for each line where it is required just inserts the required text snippet) = relatively quick and easy modified contents.
Quote from: Thorin on March 06, 2015, 05:04:45 PM
Yeah, I think you just need to edit your css file, since you're trying to alter the definition of the rules and the rules are defined in that file. Sorry, css just isn't that smart.
Yeah nowadays after all these years we wish that css was MORE smart. Hence the need for LESS etc.
And what about instead of modifying the existing CSS, create a new CSS with all the elements you want to over-ride and just include that new class -- and then include that new CSS after the existing one, for the result similar to what Mr. Analog linked to a demonstration of ... that way if the ORIGINAL css ever got updated or reverted you wouldn't be cursing like a sailor.
I like Thorin's step-by-step for how to utilize RegEx replacing though -- always "clean" the data first so you have a consistent structure before doing your mass find-and-replace. In the case of CSS it can be compressed without any data loss as he described which definitely makes it easier to identify individual "lines" to which your find-and-replace logic would apply.
Thanks everyone for your help and suggestions.