Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Where's the main html file?

I'm trying to locate vanilla's main html file so I can take a look at it and have a better understanding of what I need to customize in my theme's css file. I need to modify a few things in the Bootstrap Yeti theme, but every time I do I never see any changes. I'm using my browsers inspector to see which selectors, classes and ids I need to reference, but this apparently isn't helping me. I know that Bootstrap utilizes LESS, but it's my understanding that I only need to use that if I'm going to be making lots of changes to the theme. I'd like to avoid using LESS if possible. I also know that Bootstrap isn't supported here, but all I'm asking is for some guidance in the right direction. I just finished the HTML/CSS course on codecademy.com so I have a pretty fair understanding of these.

Here's an example of something that isn't changing for me. Maybe I'm doing something wrong and don't realize it. I'm trying to change the font color of the unordered list (ul) within the class .FilterMenu (this is the area of the page sidebar that says categories, recent discussions, my drafts, etc).

I add the following to custom_yeti.css just to test and see:

.FilterMenu ul {
color: green;
}

Nothing happens.

Maybe if I can look at the html document I can get a better understanding. Any help would be much appreciated.

Comments

  • I'm trying to locate vanilla's main html file so I can take a look at it and have a better understanding of what I need to customize in my theme's css file.

    There is no such thing.

    There is the default.master.tpl or php in a theme.

    I'm using my browsers inspector to see which selectors, classes and ids I need to reference, but this apparently isn't helping me.

    You need to learn how to use them that is what we all use... you have been provided with tutorials on how to use a web inspector before . Please take time to learn.

    I'd like to avoid using LESS if possible

    Use a more user friendly theme until you learn how to do things.

    Bootstrap isn't supported here, but all I'm asking is for some guidance in the right direction

    You have been provided with what you need. What you are asking is the same you asked before over and over. And the answer is the same. Use a web inspector. Use the css edit plugin, or take a bootstrap tutorial.

    And on top of that you never provide a link to see the problem... you need to put more effort on your part.

  • SkismaSkisma New
    edited April 2015

    @vrijvlinder said:
    And on top of that you never provide a link to see the problem... you need to put more effort on your part.

    I didn't provide a link because I didn't think it was necessary in this situation, since the only thing you'll see is my forums page with the default color of a light blue. Here it is though: http://forgehaven.com/forums/

    If you inspect that area I'm talking about you'll see the class is .FilterMenu, and it contains an unordered list (ul) of links (a).

    This is why I've tried adding this to my css file:

    @Skisma said:

    .FilterMenu ul {
    color: green;
    }

    I've also tried:

    .FilterMenu ul a {
    color: green;
    }

    I watched the bootstrap video you sent me and read all through the w3schools bootstrap documentation. I also have used all of my free time these past two days at work to go through the HTML/CSS course on codecademy from start to finish. So it is insulting for you to say I need to put more effort on my part.

    I am trying here. If you don't want to help than I understand; you've helped me a lot already so don't worry about it.

  • edited April 2015

    I didn't provide a link because I didn't think it was necessary in this situation

    So you are expecting us to guess or imagine what you are talking about ? How else are we going to give you the right info?

    I watched the bootstrap video you sent me

    I'd like to avoid using LESS if possible

    I am sorry if the video was not helpful. This is not a theme for people who can't use the tools available to everyone to be able to edit it. The whole point of the theme is so you don't have to edit it like most themes. It is supposed to make the theme editing more streamlined. But it does have a learning curve to implement it as it is supposed to be.

    used all of my free time these past two days at work to go through the HTML/CSS course on codecademy from start to finish.

    It takes years to learn. Not two days. If you can learn all of that in two days , then you should not have difficulties figuring the rest out with the tools given instead of saying you are insulted. How about me feeling insulted by you lack of accepting what was already explained to you many times over. Not just by me, but by peregrine, and hgtonight and Bleitvst and many others who have given you advice and info on how to do things.

    Sometimes it is easier to just give people the answer and not make them try to figure it out , but that can only be done with a url to see the page so one can use a web inspector , yes that is right, a common web inspector is used to see your page to find out what it is that is going on.

    So maybe what you need is a tutorial on how to use a web inspector

    https://thewc.co/articles/view/web-inspector-tutorial

    http://www.w3schools.com/tags/ref_colorpicker.asp

    http://lesscss.org

  • SkismaSkisma New
    edited April 2015

    @vrijvlinder said:
    So you are expecting us to guess or imagine what you are talking about ? How else are we going to give you the right > info?

    I clearly explained what I was talking about, so no I do not expect you or anyone to imagine it. I listed the code I was using and said that it wasn't working. The code was simply to change the default text to green. If I said it wasn't working, all you'd be able to do by visiting a link would be to confirm that it was not green. I suppose you could also inspect the page and confirm that the class is call FieldMenu and that it contains ul and a selectors.

    @vrijvlinder said:
    It takes years to learn. Not two days.

    You're right, it does take years to become as fluent with code as you and many others here are. So based on your own statement, how do you expect me to be this fluent? If you don't expect me to be then you should understand where I'm coming from. I'm trying really hard to learn this stuff. Now that I've completed this course, I have a pretty decent understanding of CSS/HTML, but nothing compared to your understanding of CSS.

    @vrijvlinder said:
    How about me feeling insulted by you lack of accepting what was already explained to you many times over. .Not just by me, but by peregrine, and hgtonight and Bleitvst and many others who have given you advice and info on how to do things

    Why would you be insulted by my lack of understanding and knowledge? That doesn't make any sense. The only reason I said I was insulted was because you told me to put in more effort when I'm trying really hard to learn! If I was rejecting all attempts for you and others to teach me, and only wanted the solutions, then I would understand. But I'm taking what you and others are providing me and am using it to try and teach myself. I appreciate all of the help you all have given me VERY much! So much that I would totally donate to you guys if I had the money.

  • edited April 2015

    all you'd be able to do by visiting a link would be to confirm that it was not green.

    If that is what you think, then there is nothing anyone can do to tell you what is wrong and it is a waste of time to try. You obviously have not looked at any tutorial about how to use a web inspector or you would not have come to that conclusion.

    how do you expect me to be this fluent?

    You said yourself in your own words you had :

    I just finished the HTML/CSS course on codecademy.com so I have a pretty fair understanding of these

    And what you are asking is basic of the most basic of css questions, which were already answered about changing colors and editing the theme.

    I also suggested what seems to be a long time ago to use a chrome extension https://chrome.google.com/webstore/detail/css-reloader/dnfpcpfijpdhabaoieccoclghgplmpbd?hl=en

    And the plugin CSS EDIT was also recommended. Sometimes it is a cache issue that you can't see the changes. It can also be bad css the browser does not like or understand.. Use hex colors or rgb colors not all color names work well with all browsers.

    I'm trying really hard to learn this stuff.

    You need to also learn Php because that is what Vanilla is made of. You need to also learn javascript or at the very least understand the concepts. It takes years, maybe 3 years if you really apply yourself.

    Why would you be insulted by my lack of understanding and knowledge? That doesn't make any sense

    No insulted that we wasted our time by giving you advice and info you chose to ignore so we had to repeat it several times. That is insulting because we don't like to waste time sharing info only to have to point to the same answer over and over. That makes me feel like you are feeling entitled or something. People will only go so far and then you need to find your own info to solve your own problems.

    If I was rejecting all attempts for you and others to teach me, and only wanted the solutions, then I would understand.

    But that is what you have done. Or that is what it seems. I can list all the discussions you started asking how to change the color of something. There is nothing wrong in asking a question. But when the same question relating to the same thing and the same theme, then it becomes questionable if you have understood the past answers.

    If you have not understood the past answers, then please say so and I will post the links to them so you can bookmark them. That way you can return to it later if you forget.

    Sometimes you must add !important to force a change

    color:#666!important;

  • @vrijvlinder said:
    If that is what you think, then there is nothing anyone can do to tell you what is wrong and it is a waste of time to try. You obviously have not looked at any tutorial about how to use a web inspector or you would not have come to that conclusion.

    If you read literally the next sentence after what you quoted from we, you'll see I say:

    @Skisma said:
    I suppose you could also inspect the page and confirm that the class is call FieldMenu and that it contains ul and a selectors.

    I haven't watched the web inspector tutorial you provided me just yet, but will sometime tomorrow.

    @vrijvlinder said:
    You said yourself in your own words you had :

    I do have a fair understanding, it guess it's a combination of the troubleshooting and the fact that it's Bootstrap that I'm having problems with. The reason I asked you...

    @Skisma said:
    how do you expect me to be this fluent?

    ...is because you said it takes years, not two days.

    @vrijvlinder said:
    And what you are asking is basic of the most basic of css questions

    Well technically here I was asking which html file I need to look at that has the information containing the class .FilterMenu and where to locate it. The CSS portion was just an example of something I was having problems with.

    @vrijvlinder said:
    You need to also learn Php because that is what Vanilla is made of. You need to also learn javascript or at the very least understand the concepts.

    These are the next two course I'm going to take, starting tomorrow.

    @vrijvlinder said:
    No insulted that we wasted our time by giving you advice and info you chose to ignore so we had to repeat it several times. That is insulting because we don't like to waste time sharing info only to have to point to the same answer over and over.

    I'm not choosing to ignore the information. I'm taking it and trying to use it to learn/solve me problems. You said yourself (and it's obvious) that it takes many years to get this all of this stuff down, so you should understand that it may take a bit for me to process and understand everything you guys have been helping me with.

    @vrijvlinder said:
    I can list all the discussions you started asking how to change the color of something. There is nothing wrong in asking a question. But when the same question relating to the same thing and the same theme, then it becomes questionable if you have understood the past answers.

    This is weird because this is the only discussion where I'm (sort of) asking for help changing the color of something. I say "sort of" because this was not the original topic of this discussion. The previous time wasn't a discussion I started, but instead was a topic I searched and decided to comment in. It was regarding changing the background image and was prior to my taking the css course. My previous discussion was regarding oEmbed, the one before that was regarding Discount Discussions, the one before that was regarding images not embedding in Mediator, the one before that was regarding a question I had with a wordpress theme I was going to buy, the one before that was regarding setting up outgoing emails, etc.

  • R_JR_J Admin

    Whatever CSS you like to change, do the following:

    Test your new CSS rule with webinspector

    Is it Working?

    Yes

    Use CSSEdit to add that rule to your current theme

    No

    Read about CSS, selectors, specifity. Try again.
    If you get stuck, make a screenshot, mark the element you like to style, if possible provide a link, and tell us what you've tried and what you have hoped to achieve with that.


    Looking at your sites HTML and your CSS: you should definetly look at how CSS selectors work. You've tried to style the ul that comes after an element of class FilterMenu, ul has that style.
    Here's something to test for you: http://jsfiddle.net/hsLczv3e/

    hgtonight
  • SkismaSkisma New
    edited April 2015

    Thanks @R_J ! I actually got this working last night with a simple alteration.

    I guess all it cared about was the fact that the unordered list was just a bunch of hyperlinks because this worked:

    .FilterMenu a {
    color: #fff;
    }

  • R_JR_J Admin

    image
    You solved it fine, but you solved it by guessing. That is so fine not. To understand what you do try. Help you solve your upcoming tasks faster, that will.

    whu606Skisma
  • SkismaSkisma New
    edited April 2015

    @R_J Ok I'm taking your advice from above. Here is a link to my forums page: http://forgehaven.com/forums/

    If you look at the header area you'll see how ugly it is. I need to eliminate the padding between the header image and the navbar items, as well as increase the padding-left to the MeBox class so that it shifts over and aligns better with the "New Discussion" button. Here are some screenshots:

  • Here's what I've tried:

    .navbar-header {
    padding-bottom: 0px;
    }

    Result: No change

    .navbar-header {
    padding-bottom: -50px;
    }

    Result: No change

    .navbar-header {
    padding-bottom: 150px;
    }

    Result: Padding-bottom increases to 150px, making the header area even more ugly.

    .nav.navbar-nav {
    padding-top: 0px;
    }

    Result: No change

    .nav.navbar-nav {
    padding-top: -50px;
    }

    Result: No change

    .nav.navbar-nav {
    padding-top: 150px;
    }

    Result: Padding-top increases to 150px, making the header area even more ugly.


    .MeBox {
    padding-left: 25px;
    }

    Result: No change

    .MeBox {
    margin-left: 25px;
    }

    Result: No change

  • edited April 2015

    Does adding !important to the values help make it work ? Have you tried it ?

    I think I mentioned that about 5 times already and you never said if adding !important does work.

    Did you follow RJ advise? It can't be clearer than that....

    I think this thread needs it's title changed to "How to style Bootstrap" @hgtonight because the current title is not going to help anyone else trying to style Bootstrap... Thanks

  • @vrijvlinder said:
    Does adding !important to the values help make it work ? Have you tried it ?

    I think I mentioned that about 5 times already and you never said if adding !important does work.

    Yes I've tried adding this, my bad I didn't mention that. In the case of the FilterMenu modification it wasn't needs though, I just needed to make it:

    .FilterMenu a { }

  • @R_J Taking your advice from your above comment. Here's a link to my forums page: http://forgehaven.com/forums/

    If you look at it you see how ugly the header area is. I need to eliminate the padding between the navbar items and my header image, as well as increase the padding-left of the MeBox so it will align better with the "New Discussion" button. Here are some screenshots:

    Here is what I've tried:

    .navbar-header {
    padding-bottom: 0px;
    }

    Result: No change

    .navbar-header {
    padding-bottom: -50px;
    }

    Result: No change

    .navbar-header {
    padding-bottom: 150px;
    }

    Result: Increases the padding to 150px, making the header area even more ugly.

    .nav.navbar-nav {
    padding-top: 0px;
    }

    Result: No change

    .nav.navbar-nav {
    padding-top: -50px;
    }

    Result: No change

    .nav.navbar-nav {
    padding-top: 150px;
    }

    Result: Increases the padding to 150px, making the header area even more ugly.


    .MeBox {
    padding-left: 50px;
    }

    Result: No change

    .MeBox {
    margin-left: 50px;
    }

    Result: No change

  • hgtonighthgtonight Moderator

    This is a friendly bump as the last comment was caught in the SPAM filter.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • R_JR_J Admin

    @Skisma said:
    R_J Taking your advice from your above comment. Here's a link to my forums page: http://forgehaven.com/forums/

    If you look at it you see how ugly the header area is.

    Seems like you've solved your problem already. Although I personally wouldn't say your side is not ugly :scream: - reminds of the good old days where <marquee> was top-notch webdesign technique :anguished:

  • @R_J Wait, so you're saying you still think it's ugly? I've been working really hard on modifying my theme! lol

    It currently looks quite different from what's in the image above, but I'm not finished yet :)

Sign In or Register to comment.