CSS Help

[Melbosa]

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:

Code Select Expand

.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.

[Mr. Analog]

What browser are you using and/or what CSS debugger are you using?

[Melbosa]

Browser: Any and CSS Debugger: none.  Right now my CSS is NOT being picked up supposedly because of that missing setting.

[Mr. Analog]

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

Code Select Expand

.gbs3 textarea{
/* some rules here */
}

This code means that ANY textarea element will get your .dbs3 style override applied to it

[Melbosa]

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.

[Mr. Analog]

Oh, use asterisk:

Code Select Expand

* {
/* 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

Code Select Expand

.gbc3 * {
/* your shizz here */
}

<thing class='gbc3'>stuff</thing>



[Melbosa]

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:

Code Select Expand

.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:

Code Select Expand

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.

[Mr. Analog]

CSS can be combined and in general the last definition wins:

Code Select Expand



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:

Code Select Expand



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

[Mr. Analog]

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/

[Mr. Analog]

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

[Melbosa]

CSS can be combined and in general the last definition wins:

Code Select Expand



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:

Code Select Expand



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

Code Select Expand

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.

[Melbosa]

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):

Code Select Expand

.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:

Code Select Expand

.gbc3 body {
  Blah
}

.gbc3 textarea {
  Blah
}

.gbc3 H1 {
  Blah
}
because I have all the elements already in there minus the .gbc3 for each one.

[Tom]

You could do it in "less". then compile to css.

[Thorin]

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.

[Mr. Analog]

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.

Code Select Expand

<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:

Code Select Expand

*.gbc3 {
    color: blue;
}

<div>font not blue</div>

<div class="gbc3">font blue</div>



http://www.cssdesk.com/2C5NQ