Not all styles defined in a css are applied

[Esperanza249659241eot]

Hello community

In my RH project I am using a css where I defined the styles that should be applied to all the pages, but after generating the output I check that not all of them are being applied. These are the steps I followed:

1. I built a css file that I added to the assets/css folder of my project.
2. I added the needed images to the assest/images folder of my project.
3. I setup the master page of my project to use this css file.
4. I generated the documentation using Frameless output preset.
5. I found that some styles, such as font or font size were applied, but others like h1 title were not.

What can I check? Is there any test I can do to find where the error is in the css?

Thanks in advance

[Peter Grainge]

Typically you would set up each topic to use the CSS so that you can see the appearance as you work. Look in Reports > Topic List to make sure the CSS is applied to all topics. 

Have you done that and does everything look OK in Author view?

You don't have to set a master page in the preset unless you want to override what is in the topics.

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

[Amebr]

What do you mean by "h1 title"? Title isn't a css property like font or font-size, which were your other examples.

Do you mean you created a style called "h1.title"? If yes, did you then apply that "h1.title" style to the applicable paragraphs in your topics? In this scenario it wouldn't be enough to apply "h1" to the paragraph, it would need to specifically be "h1.title".

[Esperanza249659241eot]

Thank you, @Peter Grainge  and @Amebr.

Let me explain better, in the css file I added a header_title class as shown below:

.RH-LAYOUT-CENTERPANEL-topic-box div.header_title,
.RH-LAYOUT-FOOTER-container div.header_title {
width: 100%;
max-width: 1200px;
background: url(../images/MOODLE_FONDO_TITLE_02.png) center top no-repeat #003466;
background-size: cover;
padding: 140px 0 20px 0;
background-image: url('');
}

And what I apply to the topic is:

<div class="header_title">
<h1>Examples</h1>

</div>

After generating the output, I check that in the topic title the image configured in the css file is not shown.

Thanks again for your help.

[Amebr]

.RH-LAYOUT-CENTERPANEL-topic-box div.header_title,
.RH-LAYOUT-FOOTER-container div.header_title {
width: 100%;
max-width: 1200px;
background: url(../images/MOODLE_FONDO_TITLE_02.png) center top no-repeat #003466;
background-size: cover;
padding: 140px 0 20px 0;
background-image: url('');
}

And what I apply to the topic is:

<div class="header_title">
<h1>Examples</h1>

</div>

By @Esperanza249659241eot

I think this line "background-image: url('');" is resetting your image to nothing, so try deleting that line and see if it fixes it.

[Amebr · Accepted solution]

You might also need to add quotes around the image path. I haven't often used background images, so I'm not 100% certain. See the giant red quotes in the example below.

background: url('../images/MOODLE_FONDO_TITLE_02.png') center top no-repeat #003466;