Announcement

Collapse
No announcement yet.

Basic CSS Styling within Colossus

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

    Basic CSS Styling within Colossus

    Hi again! (sorry... I've been spamming the forum),

    I need to format some non product pages (add headings, subheads, align/size images, etc.) with some basic stuff and I'm not sure where to find the right CSS files to update - or even if that's what I'm supposed to do.

    Thanks!
    Jim

    #2
    Hi Jim,

    If you are looking to add custom styles, those should be added in the "theme-styles.css" stylesheet. Other than that, you can use any of the classes included with the theme.
    Matt Zimmermann

    Miva Web Developer
    Alchemy Web Development
    https://www.alchemywebdev.com
    Site Development - Maintenance - Consultation

    Miva Certified Developer
    Miva Professional Developer

    https://www.dev4web.net | Twitter

    Comment


      #3
      I'm not sure if I need to add custom styles or not, but I'd do it here correct?
      Home > directory > subdomains > dev > httpdocs > mm5 > themes > colossus > ui > css > theme-styles.css
      (
      Is there a gui for editing CSS within Miva or do I just FTP to the file?)

      If I'm updating ones included in the theme I'd find them here?
      Home > directory > subdomains > dev > httpdocs > mm5 > themes > colossus > core > css


      Comment


        #4
        Hi Jim,

        There is no GUI for editing CSS within Miva, so you will have to do it via FTP. As for updating the core files, be careful there as that will affect the entire site.
        Matt Zimmermann

        Miva Web Developer
        Alchemy Web Development
        https://www.alchemywebdev.com
        Site Development - Maintenance - Consultation

        Miva Certified Developer
        Miva Professional Developer

        https://www.dev4web.net | Twitter

        Comment


          #5
          Is there any way to add CSS to a single page? When I try and add some simple code to my Partners page it messes up the rest of the site. Here's the code:

          Code:
           
          2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 * {margin: 0; padding: 0;} div { margin: 20px; } ul { list-style-type: none; width: 500px; } h3 { font: bold 20px/1.5 Helvetica, Verdana, sans-serif; } li img { float: left; margin: 0 15px 0 0; } li p { font: 200 12px/1.5 Georgia, Times New Roman, serif; } li { padding: 10px; overflow: auto; } li:hover { background: #eee; cursor: pointer; }


          I realize when I add a div ,for example, that means it's going to affect EVERY single div on the site. To make it specific I know there's a way, like div.partners I think? I was hoping someone could help me with the correct naming conventions or maybe just plop this code within the Partners page itself (probably not the best idea).

          Comment


            #6
            The safest way to add CSS to a single page is to use an inline style in the <head></head> section of the site.
            <style>
            CSS here
            </style>

            However, that defeats the whole purpose of CSS which is to make site styles consistant. Better is to locate a style you LIKE on the site and use your browsers Inspector to copy the CSS from there.

            What is wrong with just using <h1>, <h2>, <ul>, <li>, etc?
            Bruce Golub
            Phosphor Media - "Your Success is our Business"

            Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
            phosphormedia.com

            Comment


              #7
              Originally posted by Bruce - PhosphorMedia View Post
              The safest way to add CSS to a single page is to use an inline style in the &lt;head&gt;&lt;/head&gt; section of the site.
              What is wrong with just using &lt;h1&gt;, &lt;h2&gt;, &lt;ul&gt;, &lt;li&gt;, etc?
              I have a dozen non-miva pages (FAQs, About us, Partners, etc) that I want to design and format as nice as possible. Super basic styles like h1, h2, ul, etc are fine and I'm happy to use, but I need to align images with text nicely and I don't see that done anywhere. Here's a basic example of what I'm trying to do.


              basic-list.png
              ​​​​​​​

              Comment


                #8
                Hey, I found this for the Shadow's theme that shows examples of basic coding for this theme and this would be a big help for me!

                https://docs.miva.com/readytheme-shadows/

                Will these work for Colossus as well?

                Comment


                  #9
                  The Colossus documentation is here https://docs.miva.com/readytheme-colossus/index.html and the original Shadows v1 is here https://docs.miva.com/readytheme-shadows/v1/index.html
                  Matt Zimmermann

                  Miva Web Developer
                  Alchemy Web Development
                  https://www.alchemywebdev.com
                  Site Development - Maintenance - Consultation

                  Miva Certified Developer
                  Miva Professional Developer

                  https://www.dev4web.net | Twitter

                  Comment


                    #10
                    I need examples to see what's going on and the one I linked to had a ton which is fantastic. The Colossus documentation doesn't have any of the examples that both shadows and shadows v1 have. Will any of the coding from the original shadows examples work in Colossus?

                    Comment


                      #11
                      Yes, Colossus is based on Shadows v1 so all the classes used in Shadows v1 will work.
                      Matt Zimmermann

                      Miva Web Developer
                      Alchemy Web Development
                      https://www.alchemywebdev.com
                      Site Development - Maintenance - Consultation

                      Miva Certified Developer
                      Miva Professional Developer

                      https://www.dev4web.net | Twitter

                      Comment


                        #12
                        okay, then I'll start there, thanks Matt!

                        Comment


                          #13
                          I've tried some of the basic Shadows v1 CSS code from this page:
                          https://docs.miva.com/readytheme-sha...ts.html#layout

                          And it's not working.

                          HTML Code:
                          <div class="o-layout o-layout--wide">
                          <div class="o-layout__item">
                          <div><h4 class="c-heading-delta"><a href="/cultural-heritage.html">Cultural Heritage</a></h4>
                          <a href="/cultural-heritage.html"><img src="graphics/00000001/int_img_industry-culturalHeritage.jpg" alt="Cultural Heritage" width="200" height="200"></a>
                          <p>Imaging Science Associates' comprehensive suite of products and software are used by cultural heritage institutions worldwide including the world's largest library and the nation's attic in Washington D.C. We have created a simplified method to define, share, and test performance specifications ... <a href="/cultural-heritage.html">Read more</a></p>
                          </div>
                          </div>
                          <div class="o-layout__item">
                          <div><a href="/medical-and-scientific.html"><img src="/mm5/graphics/00000001/int_img_industry-medicalScientific.jpg" alt="Medical and Scientific" width="200" height="200"></a>
                          <h4 class="c-heading-delta"><a href="/medical-and-scientific.html">Medical & Scientific</a></h4>
                          <p>The smallest accurate target in the world, the <a href="/colorgauge-pico-target.html">ColorGauge Pico</a>, is appropriate for dental work as it is approximately the size of a tooth (12/32” high x 7/16” wide, 0.95 cm x 1.11 cm). Dental photography requires a small field of view, which necessitates using an appropriately sized target for accurate color rendering... <a href="/medical-and-scientific.html">Read more</a></p>
                          </div>
                          </div>
                          <div class="o-layout__item">
                          <div><a href="/3D.html"><img src="/mm5/graphics/00000001/int_img_industry-3D.jpg" alt="3D" width="200" height="200"></a>
                          <h4 class="c-heading-delta"><a href="/3D.html">3D Multi-Directional</a></h4>
                          <p>Image Science Associates is on the forefront of 3D targets. Our scientists will design and build custom solutions for your 3D camera calibration needs. Whether you are capturing with multiple cameras or using a multi-capture array we can provide the targets and software you require and scientific knowledge to enable your success in 3D capture... <a href="/3D.html">Read more</a></p>
                          </div>
                          </div>
                          </div>
                          Any idea why?

                          Comment


                            #14
                            Can you post a screen of what this looks like and what you are looking for?
                            Matt Zimmermann

                            Miva Web Developer
                            Alchemy Web Development
                            https://www.alchemywebdev.com
                            Site Development - Maintenance - Consultation

                            Miva Certified Developer
                            Miva Professional Developer

                            https://www.dev4web.net | Twitter

                            Comment


                              #15
                              I was hoping to have the content in three columns with spaced gutters between. When I use that code from above it looks like the screen shot that's attached.

                              Attached Files

                              Comment

                              Working...
                              X