Announcement

Collapse
No announcement yet.

Snippets + Video: Colored Info-/Service-Boxes

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Snippets + Video: Colored Info-/Service-Boxes

    Dynamik Tutorial

    Hi, community!
    Got something to share today, and hopefully others will join in soon. It would be great if this community could share some ideas, snippets, screencasts... no matter how minor (or not) !

    I´ve created a Pen on Codepen with HTML and CSS for colored Info-/Service-Boxes with or without border and spiced it up a bit with hover effects.
    Live sample: http://sg-layout.com/chameleon/
    Codepen: http://codepen.io/SiGa/pen/anGxq (fork and improve if you feel like - don´t forget to share here!)
    You can change CSS or HTML directly in the Pen (nice playground), see how it looks like - then copy and implement it however you need it. Add an icon font and it´s even more fancy!
    Note that the CSS3 effects will not work in older browsers, but the rest will, and they are also responsive. Also beware if you use fat borders - will work in modern browsers but not in older ones as the CSS3 rule that takes care for the borders to stay inside the boxes won´t work. Always test carefully for production sites - as always.

    The video will explain what it´s about and how to use it. Please excuse my English, I´m not a native speaker and have done my best - we got an awesome ...ahm... aweful dialect here in my part of Austria but I´ve tried to leave it out as much as possible... LOL (But compare me to Arnie and I think I should win... hehehe)
    http://youtu.be/epWeZpOVtps

    Attached Files
    Colored info-boxes
    Last edited by SiGa; 08-31-2014, 10:16 AM.

  • #2
    Cool boxes and great English!

    Comment


    • SiGa
      SiGa commented
      Editing a comment
      Now this is my official knightly accolade! Thanks!

  • #3
    Thank you so much - this looks really useful & as often happens, I really need this for a site at the moment...

    Update: I just setup a new test site on my local machine, imported the Chameleon Skin.
    Then worked through adding the three service boxes & all worked perfectly.
    I just made a few style changes (the hover colour was too dark, so made it a dark grey - I made the whole box be the link (taking away the buttons!) and removed the transform/scale effects (not a bit fan of them!).
    Very happy

    Thanks again SiGa

    Cheers, Dave
    Last edited by daveporter; 12-10-2013, 04:13 PM.

    Comment


    • SiGa
      SiGa commented
      Editing a comment
      Glad to hear it´s of use!

  • #4
    Thanks, Dave, for reporting back - and sure, use the colors you prefer or meet the styling of your layout, those were just a sample.
    Yeah, the effects are a matter of taste and it also depends on the kind of site you build. Some might love them, some might drop them - however it fits. I just thought dropping something is always easier than adding it later.

    Just wanted to add this for others: The boxes are not related to the Chameleon skin of course, you can use them on any Genesis site (and if you use them without the Genesis column classes, they will most likely work in other grid layouts/frameworks/themes, too, because they adjust their size to the parent container).
    I just used Chameleon as a showcase site as it was already up (hence the colors, btw)

    Comment


    • #5
      Very cool
      Thank you

      Comment


      • SiGa
        SiGa commented
        Editing a comment
        Glad you like it!

    • #6
      SiGa,

      Thank you so much!!!

      Comment


      • SiGa
        SiGa commented
        Editing a comment
        Thanks for the thanks - much appreciated!

    • #7
      Thanks for the skin - very nice!!
      I have a bit of a newbie question. The CodePen site looks really cool but ….
      I know where to put the css code - no problem there but how/where (exactly) do I add the html? And for others the JS?
      I didn't see a tutorial for those of us starting out.
      Thanks for the share and any help!!

      Comment


      • #8
        Hi, SandraW! This thread here isn´t really about the skin (it has it´s own thread)....

        Now I´m not sure if your question is about the boxes (where to put the HTML and CSS is covered in the video which is linked above, and there is no JS?) or about the skin (there is an installation guide on the demo site).

        For questions about the skin, please choose the skin thread (after reading the Docs). Thank you!

        Comment


        • #9
          fwiw. the info. boxes on the chamelon site handle differently than the codepen Demo.

          The 3 info. boxes on the Chameleon site respond to layer one on top of other. on Codepen they respond to side-by-side @ 32% screen width.

          My vote goes for the Chameleon Site behavior. And, thank you for the code. V. useful.

          Comment


          • SiGa
            SiGa commented
            Editing a comment
            The reason is simple: I (could have but) didn´t copy over all the media queries from Genesis to Codepen, that would have bloated the code and maybe it would have been confusing. As soon as you port the HTML to Genesis/DWB, the boxes will benefit from the Genesis column classes media query styles in place and act responsive. So the HTML/CSS code on Chameleon is exactly the same, just that Genesis "works in background" there.
            Last edited by SiGa; 05-20-2014, 03:48 PM.

        • #10
          Re: "..As soon as you port the HTML to Genesis/DWB, the boxes will benefit from the Genesis column classes media query styles in place..."
          In my case, apparently not.

          So I need to find the correct media query then?
          Well, thank you SiGa that's a huge help. At least I won't spend time poring over the other .css elements.
          I tried media queries for hours yesterday, couldn't seem to nail it tho'.
          I thought this alone would do it : .one-third { float: none; width: 99%; } but, no happy
          Last edited by Anakyst; 05-20-2014, 04:16 PM.

          Comment


          • #11
            Thanks for sharing!

            Comment


            • #12
              Very Nice
              Thanks

              Comment


              • #13
                Hello together,

                Happy New Year :-)

                I'll try to implement this boxes in my DWB-Homepage...
                ...I've got the colum and text, but without any style like color, border and so on.

                I copied the CSS in the Dynamic Custom CSS and the HTML directly in the page and it looks like this:

                /*
                <div class="one-fourth first">
                <div class="box">
                <div class="box-inner">
                <h2>Service</h2>
                <p>Text text text<p>

                <a class="button" title="Read more" href="your-URL-here">Read more</a>

                </div>
                </div>
                </div>
                */

                I controlled the page with Firebug but I can't find any Custom CSS like .box; a.button and so on.

                It looks like this, when I check e.g. the div class="box-inner"

                /*
                *::-moz-selection {
                background-color: #0d72c7;
                color: #ffffff;
                }
                body {
                font-size: 16px;
                line-height: 1.625;
                }
                html {
                font-size: 62.5%;
                }
                html {
                font-family: sans-serif;
                }
                */

                The time before and at the fist tests I have run different plugins like:

                Genesis Easy Columns; Column Shortcodes, Standout Color Boxes and Buttons...

                Have anyone a idea, what seems to be the trouble?

                Sorry for my english, my bavarian is much better :-)

                Regards
                Johann

                Comment


                • SiGa
                  SiGa commented
                  Editing a comment
                  Did you watch the video? You didn´t comment your code on your actual page (select your code, click on "A" in the editor here and select the code button for code)?
                  Last edited by SiGa; 01-04-2015, 09:49 PM.

              • #14
                Maybe the below will help?

                In my case i used featureBox and featurBox-inner where you would like to box and box-inner.

                Comment


                • #15
                  Thank you for the fast support

                  @SiGa
                  I wrote the CSS in the Dynamic Custom Optionns (CSS) and other code there work very well.

                  @Anakyst
                  I set in front of all box, box-inner and so on "info" but I have got the same results

                  I copy all the code and a screenshot of firebug in a pdf and hope, that anyone can help me and I can use this nice boxes.

                  Regards
                  Johann

                  Comment


                  • SiGa
                    SiGa commented
                    Editing a comment
                    First try to use exactly the HTML and CSS from Codepen without changing it (worked on many other sites). There is no pdf here as far as I can see, but anyway it´s always hard to tell what´s going wrong when you can´t provide a URL so we could examine HTML and CSS on your actual page....
                    Last edited by SiGa; 01-04-2015, 09:50 PM.
                Working...
                X