Elxis CMS Forum
Support => General => Topic started by: armpouniotis on May 05, 2020, 15:28:17
-
Hi there !
Is it possbile to split and article page in 2 columns ?
Thank you in advance
Christos
-
use column-count
.elx_article_page p{
column-count: 2;
column-rule: 4px double #434343;
column-gap: 20px;
}
-
Elxis (5.x) has built-in CSS classes for this.
Use the following HTML (copy-paste in editor - turn editor in html mode):
<div class="elx5_2colwrap">
<div class="elx5_2colbox">
HTML of first column here (anything)
</div>
<div class="elx5_2colbox">
HTML of second column here (anything)
</div>
</div>
The above HTML is also responsive for mobile devices.
Tip: You can create 3 and 4 columns the same way with elx5_3colwrap/elx5_3colbox and elx5_4colwrap/elx5_4colbox
-
It works !
Where can we find all these biuld in classes ?
Christos
-
In standard.css! Templates / System / CSS / standard.css
All CSS classes that added in Elxis 5.x have the "elx5_" prefix. Older (Elxis 4.x) CSS classes have the "elx_" prefix.
-
ok !
thank you very much !
Christos
-
Cool, This tips are VERY useful. THANK YOU datahell 👍
Hope there will be more kinds of tips.
-
Hope there will be more kinds of tips.
Ask and you will get tips ;)
-
OK, Continue this question,
How to set the background color and opacity in each column? Thanks.
-
OK, Continue this question,
How to set the background color and opacity in each column? Thanks.
Success after testing, sorry about that.
<div class="elx5_2colwrap">
<div class="elx5_2colbox" style="background:#E6E6E6; opacity: 1;">
HTML of first column here (anything),
from https://forum.elxis.org/index.php?topic=9141.0
<>
<div class="elx5_2colbox" style="background:#E6E6E6; opacity: 0.9;">
HTML of second column here (anything)
<>
<>
-
Hi datahell,
What if I want to put 80% or 20% in the columns, please see attached? I have tried the following ways without success. Thanks a lot.
<div class="elx5_2colbox" style="width: 80%; ">
<div class="elx5_2colbox" style="width: 20%; ">
or
<div class="elx5_2colbox" style="width: 650px; ">
<div class="elx5_2colbox" style="width: 200px; ">
-
Avoid using inline CSS. I recommend you the following. Also Elxis uses flexbox, so the "width" you wrote has no affect.
Open your template's CSS file and add 2 new custom CSS classes. Also add a media query in accordance to "elx5_2colwrap"
.my_2colboxa { flex:0 0 79%; margin:0; padding:0; box-sizing: border-box; }
.my_2colboxb { flex:0 0 20%; margin:0; padding:0; box-sizing: border-box; }
@media only screen and (max-width:850px) {
.my_2colboxa, .my_2colboxb { margin-bottom:15px; }
}
Now change your HTML in the editor to the following:
<div class="elx5_2colwrap">
<div class="my_2colboxa">
HTML of first column here (79%)
</div>
<div class="my_2colboxb">
HTML of second column here (20%)
</div>
</div>
Note 1: I used 79% instead of 80% inorder for the columns to have same space between them If you don't want space replace 79% with 80%.
Alternatively you can set width to 80% and add padding in columns like this:
<div class="elx5_2colwrap">
<div class="my_2colboxa elx5_pad">
HTML of first column here (80%)
</div>
<div class="my_2colboxb elx5_pad">
HTML of second column here (20%)
</div>
</div>
Note 2: "elx5_pad" adds 5 pixel padding arround the element. "elx5_mpad" adds 10 pixel padding arround the element.
Note 3: Flexbox is the new CSS3 cool way to create columns (among others). Before the best option we had was to use floated elements.
-
Great, Works! :D THANK YOU datahell !!
-
...
Alternatively you can set width to 80% and add padding in columns like this:
<div class="elx5_2colwrap">
<div class="my_2colboxa elx5_pad">
HTML of first column here (80%)
</div>
<div class="my_2colboxb elx5_pad">
HTML of second column here (20%)
</div>
</div>
Note 2: "elx5_pad" adds 5 pixel padding arround the element. "elx5_mpad" adds 10 pixel padding arround the element.
Note 3: Flexbox is the new CSS3 cool way to create columns (among others). Before the best option we had was to use floated elements.
👍 It seems this looks better, "elx5_pad & elx5_mpad" in terms of typography.