Announcement

**ids** · 03-01-17, 01:43 PM

FWIW, I think this is a CSS issue. There are many ways to solve this issue in Bootstrap. With the way the ReadyThemes work now, My suggestion is to create an additional Stylesheet that isn't part of the distribution. Add in the classes that are used if these will be global type of changes. Or, create new classes that adjust or spacing needs and add to the classes to the templates where needed.

The nice thing about using Bootstrap is there are numerous HOW TOS available in the Google machine beyond the Miva Forum. So I think your font question will be easily answered there, as well as changing colors for whatever you want to change.

Scott

**razertip** · 03-01-17, 02:51 PM

The CSS files are can be found here: httpdocs/mm5/themes/base/ The CSS files you want to look at are styles, default and readytheme.

As Scot said, create a new CSS file and add that below all the other CSS files.

**Miss Kate** · 03-06-17, 08:18 PM

I answered my previous post myself. Once I sat & thought about it, I figured it out.

**lesliekirk** · 03-07-17, 04:57 AM

Awesome!

**Miss Kate** · 03-09-17, 06:48 PM

Moved question & started new topic but feel free to answer question here.

New question. I've been trying to get this to work for hours now. Here is some of the Content code I've altered on the SFNT page.


<div class="promo">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="pbox image">
<div>
<mvt:item name="readytheme" param="image( 'promo_1' )" />
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="pbox image">
<div>
<mvt:item name="readytheme" param="image( 'promo_2' )" />
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="row">

It works great but I want to add the category names across each image like what is displayed on the Category page of the Storyteller theme. I was on the W3 CSS website tutorial page showing how to do this, but I'm not sure where the code I want to use goes in each of the <div class="pbox image"> sections.

The text I want to use over image with 'promo_1' is Handcrafted Albums which I want to center vertically & horizontally.

I don't know which CSS file from the Ready Theme I am supposed to use to do this. I can see what they used below (bolded & enlarged) but not sure where to stick it or name it within my Content section for each promo image.

The CSS code C3 uses to do this is:

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/lib/w3.css">
<body>

<div class="w3-container">
<h2>Image Text</h2>
<p>Position content inside an image with the w3-display-<em>classes</em> - Note that we have added the w3-container class to get more padding:</p>

<div class="w3-display-container w3-text-white">
<img src="img_lights.jpg" alt="Lights" style="width:100%">
<div class="w3-display-topleft w3-container"><p>Top Left</p></div>
<div class="w3-display-topright w3-container"><p>Top Right</p></div>
<div class="w3-display-bottomleft w3-container"><p>Bottom Left</p></div>
<div class="w3-display-bottomright w3-container"><p>Bottom Right</p></div>
<div class="w3-display-left w3-container"><p>Left</p></div>
<div class="w3-display-right w3-container"><p>Right</p></div>
<div class="w3-display-middle w3-large">Middle</div>
<div class="w3-display-topmiddle w3-container"><p>Top Middle</p></div>
<div class="w3-display-bottommiddle w3-container"><p>Bottom Middle</p></div>
</div>

</div>

</body>
</html>

**Matt Zimmermann** · 03-11-17, 11:50 AM

If you are referring to how the name is listed here, http://storyteller-readytheme.mivame...ategories.html, the text element is positioned absolutely and given a higher z-index. As for where to put the styles, it is recommend you use a separate stylesheet as Scott mentioned earlier.

**Miss Kate** · 03-11-17, 07:05 PM

Thanks Matt. That html page is exactly what I needed for the code.

Announcement

New to ReadyThemes

New to ReadyThemes

Comment

Comment

Comment

Comment

Comment

Comment

Comment