0

I have some custom CSS I'd like to add to my template's user.css file. It's CSS that is supposed to be applied to all of my newsletter articles. There's a lot of them. So, I know how to apply CSS to specific page IDs for example, but that would mean I'd end up with tons of code. I'm wondering then if I can apply the CSS to all URLs starting in https://mysite.com/news-blog/newsletters.

Is this possible?

Thanks so much. I've searched the internet a bit but couldn't find any answers to this.

5
  • 1
    that's exactly what the css does it apply styles to multiple/all elements that contain styles for. But you need to target your elements with classes and actually being somewhat consistent with your markup.
    – FFrewin
    Jan 31, 2017 at 20:37
  • So, you're saying I should add a special class to the newsletter articles? I understand that. But what I'm asking is if you can apply CSS to all articles that have the URL starting in mysite.com/news-blog/newsletters. Jan 31, 2017 at 21:06
  • Please see my answer below
    – Alexandr
    Jan 31, 2017 at 21:15
  • It's not clear if what you want is to target certain elements with your css, or load a specific css file on some pages.
    – FFrewin
    Jan 31, 2017 at 22:32
  • The answer is "NO." CSS does not target URLs--it targets page elements. The answers below should solve your issue if implemented correctly. Feb 1, 2017 at 17:20

3 Answers 3

0

It's not clear if what you want is to target certain elements with your css, or only load a specific css file on some pages (the newsletter ones).

Both are possible, but first let's make something clear.
With CSS you can apply the same style(s) from a single css file, to many elements, on as many as you want pages. The more important condition is to target your elements properly and for this it's recommended to be consistent with how you use the class attributes in your markup.
The best practice is to use the class attributes instead of the id to style your html.

I don't know how your newsletter articles are structured/built, nor I can expand too much on delivering an HTML/CSS tutorial here, but if for example each of your newsletter page/article has a wrapper div element with a unique ID, and you try to bind your styles on that ID, then this isn't going to work.

Well.. it's late here and I feel tired same time that I started thinking all the possible different options depending on different use-cases - I think your question is too broad. So maybe either send a link to your website/newsletter pages, or add more details to narrow down the use-cases, so to get a more specific answer.

1

Perhaps create a new file called newsletter.css, add your code in there, then put it in the folowing directory:

templates/YOUR_TEMPLATE/css/newsletter.css

Then, in you template's index.php file, near the top, you want to add the following PHP:

if (strpos(JUri::current(),'/news-blog/newsletters') !== false)
{
    $doc = JFactory::getDocument();
    $doc->addStyleSheetVersion($this->baseurl . '/templates/' . $this->template . '/css/newsletter.css');
}

This will only import the CSS file on your desired pages.

0

Try something like

<body class="site <?= (strpos(JUri::current(),'/news-blog/newsletters')!==false)?'newsletter-page':'' ?>">

That should do it. The you can simple target the .newsletter-page

2
  • Thank you! This doesn't quite look like CSS. Is it? Where would I put the code you provided? Jan 31, 2017 at 22:02
  • Use it at /templates/you-template/index.php - this is the php code that will add specific class to the body
    – Alexandr
    Jan 31, 2017 at 23:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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