Treehouse: Grow your CSS skills. Land your dream job.

How do I install all this great stuff? – I’m still stuck!

  • # January 11, 2013 at 7:05 am

    It’s been a couple of months now that I’ve tried to find answers or instruction on how to install items like: ToolTips, buttons, sliders, tables using CSS (sets?) that I’ve downloaded. They come nicely packaged in a primary folder and include other folders: CSS, JS, Images, Fonts and some index.html documents…BUT, no instructions on how I would install them on my wordpressMU site’s pages.

    I’ve watch videos, joined forums, etc. but as helpful as so many have been, I still do not have a clear idea on how to do this. I would really appreciate any advice on getting this to happen. Thanks!

    # January 11, 2013 at 7:59 am

    Hi Bizolly.

    Your question is complicated to answer, since it often depends on you knowing a little about how to write your own webpages. The short answer is that these are generally not items you “install”. The CSS and JavaScript files you have downloaded are the ones you probably want to use, with the index.html documents giving an example of how to include them in your own code.

    You see, the HTML on your site is very likely to be different from that on other people’s site, since it is there to mark up your content. If a site has different content (or a different design), it will use different HTML. This is why you have to incorporate their code into your own site — it can’t often be done automatically.

    If you linked to your HTML pages and the stuff you want to include, it might be possible to give more specific advice.

    # January 11, 2013 at 8:03 am

    I imagine they’re themes? So you put them in wp-content –> themes

    Then you select them inside WordPress in theme management.

    # January 11, 2013 at 8:08 am

    > I imagine they’re themes? So you put them in wp-content –> themes

    Ooh, good point. I’d assumed bizolly was talking about stand-alone packages, like sliders, etc.

    # January 11, 2013 at 9:02 am

    I’m just guessing to be honest – the question is vague.

    # January 11, 2013 at 9:27 am

    @Bizolly, If you’re still using the Child Theme, you’ll put the js in the `/js/` in your child theme, and any css in `/css/` in your child theme..then [enqueue the scripts]( “”), and [the styles]( “”), then edit any page templates to add classes and id’s that your plugins may be using..

    # January 11, 2013 at 10:58 am

    Hi Everyone! Great of you to help me. I didn’t think I’d get an answer so quickly. And, Chris you are great to reiterate. The problem here is I’m an beginner. I don’t quite know how to: add classes and id’s to define these specific actions. These items come with documents inside folders that is the code.

    My child theme CSS is blank. I can create a folder for the JS and one for all the Images. I assume all of these folders will reside in my Child Theme.

    Now, I’ll have…lets say 5 of these items to install, each have their own set of folders (CSS, JS, Images, Fonts, Index.html documents) with content/code. Do I place ‘their’ folder inside my child theme folder(s) or do I place the documents from each of ‘their’ folders inside my child theme’s folders that I’ve created; i.e.: CSS, JS, Images, Font, etc.?

    Then, I assume I add code to my wordpress theme, where? In the header for all pages? What code do I place there? I want to use items on specific pages, not on all pages of my wordpressMU site.

    Andy, sorry I was vague…it isn’t a theme but: sliders, buttons, tooltips, tables, etc.

    The site I’m working on is:

    # January 11, 2013 at 11:18 am

    @Bizolly, OK bear with me…

    You have a childtheme..if it’s super bare bones, you’ll prob only have a functions.php and a style.css

    Say, one of the plugins you want to install is some flashy buttons..right? So, this plugin comes with an index.html, flashy-buttons.css, flashy-buttons.js, and maybe some image files…

    You’ll add an images directory to your child `/img/` for example..and you’ll put all those plugin files either a) directly in the img directory, or b) create a sub directory `/img/flashy-buttons/` and put them, create a js directory in your child theme, and put flashy-buttons.js there, NEXT, for the sake of having one CSS file, copy and paste the contents of flashy-buttons.css to your style.css..

    you MUST enqueue the script as I mentioned in the post above, so this is either already located in your childtheme functions.php, or you must write the enqueue yourself…

    now, in the plugins index.html, it will show you how it’s used..using the classes and ID’s in the example, you can either go through your js, and css files FOR THE PLUGIN, and change them to id’s and classes that your theme is already using, OR, you can start taking template files (by template files I mean page.php, index.php, single.php, header.php, footer.php, etc) from the Parent Theme, editing them by adding those classes and ID’s in, and saving them in your child theme, so now wordpress will use those templates, with your updated classes and ID’s rather than the Parent Theme’s templates..

    Go through the plugin’s css (now located in your style.css) and make sure any image references are going to the right location, and make sure your JS is being called properly, and you should be good to go..

    Repeat for the 3-4 other plugins that you’re interested in using.

    # January 11, 2013 at 11:24 am

    Thank you Chris, again. On a scale of 1 to 10, ten being a professional web developer and one being someone that doesn’t know anything about HTML, what skill level is this? The reason I ask is because I would rate my skill level in regards to experience/knowledge between a 4 or 5.

    # January 11, 2013 at 11:36 am

    @Bizolly, it’s certainly not a walk in the park…but practice makes perfect..who knows..after this, you may consider bumping yourself up to a 7 or 8 =)

    # January 11, 2013 at 11:42 am

    Ok! With that vote of confidence…I’m goin’ in! Cheers Chris! Awesome as always.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.