I have three ads A, B, C and three categories named a, b, c. How to display ad A on a, ad B on b and ad C on C? I can’t find this in the ad plugin settings. Any ideas? Thank you.
1 Like
What I did was use house ads that include all three ads with CSS that can then be applied in each category to hide the ads from the other categories.
2 Likes
Thank you @pfaffman. I don’t understand your solution. Are you talking about:
- Create three different ads with the different class names (.first-ad .second-ad, .third-ad) and set them visible on all three categories.
- Custom the categories CSS style (I’m not sure how to do this) to hide some ad depends on their class name (If I don’t want to show the second ad on category A. I would add .second-ad {disable: none} to the CSS style).
Yes. Something like that. I think I had it hidden by default and then override it on the category that it sold be displayed in. I’m not good enough at css to describe it more eloquently, but it seems that your understanding is now very close to mine. If not better.
You may be “better off” doing this with Javascript, or maybe jQuery if you like.
For example, the class in a topic shows the name of the category like this example:
<span class="category-name">UNIX for Beginners Questions</span>
So, in a script for the topic page, you would select the text for the class “category-name” and then inject your ad tag into the div element of your choice based on your category text.
This is, in my view, a better method that hiding and unhiding div elements of ad code tags based only on CSS.
This is also very easy to implement for anyone who has basic Javascript or jQuery skills
You select the inner text of the span element based on the class of the category span. You then match that inner text against your category list and insert your ad code into the DOM element of your choice on that page based on the category.
It’s pretty simple for anyone with basic Javascript skills to write this code and it’s also probably the best way to do what you are wanting to do. @Windsooon
2 Likes
Thank you for your suggestion, it’s very helpful @neounix. I do have some experience in Javascript. However, after I set up the ads using CSS. I don’t know where to put my Javascript code. Should I
- Put it in my server (change the code in the discourse code base)
- Put it somewhere in the admin panel
- Use an extra plugin or a Theme Component.
Thank you
You can add your code in the footer (or above the end body tag) in your themes or you can add it in the footer (or above the end body tag) in a theme component and apply that to your themes. The choice is yours.
The DOM selectors will be different based on the page where you are displaying the ads.
Actually, you should keep the bulk of the code in your favorite web site and just add the link to load the Javascript into your theme or theme component, or at least that is how I normally do these things.
Personally, I find jQuery works better for DOM selection in themes, but I’m sure that is because I have more experience with jQuery selectors compared to plain vanilla JS selectors.
2 Likes
I got it! Thank you so much.
Welcome @Windsooon
That’s what Javascript was designed to do, manipulate the DOM, including inserting elements into the DOM, so you are on the right path! 
Enjoy!!!
1 Like
Is there anyone who would charge me to ‘do this for me’?? I need Ads per Category set up for about 9 categories.
1 Like
Hi Mark,
Did you get anywhere with this? I must be honest my understanding of CSS and Java are very limited and we are getting by mainly through the custom theme components available to us.
We would also like to use the “AD function” to simply add custom text to our categories but cant find a way to have it only appear on a specific category
If you’re looking to add some text to your categories as a header rather than display ads, we have the Category Banners theme component which sounds like it may be useful?
1 Like