• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

Not all styles defined in a css are applied

Community Beginner ,
Oct 31, 2022 Oct 31, 2022

Copy link to clipboard

Copied

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

Views

58

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Nov 02, 2022 Nov 02, 2022

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;

Likes

Translate

Translate
Community Expert ,
Oct 31, 2022 Oct 31, 2022

Copy link to clipboard

Copied

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.

 

Help others by clicking Correct Answer or Like if helpful. Found your answer elsewhere? Share it here.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 31, 2022 Oct 31, 2022

Copy link to clipboard

Copied

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

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 02, 2022 Nov 02, 2022

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 02, 2022 Nov 02, 2022

Copy link to clipboard

Copied

quote

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 02, 2022 Nov 02, 2022

Copy link to clipboard

Copied

LATEST

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;

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation
Download Adobe RoboHelp