Support Forums

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Change column to 1/2 + 1/4 + 1/4 in SP Page Builder

Featured Lock Resolved Issue
Using SP Page Builder (free version) I see the predefined columns. But, I need a column that is 1/2 + 1/4 + 1/4. How can I get this?

7 Answers

Arun Sasi

More than a month ago #Permalink
Hi,

After creating columns. Select one column and drag to left or right.

Thanks
Arun

Igor Mihaljko

More than a month ago #Permalink
Actually, you will need to do the following, but be advised that you will need to do this after EVERY SP Page Builder upgrade you might do in the future

1. edit file administrator/components/com_sppagebuilder/builder/settings/builder-default-template.php

In that file find this code

See attached file file1.txt

Extend it (with the last LI element I added) to

See attached file file2.txt

2. Edit file administrator/components/com_sppagebuilder/builder/builder_layout.php

Find the following code

See attached file file3.txt

Change it into this

See attached file file4.txt

3. Create new icon PNG image that will represent that new layout, name it to 633.png and put it into the following folder

/administrator/components/com_sppagebuilder/assets/img/layout/

4. Add this CSS into the /administrator/components/com_sppagebuilder/assets/css/sppagebuilder.css file

.row-layout-container ul li a.row-layout-633 {
background-image: url(../img/layout/633.png);
}


5. In the same sppagebuilder.css find this code

.row-layout-container ul {
list-style: none;
padding: 0;
margin: 0;
display: block;
position: absolute;
top: 24px;
left: 0;
padding: 10px 5px;
width: 340px;
background: #36c77b;
z-index: 999;
text-align: center;
display: none;
}


and change it into this
.row-layout-container ul {
list-style: none;
padding: 0;
margin: 0;
display: block;
position: absolute;
top: 24px;
left: 0;
padding: 10px 5px;
width: 373px;
background: #36c77b;
z-index: 999;
text-align: center;
display: none;
}


That should be it!

O. Harris

More than a month ago #Permalink
Othniel Harris wrote:

Using SP Page Builder (free version) I see the predefined columns. But, I need a column that is 1/2 + 1/4 + 1/4. How can I get this?


Thank you Igor, but some of your code was blank. Could you please inset the correct data?

O. Harris

More than a month ago #Permalink
Thank you Igor, but some of your code was blank. Could you please inset the correct data?

Othniel Harris wrote:

Using SP Page Builder (free version) I see the predefined columns. But, I need a column that is 1/2 + 1/4 + 1/4. How can I get this?


Thank you Igor, but some of your code was blank. Could you please inset the correct data?

Igor Mihaljko

More than a month ago #Permalink
Actually, you will need to do the following, but be advised that you will need to do this after EVERY SP Page Builder upgrade you might do in the future

1. edit file administrator/components/com_sppagebuilder/builder/settings/builder-default-template.php

In that file find this code

See attached file file1.txt

Extend it (with the last LI element I added) to

See attached file file2.txt

2. Edit file administrator/components/com_sppagebuilder/builder/builder_layout.php

Find the following code

See attached file file3.txt

Change it into this

See attached file file4.txt

3. Create new icon PNG image that will represent that new layout, name it to 633.png and put it into the following folder

/administrator/components/com_sppagebuilder/assets/img/layout/

4. Add this CSS into the /administrator/components/com_sppagebuilder/assets/css/sppagebuilder.css file

.row-layout-container ul li a.row-layout-633 {
background-image: url(../img/layout/633.png);
}


5. In the same sppagebuilder.css find this code

.row-layout-container ul {
list-style: none;
padding: 0;
margin: 0;
display: block;
position: absolute;
top: 24px;
left: 0;
padding: 10px 5px;
width: 340px;
background: #36c77b;
z-index: 999;
text-align: center;
display: none;
}


and change it into this
.row-layout-container ul {
list-style: none;
padding: 0;
margin: 0;
display: block;
position: absolute;
top: 24px;
left: 0;
padding: 10px 5px;
width: 373px;
background: #36c77b;
z-index: 999;
text-align: center;
display: none;
}


That should be it!

Igor Mihaljko

More than a month ago #Permalink
Actually, you will need to do the following, but be advised that you will need to do this after EVERY SP Page Builder upgrade you might do in the future

1. edit file administrator/components/com_sppagebuilder/builder/settings/builder-default-template.php

In that file find this code

See attached file file1.txt from a files.zip

Extend it (with the last LI element I added) to

See attached file file2.txtfrom a files.zip

2. Edit file administrator/components/com_sppagebuilder/builder/builder_layout.php

Find the following code

See attached file file3.txtfrom a files.zip

Change it into this

See attached file file4.txtfrom a files.zip

3. Create new icon PNG image that will represent that new layout, name it to 633.png and put it into the following folder

/administrator/components/com_sppagebuilder/assets/img/layout/

4. Add this CSS into the /administrator/components/com_sppagebuilder/assets/css/sppagebuilder.css file

.row-layout-container ul li a.row-layout-633 {
background-image: url(../img/layout/633.png);
}


5. In the same sppagebuilder.css find this code

.row-layout-container ul {
list-style: none;
padding: 0;
margin: 0;
display: block;
position: absolute;
top: 24px;
left: 0;
padding: 10px 5px;
width: 340px;
background: #36c77b;
z-index: 999;
text-align: center;
display: none;
}


and change it into this
.row-layout-container ul {
list-style: none;
padding: 0;
margin: 0;
display: block;
position: absolute;
top: 24px;
left: 0;
padding: 10px 5px;
width: 373px;
background: #36c77b;
z-index: 999;
text-align: center;
display: none;
}


That should be it!

Attachments (1)

  • files.zip 1.6 KB

Igor Mihaljko

More than a month ago #Permalink
I had a problem with including the HTML code in the answer so I had to attach those files as a ZIP containing code from each step


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 138
Toufiq

Toufiq

Total Accepted Answers: 61
Shibbir

Shibbir

Total Accepted Answers: 27
Rifat Wahid Alif

Rifat Wahid Alif

Total Accepted Answers: 5
Pavel

Pavel

Total Accepted Answers: 4

100+

Templates

200,000+

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam