Basic CSS Styling within Colossus

**Matt Zimmermann** · 03-16-22, 07:22 AM

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.

**jfazar** · 03-16-22, 06:17 PM

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

**Matt Zimmermann** · 03-17-22, 08:45 AM

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.

**jfazar** · 04-05-22, 04:45 PM

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:

 [TABLE]
[TR]
[TD][FONT=Verdana]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[/FONT][/TD]
 			[TD][FONT=Verdana]* {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;
			}[/FONT][/TD]
 		[/TR]
[/TABLE]
[FONT=Verdana][/FONT]

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).

**Bruce - PhosphorMedia** · 04-05-22, 04:56 PM

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?

**jfazar** · 04-05-22, 05:21 PM

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 <head></head> section of the site.
What is wrong with just using <h1>, <h2>, <ul>, <li>, 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

**jfazar** · 04-05-22, 06:08 PM

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?

**Matt Zimmermann** · 04-05-22, 06:15 PM

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

**jfazar** · 04-05-22, 07:14 PM

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?

**Matt Zimmermann** · 04-05-22, 07:15 PM

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

**jfazar** · 04-05-22, 07:21 PM

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

**jfazar** · 07-05-22, 02:38 PM

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?

**Matt Zimmermann** · 07-05-22, 02:43 PM

Can you post a screen of what this looks like and what you are looking for?

**jfazar** · 07-05-22, 03:06 PM

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

Basic CSS Styling within Colossus

Basic CSS Styling within Colossus

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment