Skip to main content
E
Esperanza249659241eot
Inspiring
October 31, 2022
Answered

Not all styles defined in a css are applied

  • October 31, 2022
  • 2 replies
  • 260 views

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

    This topic has been closed for replies.
    Correct answer Amebr
    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.


    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;

    2 replies

    A
    Community Expert
    AmebrCommunity Expert
    Community Expert
    October 31, 2022

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

     

     

    E
    Esperanza249659241eotAuthor
    Inspiring
    November 2, 2022

    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.

    A
    Community Expert
    AmebrCommunity Expert
    Community Expert
    November 2, 2022
    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.

    Peter Grainge
    Community Expert
    Peter GraingeCommunity Expert
    Community Expert
    October 31, 2022

    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.

     

    Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices