Trying to edit CSS files with Firebug, why doesn't it tell me which CSS files i need to manipulate?

mumrik · July 2013

I have been reading tutorials about all kinds of stuff and after some 20 hours of stumbling around I've started to get the hang of editing CSS files. I am using Firebug to see what strings are in what CSS files, and for the tagline and some other elements, it's not pointing me to one file, but only my domain name. None of the CSS files in my root database have strings for my tagline.

What's going on?

Shadowdare · July 2013

The CSS rules are probably in a style tag in the head tag of the page and not in a stylesheet.

peregrine · July 2013

never mind.

vrijvlinder · July 2013

ok relax , please explain what it is that you want to achieve and remind us what version you are using now ?

The only files you need to edit are within the theme files. That page you are looking at is the forum index, it is made up of the default.master.php or default.master.tpl inside there is the structure of that page based on how the person who made the theme wanted it.

That is where you may find these parts. Look inside your theme views folder.

mumrik · July 2013

@vrijvlinder said:
ok relax , please explain what it is that you want to achieve and remind us what version you are using now ?

Originally I wanted to change the text itself, but I'm trying to remove it now.

I'm using version 2.0.18.8

default.master does not have any strings related to the "tagline" in it. At least mine doesn't.

mumrik · July 2013

@Shadowdare said:
The CSS rules are probably in a style tag in the head tag of the page and not in a stylesheet.

This might very well be the case. It's constantly showing me "http://www.w3.org/1999/xhtml" everywhere, and the CSS tab in Firebug doesn't have "tagline" strings in it.

vrijvlinder · July 2013

It does look like it is part of the theme. That is not a standard vanilla thing. So it is in the default.master somewhere

at any rate you can remove it with css just add this line to the custom.css file in the theme

div.tagline{
display:none!important;
}

mumrik · July 2013

@vrijvlinder said:
It does look like it is part of the theme. That is not a standard vanilla thing. So it is in the default.master somewhere

at any rate you can remove it with css just add this line to the custom.css file in the theme
div.tagline{
display:none!important;
}

Thank you. I'm trying to get the hang of this though, so I'll go into default.master once again just to try and figure it all out.

mumrik · July 2013

I am not sure what the heck even happened, but suddenly I have a default.master.tpl that I'd never seen before, and what do you know - it's got the tagline settings within it.

The magic of code.

Thanks to everyone who helped me here, it's bringing me one step closer to learning this stuff.

vrijvlinder · July 2013

It is very simple all you do is look at it and study it . Don't be afraid to do so , if you mess it up you just replace that file with a new one from a fresh download.

The master is like the html page if you will. And you can add to it or remove stuff.

DavidColburn · August 2013

I was looking into moving a button, swapping the Comment buttons left to right, and ran into the same css Inspector confusion.

The upper left bar displays:
body#vanilla_discussion_ubdex.Vanilla.Discussion.Index

Looking around via cpanel using File Manager there is no such thing as Vanilla Discussion Index, though I did find:
/applications/vanilla/views/discussion/index.php but that is not a css file nor does it appear to be related to this.

I looked at a ton of other files and still came up empty. What am I missing in css Inspector re. the identity of the source css file - which needs to be edited, please?

Shadowdare · August 2013

@DavidColburn, you can make a custom.css file in your theme for custom CSS changes. body#vanilla_discussion_index.Vanilla.Discussion.Index is the CSS selector that takes effect when a page has a body tag with an ID called "vanilla_discussion_index" and three classes called "Vanilla," "Discussion," and "Index."

vrijvlinder · August 2013

The code you need to move the buttons is this and you just add it in the custom.css as I explained in the pm you sent me. Please read the stuff carefully.

Maybe you should use firebug , it is key to learn how to use it.

http://www.w3resource.com/web-development-tools/firebug-tutorials.php

Most inspectors work the same way.

.CommentForm a.Back{ 
float: right!important; 
}

input.Button.CommentButton {
float: left!important;
}

vrijvlinder · August 2013

the best way to use these is with the side bars open so you can see the html on one side and the css on the right side. When you hover over an element on the html you will see it highlighted on the page and that is how you inspect the element. When you find it, you click the element you wish to edit and the css rules that apply to it will show on the side bar. You can edit it right there to see what it does without actually editing the real code. If an element does not have a rule or is bundled in a line with other elements, you make a new rule just for the one you need to edit like I did in the code above.

DavidColburn · August 2013

Sorry, I was confusing Web Developer Extensions with Firebug. For some reason Firebug had been disabled - since I'm unfamiliar with the look of Firebug when activated (I'm not used to Firefox either) I had not noticed. Sigh.
Anyhow, Firebug says that the css file it sees is:
http://oachegroup.org/applications/dashboard/design/style.css?v=2.0.18.8
BTW: I had looked in custom.css but was thinking I was supposed to modify existing code.
I didn't find that line of code so rather than bother you again I went looking for the right file.
I see now that it's a whole new bit of code to be added to custom.css which I understand layers on top of style.css?
(I've been making notes in my print-out of the wiki and Vanilla docs explanation of the Folder Structure.)

Tama · August 2013

@DavidColburn said:
I see now that it's a whole new bit of code to be added to custom.css which I understand layers on top of style.css?
(I've been making notes in my print-out of the wiki and Vanilla docs explanation of the Folder Structure.)

This is correct, if the new lines of css you add to custom.css don't have any effect, trying adding !important to the end of the statement, you may need this for some classes.

For example

in style.css there is this statement

.InformMessages .InformMessage {
   color: #fff !important;

this means you need to add the !important flag on your statement to override it

.InformMessages .InformMessage {
   color: #CCC !important; /* Woah now it's gray */
}

DavidColburn · August 2013

That fixed it. thanks!

Next to figure out why the centering mod works on the logo and button bar after login but not before.

I have a long meeting this evening so may not get back to this until tomorrow ...

vrijvlinder · August 2013

these tools are simply indispensable to learn how to use. In fact you can even try other style sheets just by replacing the link on the head tag in the html source code.

You can edit the stuff right on there and see what it does and what you need to do. You can even add blocks of html to the source and all sorts of things to play around with it without having to go into the files.

You copy and paste the stuff you edit in firebug into a text file or notepad, and edit the whole thing like that. Once you collected all the edits. Then you copy paste them into the actual file.

The main style sheet has much more code that is not needed always in the custom style sheets, however sometimes you do need to edit extra stuff that may not be in the custom.css of a theme so you just copy that part into the custom.css. If there is no such rule anywhere, you create a new rule ...

I tried organizing my css in alphabetical order so it is easier to find when I edit. The main style sheet is organized by sections.

If you run into messy unreadable code, put it through a css beautifier

http://cssbeautify.com

you can try adding text-align:center to this part like I did below to fix the issue with the logo

#Head div h1 span img {
height: auto;
width: 98%;
margin: 0 auto;
text-align: center;
padding-bottom: 10px;
}

vrijvlinder · August 2013

In fact this is a screenshot of this forum using my GreenGlass theme. By doing this I can see if my themes work with new version of vanilla and also see what I need to add to the theme so they works with all versions. I like how this looks on this forum

DavidColburn · August 2013

CSS may be located in a style tag in a header OR in a style sheet ... why doesn't Firebug flag which it is and display that information? I know, file a feature request ... :-)

At least it is helpful to know that the missing css location information is a failure of Firebug design and not the user missing something obvious.

hgtonight · August 2013

@DavidColburn said:
CSS may be located in a style tag in a header OR in a style sheet ... why doesn't Firebug flag which it is and display that information?

My experience with Firebug is that it does list the file and line number of CSS declaration. It is even a link to the source file.

Trying to edit CSS files with Firebug, why doesn't it tell me which CSS files i need to manipulate?

Comments