0

I have been working on a Joomla site (latest versions of everything) for a while and i am now customising a page created with SP page builder. I have created the following html:

<div class="whats_on_summary">
<div class="whats_on_short">
<p>When</p>
<p>Where</p>
<p>Who</p>
</div>
<div class="whats_on_icon">
<p>{zen-calendar}{/zen-calendar}</p>
<p>{zen-map-marker}{/zen-map-marker}</p>
<p>{zen-user}{/zen-user}</p>
</div>
</div>

With the following CSS:

/****** Whats on summary page ********/
.whats_on_summary {
    width:100%;
    display:inline-block;
}
.whats_on_short {
    width: 20%;
  float: left;
}

To float the zen markers next to the text. This works in codepen, but when I assign the CSS to custom.css the changes are not showing (the custom.css is being loaded and is being used in various other areas of the site successfully. If i add the CSS in chrome dev tools again it works, as does if i select the complete css selector:

#sp-page-builder > div > section:nth-child(1) > div > div:nth-child(1) > div > div.sppb-addon.sppb-addon-text-block.sppb-text-left > div > div

and

#sp-page-builder > div > section:nth-child(1) > div > div:nth-child(1) > div > div.sppb-addon.sppb-addon-text-block.sppb-text-left > div > div > div.whats_on_short

The above 2 lines are messy, and only apply to an individual 'whats_on_#' section, whereby i have multiple. Apart from having to code each section individually, which doesn't help when additional sections get added (which is planned), is there anything i can do? This is very odd, I must be missing something.

Thank you for your advise, Donna

  • It is always a daunting task to visualize CSS problems just by looking to miniature excerpt of it. I would first recommend providing a URL to the site in question, then advise to using !important declaration, and at last but not least, to try avoiding multiple classes and reducing complexity of selectors in order to improve their specificity. – Mikan Aug 23 '16 at 10:10
  • 1
    @Mikan Thanks Mikan, i have sorted this now. I used inline styles instead, not my preference but it does the trick. – Dtorr1981 Aug 24 '16 at 10:37
0

Have you tried validating your css using a tool such as the W3C CSS Validator?

Your comment "It is only new additions to the file that are not showing." suggests that it may be some bad code - broken stylesheets will usually render up to the place they break.

Also, have you used the dev tools to see what's being applied to the element to make sure it's not just another style whose inheritance means it's styles are taking priority and overriding yours.

I agree with the other answer that inline styles are not a great idea.

  • Hi Richard, Thanks for your answer - If i remember rightly it was an error in the CSS file. This was identified and the changes were fixed :) – Dtorr1981 Mar 23 '17 at 11:38
0

It sounds like it is because you are not loading your custom css link in the head area as the last css file loaded.

I do not suggest using inline as it will bloat file sizes if you plan on using it as a class opposed to a divs id.

  • The custom.css is working fine in other areas of the site. I can edit existing styles in the custom.css but newly added style are not showing. Its very odd. I've just tried to create a custom style in an article with class 'standout' and created the css .standout {} but this does not load. The custom file is part of the template. – Dtorr1981 Aug 25 '16 at 13:15
  • Do you have a weblink that can be viewed? – norcal johnny Aug 26 '16 at 6:25
  • I have passed this over to the developer of the template, very oddly any existing styles in the custom.css file can be modified and the changes appear on the front end. It is only new additions to the file that are not showing. We had a corruption of the template file, so i'm thinking it is related to this. – Dtorr1981 Aug 26 '16 at 8:30
0

I used inline styles to rectify this:

<div class="whats_on_summary">
<div class="whats_on_short" style="width: 15%; float: left;">
<p>When</p>
<p>Where</p>
<p>Who</p>
</div>
<div class="whats_on_icon">
<p>{zen-calendar}{/zen-calendar}</p>
<p>{zen-map-marker}{/zen-map-marker}</p>
<p>{zen-user}{/zen-user}</p>
</div>
</div>

As an update to this, it was indeed a CSS validation issue - there was an error in the custom.css. I was unaware that an error in the css would mean any css after the error would not render.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.