Css color background and borders

xatanael

Hello,

I would like to know how to create a color background and border around the connexion column and around the categories column, like you did in this forum.

How can I proceed? I have CssEdit plugin.

Thank you.

whu606

As RJ said in another post, you should try to become familiar with how the web inspector tool of your browser works.

That way you can see exactly which rules affect which elements on a page, and also make temporary changes (which only affect the page you are on, not other users) to see how you might change things.

xatanael

Thank you, I can try, but I have 0 knowledge in CSS, so it's very difficult for me to learn it from the scratch

Edit : I tried web inspector for Chrome, but it only shows me the font, the size and the color of the links.

I don't understand how I can change the background color and in which file I can do it...

whu606

You need to give yourself an hour or so, and read up the docs for your browser's inspector, and practice.

In Chrome, click to inspect this page.

Type 'background' in the filter box.

You'll see 'background' in the body tag.

The setting is #fff - click on it and change it to another value.

You will then know what tag (Body) and what element (background) to change in CSSEdit.

I didn't know any css until I came to Vanilla, and knew nothing about web inspectors until I tried.

Generally, the inspector tries to show you the rules that affect the area you have clicked on.

xatanael

Ok, I see the code in the web inspector, but they are dozens of different lines for background... I don't see how I can find the good one, and how I can colorize the categories background + create a border around it + make good padding spaces...

It's too much for me, lol

xatanael

Anyone else maybe? I just want to add a color and a border in the categories menu like the one on Vanilla forums :

whu606

Maybe someone else will do it for you, but I'm not going to. There is no reason why you couldn't do it yourself.

Take a look at this comment, which links to an annotated theme I made specifically for people new to css, and a new addon file to make it compatible with 2.5+

https://open.vanillaforums.com/discussion/comment/252092/#Comment_252092

Although it was for 2.1, if you use the addon file attached in this comment, it should run in 2.6.

xatanael

Ok, thanks anyway, I'll keep it white so

whu606

Then it's obviously not that important to you.

xatanael

Nothing is really important

But I spend 1 hour searching a file (colors.css or something like that), and I never found it. I don't even know if the file exists in Vanilla.

I spend also some time to "analyse" the code given by google web inspector (analyse is a funny term because I don't understand a single character).

I have a "working forum" at least (even it's only installed since 3 days), so I'm happy like that

River

@xatanael said:
Nothing is really important

But I spend 1 hour searching a file (colors.css or something like that), and I never found it. I don't even know if the file exists in Vanilla.

I spend also some time to "analyse" the code given by google web inspector (analyse is a funny term because I don't understand a single character).

I have a "working forum" at least (even it's only installed since 3 days), so I'm happy like that

Depending on what theme you are using your results may vary but by looking at the current vanilla forums theme on this forum...

Using web inspector on the vanilla forum page you can see it is identified by .Box

        .Box {
            background: #f7f6e4;
            padding: 5px 10px;
            border-radius: .5ex;
            border: solid 2px #dcdccb;
            margin: 20px 0;
        }

so if you want to change the entire box background to red you use

 .Box {
                background: red;
                padding: 5px 10px;
                border-radius: .5ex;
                border: solid 2px #dcdccb;
                margin: 20px 0;
            }

the above will change all Boxes

to further differentiate just the categories Box you can use .BoxCategories

the category box is also identified by .BoxCategories so yo could change the line items background to green

    .BoxCategories li {
        background: green;
    }

the more you experiment the better you get.

from the FAQ in tutorials category you can see if these links still work https://open.vanillaforums.com/categories/tutorials

Although css questions are asked on this forum, you really can learn about general css from a tutorial

But I don't know css and I'm just a beginner

everybody was a beginner once,
some have learned by reading css tutorials, you can too.
try googling css tutorials.

CSS Tutorial sites

http://www.csstutorial.net/
http://www.htmldog.com/guides/css/beginner/
http://www.tizag.com/cssT/
http://www.tutorialspoint.com/css/

also see these links which will be very helpful after you reviewed some of the tutorial links above.

http://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/

http://www.w3.org/TR/CSS2/cascade.html
Development tools for CSS

Next stop learn how to use Firebug or some other web developer tools

you can google "firebug tutorial" or "inspecting css tools"

http://css-tricks.com/video-screencasts/15-introduction-to-firebug/
https://developer.chrome.com/devtools
http://msdn.microsoft.com/en-us/library/dd565627(v=vs.85).aspx
https://developer.apple.com/library/mac/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html

xatanael

Thank you very much, I added the code in CSSEdit and it works

I'll check all those tutorials.

But I still don't get how you found the "box" area. When I mouse over a element with chrome web inspector, I can only click on the links (so I have their fonts, their colors, etc), but not on the background itself... I mouse everywhere but I can't find the "box" code like you.

I must be kind of desperate... lol

River

@xatanael said:
Thank you very much, I added the code in CSSEdit and it works

I'll check all those tutorials.

But I still don't get how you found the "box" area. When I mouse over a element with chrome web inspector, I can only click on the links (so I have their fonts, their colors, etc), but not on the background itself... I mouse everywhere but I can't find the "box" code like you.

I must be kind of desperate... lol

just highlight the box by selecting element in right upper panel with div box

or inspecting and moving cursor over very top of category box until the element you want is highlighted and you can see the properties in the right lower side panel.

things are hierarchical and properties inherited so you may need to move up to the higher element in hierarchy to determine inherited properties.

xatanael

Oh nice, I just understand I had to right click in the page and click on "inspect"...

I was clicking directly with the web inspector tools, and it only allows to click on the links... lol. That's why I couldn't find the entire code...

Thanks anyway!