3

I am new to Joomla and I want to develop an article in joomla with several divisions in it like we dividing a normal HTML page by adding tags. I tried to add some CSS code to the article with the help of sourcerer, but it didn't work. Need a better solution than this. I also tried with the Add custom css extension of joomla, but no progress. Following images are the CSS file and the article code of joomla.

CSS file CSS file

Joomla article code Joomla article code

Output Output

1
  • 1
    Please show your coding attempt. Context is a helpful thing in questions. Perhaps a screenshot of your current output, then scribble on it with your preferred image editing program to show us exactly what change in appearance you require. Dec 2, 2018 at 19:31

2 Answers 2

2

You can place all of your custom css definitions in yourjoomla/templates/yourtemplate/css folder if you create a custom.css or user.css file in this folder. Since this does not always work with every templates, then you can use a free plugin to load your custom css codes/style:

https://extensions.joomla.org/extension/add-custom-css/

This way you can reuse your 'special' div class styles in other articles too and you do not have to define div styles article by article...

And I really forgot to mention that you need to use for example CodeMirror editor in your Joomla and you can edit the articles in full html mode in that case, which you can set at Global configuration->Default Editor->Editor-CodeMirror . And that way together with the above styling solution or with inline styling you can create any kind of html pages/articles. (I am sorry for leaving out this important part from my answer earlier).

Very important in using this css loading plugin: you have to put this plugin at the end of the plugin order in the Plug-in Manager.

Results of my test of the above:

My article html:

<div class="col">
  <div class="coll_1">
    <p>
      This is col 1
    </p>
  </div>
  <div class="coll_2">
    <p>
      This is col 2
    </p>
  </div>
</div>

my short css in custom.css file:

.coll_1 {
  width: 100px;
  height: 50px;
  background-color: red;
}

.coll_2 {
  width: 200px;
  height:50px;
  background-color: blue;
}

And my visual result in the article in Joomla frontend:

custom css loading in Joomla with add custom css plugin

So it works without a problem.

But making the whole subject much more simple: if you use CodeMirror as your default editor in Joomla, then you actually do not need the Add Custom CSS Plugin for styling your articles. Using CodeMirror editor, you can just place your inline css style within <style> tags in the article, save the article, and you will have the same result (a styled article), so just paste the whole thing in one in the article and you will have that.

So then your article should just look like this:

<div class="col">
  <div class="coll_1">
    <p>
      This is col 1
    </p>
  </div>
  <div class="coll_2">
    <p>
      This is col 2
    </p>
  </div>
</div>

<style>
.coll_1 {
  width: 100px;
  height: 50px;
  background-color: red;
}

.coll_2 {
  width: 200px;
  height:50px;
  background-color: blue;
}
</style>

And finally: you can even import/load bootstrap inline with using CodeMirror Editor in Joomla if it's not loaded in default in your page. You can load bootstrap in an 'empty' module if it's not loaded and you can use bootstrap styling too as you want. I mostly use uikit library in layouts and styling.

So if you just copy and paste this code in your article you get 3 columns divs in the article, using bootstrap (this is just an example, not how you should load bootstrap for long term):

<div class="col">
  <div class="coll_1">
    <p>
      This is row1 1
    </p>
  </div>
  <div class="coll_2">
    <p>
      This is row2 2
    </p>
  </div>
  <div class="coll_3">
    <p>
      This is row 3
    </p>
  </div>
</div>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid">
   <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      Second of three columns
    </div>
    <div class="col-sm">
      Third of three columns
    </div>
  </div>
</div>


<style>
.coll_1 {
  width: 100px;
  height: 50px;
  background-color: red;
}

.coll_2 {
  width: 200px;
  height:50px;
  background-color: blue;
}

.coll_3 {
  width: 100px;
  height: 50px;
  }
</style> 

and the result with using Bootstrap where you can see the 3 columns division:

CodeMirror Editor using Bootstrap

So you can do endless things using CodeMirror editor in Joomla.

7
  • I installed the plugin, then I wrote a custom css fie and after that I activate the plugin by putting the path of the custom css file. But it didn't work. Dec 3, 2018 at 18:09
  • Also I have updated the question with the code snippets. Dec 3, 2018 at 18:17
  • @ShaneC - I updated my answer with my test of the plugin and it works without problems. Most probably you forgot to put the plugin at the end of the plugin order in the Plug-in Manager. You have to open the plugin manager. Then filter only for system plugins. Put the plugins in ascending order (at the right top of the plugin manager). Then you can reorder your plugins with just grabbing and dragging the plugin in the ordering column of the plugins. Important that this plugin should be loaded around the last system plugins in Joomla.
    – Zollie
    Dec 3, 2018 at 20:38
  • Also if you inspect your page source (of your article page), you have to find your custom css style in the head of your article page within <style> tags, If you defined your custom.css file path properly in the Add Custom CSS plugin.
    – Zollie
    Dec 3, 2018 at 20:43
  • And at the end of my answer I now also gave you a much simpler solution to your purpose.
    – Zollie
    Dec 3, 2018 at 21:37
1

Since this question has been written there are simpler options for inserting columns into content that do not require writing the HTML or CSS code yourself such as:

  1. the free N1ED TinyMCE Plugin

  2. the columns feature of the Professional version of JCE Editor

The nice thing about using these tools is that the columns are WYSIWYG in the back-end of the website which makes the styling more obvious when you (or someone else) edits the content later.

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.