Css color background and borders

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.

Comments

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... Moderator

    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.

  • xatanaelxatanael New
    edited December 2018

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

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... Moderator

    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.

  • 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

  • xatanaelxatanael New
    edited December 2018

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

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... Moderator

    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.

  • Ok, thanks anyway, I'll keep it white so =)

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... Moderator

    Then it's obviously not that important to you.

  • 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 =)

  • RiverRiver MVP
    edited December 2018

    @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

    Pragmatism is all I have to offer. Avoiding the sidelines and providing centerline pro-tips.

    jeongwee
  • 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

  • RiverRiver MVP
    edited December 2018

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

    Pragmatism is all I have to offer. Avoiding the sidelines and providing centerline pro-tips.

    jeongwee
  • 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!

    mauwiks
Sign In or Register to comment.