Forums

Hello! 😀

First of all thank you for this component! it's really cool! I just have a styling question, all the headings are in blue now and I would like to change them to match my site's colors, I tried to find this color on forum.css but couldn't find it, where can I change it?

I see a Global CSS option on the back-end but I have not enough CSS knowledge to write something here, can you help me out!

Thank you, my URL is http://synchronicityarkive.com/forum

Hi iktan,

You can write this in the Global CSS:

.chronoforums{color:#000 !important;}

You can change the color code to your liking!

Regards,
Max

Awsome! Thank you so much🙂

Hello again! I used the code you sent me on Global CSS but it didn't work😟 is there any other way to change the blue headings? Thanks!

Nope😟 but is ok, since I have some blue icons there it looks good! Thank you Max🙂

But I tried it myself on your page and it worked!

Hi Max! So you think maybe it's my cache? I applied the code to Settings - Style - Global CSS but still se it blue, can I send you admin access on a PM? maybe I'm doing something wrong😛

Thanks again for your support! I already submitted a review on JED🙂

Hi iktan,

I just checked your page, you have

.chronoforums{color:#000 !important;}

please try to use my latest code:

.chronoforums a{color:#000 !important;}

Or clear the cache if you have already made the change!

And thanks for the review!🙂

Regards,
Max

Thanks Max! I had added the first code you gave me to forum.css! that's why it wasn't woking, it looks great now, thanks again🙂

Hi Max,
Exactly where is the css saved which you enter through the "Global CSS" field under Settings > Style?

I got the restyling working through making my own theme and selecting that one in the General settings, but it might be overdoing it. I have however great difficulties to get any CSS code through which I write in the "Global CSS" field. So now I feel quite stupid who managed to do the difficult part but not the simple way. I have cleared my cache both on the browser and server...

Kind Regards
Pierre

Hi Pierre,

The global CSS is loaded directly on the page after the forum CSS file has been loaded, your global CSS may need the "!important" rule, and it may need to be specific, you can inspect the element using FireBug or Chrome to check the loaded rules and the abandoned ones and change them live.

Regards,
Max

Hi Max,
I'm quite familiar with CSS and unique identifiers. And I do use both Chrome Inspect Element and Firebug. I have written my own theme and when I duplicated that and loaded it as a theme in your component (as described in https://www.chronoengine.com/forums/posts/f30/t96924/bootstrap-override-and-component-consistency.html) it worked, but I think I would like to avoid this since it is loading bootstrap an my own template twice. Now I was looking into how much I had to overwrite in this way, but I cannot simply get any of the declarations written in "Global CSS" to stick. I have tried on numerous identifiers everything from generic a, h1-h6 and specific .chronoforums and .gbs3 but nothing works.

I tried of course to test it inline with inspect element and changing color and background color or display none for example on the fly, and that works of course, but not when I write in Global CSS. It's not like it is overwritten in the cascading, it is not there at all. That's way I was asking for where this is saved so I could look into this. Is there some magic in the background loadig these declarations? Anything with the cegcore library which might be disabled? I'm out of ideas...

Thanks a lot for a great component. I just need to get the styling right, and maybe that is to do a theme of my own.

Kind Regards
Pierre

Please try a rule like this:

.gbs3 .chronoforums a{color:#ff0000 !important;}

Does this work in the global CSS ? please remember to clear the website cache if its on (check the purge cache page anyway)

Regards,
Max

Hi Max,
I'm sorry to say,but there is no trace of these declarations when I inspect any "a" tag. So it's not just overwritten, it's not there. At the moment it's the \libraries\cegcore\assets\bootstrap\css\bootstrap.css which defines the color. I also see my own declaration frommy ordinary site template, but that one is overruled. I have cleared both the joomla cache (purge expired cache as well) and my webbrowser. Anything else?

I also tried to test with the default protostar template, just to see that there was nothing strange with my own template. But that gave the exact same behavior. There might be some kind of conflict or load problem, but I do not really know where to look to troubleshoot that.

Kind Regards
Pierre

If the rule above is currently in your global CSS box then please post a link to your forums page and I will check it here!

Regards,
Max

Hi,
The forum is not on a live site since I have not completed the testing. After some break since the summer I'm back at this again.

What I now did was to test this on a completely new site, with only the Protostar template, nothing fancy. I really do not understand, I can't get anything in the Global CSS box under Board Settings >> Style to show. But if I take your example code for instance and put it in \components\com_chronoforums\chronoforums\styles\prosilver\theme\forum.css then it works of course.

So it seems like the easiest thing now is just to duplicate the theme and then write my own additions. But it seems like a stupid way to do it and not the best for future upgrades.

I can also add the code directly to the Protostar template and it works.

Please advice!

Kind Regards
Pierre

Hi Pierre,

You may try to use the "!important" rule for CSS in the global CSS, that may help!

Adding your own theme is also fine, this will not be affected by future upgrades, since you will give your theme a different name, and it will have its own folder.

Regards,
Max