Forums

Font size and color in image slider: Why is this SO hard?

Permalink
Hi everyone,

I'm new to this platform and using the elemental theme to build a website. In the image slider I want the text over the picture to be a certain size and a certain color. The <font> tag does not work (deprecated) so I've gone to CSS <p style="color:white">
Social Media Photography
</p>

But it will not let me specify size. Every time I try to add a size attribute it just ignores it. If I use an <h2> it formats it in green, different font, size etc...

Why is this so hard? I just want large and in white.

This is driving me nuts. I really need to get beyond stuff like this. I've spent 2 hours on font size and color and nothing else. Why can't I just get what I want? This is crazy.

Thanks much

Richard
taymar
 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi Richard,

When you choose an <h2> in the formatting drop down of the text editor. The text on the page is displayed as an <h2> element, but the styling is controlled by the theme.
concrete5\application\files\cache\css\elemental\main.css
div.ccm-page .ccm-image-slider-container .ccm-image-slider-text h2 {
  color: #75ca2a;
  font-family: 'Titillium Web';
  font-size: 3.2em;
  font-weight: 200;
  margin-bottom: 5%;
}

I would override the styling using the Custom CSS option.
Settings> Design> Theme> Customize> Custom CSS

This would make an <h2> large and white.
div.ccm-page .ccm-image-slider-container .ccm-image-slider-text h2 {
  color: white;
  font-family: 'Titillium Web';
  font-size: 30px;
  margin-bottom: 5%;
}

If you want a different font, you can replace "font-family: 'Titillium Web';" with "font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;".
taymar replied on at Permalink Reply
taymar
Thank you so much!!

Richard