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.

Custom CSS Question

So i've been working on a template for my set up of vanilla and when I finally sat down to plug everything in I noticed that my custom.css wasnt working for some reason. Upon further inspection I am noticing that, well essentially, because my css file and the 'default' files classes arent the same names they dont work. The couple of classes that i 'accidentally' named the same do work though. So is there no way to truly do a custom CSS job? Or do I have to sit here and basically transpose all of my CSS to the 'Template' CSS class name and all? Also if this is a noob question sorry, first time working with vanilla.

«1

Comments

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    my custom.css wasnt working for some reason.

    It should work , find the reason. Could be a minifier could be the cache .

    Classes only matter if they have corresponding code. You can name anything any name you want. I try to stick to Vanilla known classes to make more user friendly themes. Sometimes you need to add your own custom class. That is ok too.

    The couple of classes that i 'accidentally' named the same do work though.

    Should we have to guess ? you are here to get code help, put in the code you used, give examples , give a link to the site.

    So is there no way to truly do a custom CSS job?

    For you maybe, not for those who know how. What do you mean by custom css job?
    You can't get more custom than the custom.css in a custom theme...

  • KreiosKreios New
    edited July 2015

    No you shouldnt have to guess. The basics would be body, header, etc if you know it all worked normally. The CSS is fine for everything else except when i have it as the custom.css file for the theme. It works normally minified and etc. It, yet again, just does not work with my theme. Give me a moment to bring up another test enviroment and I will link it.

    Link to the css http://www.adonisgaming.com/css/custom.css

    As for custom css job, I really mean that custom. Not going in and transposing something like #noslider for another (lets just say its for the body tag) body or whatever it is in the 'default' css file that im trying to add it to.

  • R_JR_J Ex-Fanboy Munich Admin

    because my css file and the 'default' files classes arent the same names they dont work.

    So you've created some css rules not using the classes that Vanilla uses? Well, I'd bet you know enough css to know that you can only style an element, when you uses the correct selector.

    So is there no way to truly do a custom CSS job?

    Sure there is, but you are only free in the limits that css imposes on you. If you ignore the html, your css is close to useless.

  • KreiosKreios New
    edited July 2015

    Im not ignoring the HTML or CSS, The Template I made works fine the php, html, css, etc all works until I plug in the CSS to the custom.css file and place it in the theme. After that the css doesnt load on the html. You know, outside of garden the tags work where I place them, inside garden/vanilla the tags do not work. Simple as that. IE Body class=no-slider with the correct syntax works outside of vanilla but inside (Literally using the same CSS) it doesnt. No 'Well did you mispell, did you upload, did you name, etc' None of that. Literally a bloody copy paste from the originally CSS File to the custom.css file. Even when I troubleshooted it and just copied pasted my templates HTML to the default master the CSS still didnt work.

  • hgtonighthgtonight ∞ · New Moderator

    @Kreios Is the file being loaded at all?

    Most themes do not unload the default style.css that ships with Vanilla, so if you are theming without that file loaded, your selector specificity is probably getting overridden.

    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.

  • I do not believe either is being loaded honestly. Never went on that train of thought so thank you! Double Check and all I am getting is some inline css that is just a few basic classes with nothign really in them. Also Thank you for giving me a line to look down.

  • Sorry for the double post but update: If i make a default.master.php instead of a TPL it starts to load it all. I just apparently cant use smarty plugins it seems. Which in all honesty if fine to me.

  • So after going through with the Php master instead of TPL Im still having the CSS loading issues. Now I find that neither the Custom CSS or Style CSS seems to be loading up. Again this is my first real time with Vanilla any ideas?

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

    @Kreios

    It's hard to be certain, as this is not the normal experience.

    Mostly, people set up a custom theme, following this process:

    http://vanillawiki.homebrewforums.net/index.php/Themes

    and then add a custom.css file with the revleant changes in the design folder.

    I was pretty much a css novice when I first started with Vanilla, but managed to get it to work. (Just to show that usually, out of the box, it works fine.)

    Could you try setting the theme to Baseline, and using the CSSedit plugin to make some simple changes? http://vanillaforums.org/addon/cssedit-plugin

    Alternatively, or as well, you could try to set up a new test version of Vanilla.

    I realise this must be frustrating for you, but honestly, your experience is unusual.

    You could also try downloading the annotated css theme: http://vanillaforums.org/addon/annotatedcss2.1-theme to see if you can make some basic changes in that.

    It is worth persevering!

  • KreiosKreios New
    edited July 2015

    Kinda have to persevere. Its both a grade and an upgrade to my portfolio. I have the annotated and that basically will let me transpose some of my classes over to 'vanilla' classes which I honestly shouldn't have to do per the limited documentation they supply and what I've found on the forums. I am going to look at the CSSedit plug in but in all honesty I am only using this software because the internship I'm starting at in a couple of months uses it as well for some internal stuff and its a point on my experience there. If I end up having to transpose it all to a specific set up to make some varied code happy I'm just going to move onto another software till I have the time to sit down and break it all down as I normally do.

    The only issue I personally have atm with this software is that, as you stated, if you just make some edits on their CSS it all works fine but you 'cant' have your own. I know that it's trival but to me custom means just that. Nothin just about but the bare bones are stock and it's kind of a kick in the pants to people who do like I did and build a complete theme from ground up than cant bring it in without making massive edits.

  • KreiosKreios New
    edited July 2015

    Sorry for double post again but im outside of the edit window. I uploaded a copy of the bittersweet theme and applied my CSS to it as well as a base version of my HTML which is nothing but the base html and the one Asset Content Smarty tag and still no joy. The intital page shows but any of my other views dont have the CSS loaded to it.

    Also, now all of the css no matter what theme I use is edited....Awesome...

  • Sorry for another double/triple or whatever but I cant edit it. I brought up a brand new testing enviroment and not using custom.css but adding style.css to my design folder I was able to get this. Dont mind the side bar text, just using the side bar I did for my mates stream stuff. Where as im getting some CSS loading im not seeing my FA stuff nor most of pretty much everything else. It isnt applying the font tags i have nor is it applying anything to the Categories/all.php view that I have set up themed out with the html set up for the site.

  • BleistivtBleistivt Moderator
    edited July 2015

    The only issue I personally have atm with this software is that, as you stated, if you just make some edits on their CSS it all works fine but you 'cant' have your own. I know that it's trival but to me custom means just that. Nothin just about but the bare bones are stock and it's kind of a kick in the pants to people who do like I did and build a complete theme from ground up than cant bring it in without making massive edits.

    You do not get to choose your own class names with any forum-type, or blog software. Unless you modify the views HTML (which is not adviseable), a random stylesheet with random class names won't just work on any website. It's as simple as that.

    If you don't know about it, learn how to use the browser inspector...
    https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS

    ... and CSS specificity
    http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

  • Bleistivt, Please read above as well. I have the css completly set up and everything as an HTML Template that works 100%, I have the vanilla functions, views, etc pretty much done minus a few things here and there. When I try to load the CSS through vanilla it doesnt show or even load most of the way (See above screen shot where its half working). As for other software? Yes, Vbulletin, Invision, and a few of the other ones I have used in the past you can set up your own HTML Base (obviously with the scripting languages) and have you own customized CSS File as long as they are tied to the HTML Correctly, you know as it is period, it works. I have yet to have this much problems with custom CSS and HTML views with -any- other forum software. Seriously, Any. Even PHPbb which is pretty much crap, if it is even around still.

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP
    edited July 2015

    @Kreios

    The only reason I can see for you having such problems is that you are not doing things the Vanilla way, and the Vanilla way is remarkably straightforward.

    You started your OP by saying you had been 'working on a template'. Can you briefly explain what you did?

    Can you confirm that you copied the default view from /applications/dashboard/views/default.master.tpl to /themes/your_theme_name/views/default.master.tpl and edited that?

    Can you confirm that you created a custom.css in the your_theme_name design folder and made the changes there?

    Can you confrim that you were able to select your custom theme via the dashboard, and that it is shown as the theme selected in config.php?

    You are, of course, free to choose whatever software you like, but if you can't get Vanilla to do what you want, then that is because you haven't taken the steps needed to get it to do so.

  • @whu606 said:
    Kreios

    The only reason I can see for you having such problems is that you are not doing things the Vanilla way, and the Vanilla way is remarkably straightforward.

    You started your OP by saying you had been 'working on a template'. Can you briefly explain what you did?

    Can you confirm that you copied the default view from /applications/dashboard/views/default.master.tpl to /themes/your_theme_name/views/default.master.tpl and edited that?

    Can you confirm that you created a custom.css in the your_theme_name design folder and made the changes there?

    Can you confrim that you were able to select your custom theme via the dashboard, and that it is shown as the theme selected in config.php?

    You are, of course, free to choose whatever software you like, but if you can't get Vanilla to do what you want, then that is because you haven't taken the steps needed to get it to do so.

    I had an HTML Template that did half of what I wanted it to do, so I went from there and added more CSS for other things (Paralax, Modals, Forums, ETC) added the CSS For all the divs and areas I wanted to function the way I wanted and look the way I wanted. Once all that was done I started looking for a backend to drive it all. I have a Vbulletin License (couple of them actually for old clients when I did web design) and decided to go that route but wanted to try something new and decided on vanilla due to it being used for alot of stuff in the shop I'll be working in soon. Got the Vanilla software and started copying everything to do the theming per the documentation. Yes I copied the defaults and pulled everything required. Sat down and started editing the views to work with the HTML I had previously tweaked in my theme. Got all the functions and such working in the base template before adding my CSS. Once I added my css (As well as changing the class names on my HTML To pull from my custom.css instead of the default) none of the CSS would pull and when I investigated the output of it all found that my css wasnt loading period. I installed (total of 3 times now) a new test enviroment to test it in and found that it would pull the CSS just not load the classes unless they were the exact same as the ones in the original custom.css.

    As for the TPLs yes I edited them to reflect my base HTML (Header, Footer, etc) which pulls everything fine up to a point. Anything outside of the base page would not load any of the CSS period instead of just bits and pieces. IE
    If a div in the custom css used Discussion as a tag but I had the exact same css tag but named in Thread it would not work but if I renamed it Discussion it would work. Using the exact HTML and etc Discussion would work but Thread would not. That, of course, is just an example.

    As for the steps taken, I have. That's a portion of what is aggravating me, that I can not find out where the disconnect is. If I could find that it would be 'simple' fixes.

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

    @Kreios

    Sorry if this is a silly question (I did say I was no expert...), but do you really have to declare classes rather than id?

    If you take a look at my site, for example, www.whu606.com, and use a web inspector to look at the Categories link in the right hand panel, you'll see a custom Div id and CSS rule for 'expanderHead' as an example of a custom id and rule, which I used when I wanted to add in a code snippet.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    It works normally minified

    That is amazing, coz nothing works well while minified specially editing...

  • KreiosKreios New
    edited July 2015

    Sorry @whu606 I use ID's old habits I guess calling it classes. If you want I can supply you with all the sources I've been working with. Maybe you might find somethign different but at last look the css isnt working with the ID's either when put through the vanilla system. I dont know if something isnt calling it or what.

    PS. Hammers have no place in The Den ;)

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    What you can do to save time , is package your theme like the ones you can download here, and zip it up here and we can all look at it.

Sign In or Register to comment.