Joomla Templates Club 406,261 posts

[midhat Friend midhatJoin date: January 2010Posts: 161Downloads:101Uploads:21 Thanks: 43 Thanked: 12 times in 1 posts]

#197983

Hi,
I want to reduce the empty space around the edges so that my main part is still wider.
It may be easier to see in the picture:

http://planinarenje.ba

Thanks in advance

---

Attachments:

1. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#535889

Assuming you are using the J3.x version of JA Obelisk, here is what you can do . . .

Create a new file called “custom.css” within file path –> templates/ja_obelisk/css

Within that custom.css file, paste the following CSS rule:


.t3-mainbody {
padding-bottom: 10px;
padding-top: 10px;
}

SAVE CHANGES – CLEAR CACHE – REFRESH PAGE

You can, of course, play around with the padding pixel values until you arrive at the result you are most happy with.

Hope That Helps

[midhat Friend midhatJoin date: January 2010Posts: 161Downloads:101Uploads:21 Thanks: 43 Thanked: 12 times in 1 posts]

#535895

Thank you for your prompt response.
I have to put “left and right”, not “top and bottom”. When I put this code in a custom css

.t3-mainbody {
padding-left: 10px;
padding-right: 10px;
}
My main section is narrower than it is. I want to reduce this space by making a part where the text is (main body) to become wider

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#535898

My suggestion above was based on your original issue of wanting to increase the “width” space of your main content area.

Though, in re-reading what you wanted, you should make the following modification:

.t3-mainbody {
padding-left: 20px;
padding-right: 20px;
}

If you want the content area wider, you don’t need to worry about “top” and/or “bottom.”

[midhat Friend midhatJoin date: January 2010Posts: 161Downloads:101Uploads:21 Thanks: 43 Thanked: 12 times in 1 posts]

#535900

I tried this code but with him my main section is narrower than it is. I want to reduce this space by making a part where the text is (main body) to become wider
Thanks anyway 🙂

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#535905

Okay, I see what’s going on . . . my apologies :-[

Try This . . . .

Within your custom.css file, add the following CSS rule:


.container {
width: 1200px;
}

This will widen the content container area . . . . and, again, you can fiddle with the width pixel value until you arrive at the result you’re most happy with.

Better ?? …. Getting There ??

[midhat Friend midhatJoin date: January 2010Posts: 161Downloads:101Uploads:21 Thanks: 43 Thanked: 12 times in 1 posts]

#535908

Again wrong. Now increase the complete web page, but keep it blank space on edges
Maybe the problem is in my bad English 🙂
See in the picture:

I want to reduce the red area, so it will increase the green area, but not reduce blue area space

I apologize if the request is confusing

---

Attachments:

1. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#535914

What version of JA Obelisk are you using? (J2.5? J3.x?)

[midhat Friend midhatJoin date: January 2010Posts: 161Downloads:101Uploads:21 Thanks: 43 Thanked: 12 times in 1 posts]

#535915

version J3.x

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#535918

Okay, Try This . . . .

Within your custom.css file, paste the following CSS rules:


.span4 {
width: 312px;
float: right;
}

t3-mainbody {
padding-bottom: 20px;
padding-top: 20px;
}

.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 1100px;
}

SAVE CHANGES – CLEAR CACHE – REFRESH PAGE

Getting Closer ??

1 user says Thank You to TomC for this useful post

1. midhat

[midhat Friend midhatJoin date: January 2010Posts: 161Downloads:101Uploads:21 Thanks: 43 Thanked: 12 times in 1 posts]

#535922

I’m sorry but we are not close. Blue space disappearing again
Thank you for your assistance

[midhat Friend midhatJoin date: January 2010Posts: 161Downloads:101Uploads:21 Thanks: 43 Thanked: 12 times in 1 posts]

#535930

Perhaps this picture better explains

---

Attachments:

1. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#535935

You said you wanted the content area wider . . . which would mean widening the content (container) area
– thus reducing the outer “blue” space. :((

I will forward your issue onto the JA Development Team for review and (hopefully) further comment.

1 user says Thank You to TomC for this useful post

1. midhat

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#536056

@midhat: Please give it a try with my workaround below.

+ Open the templates/ja_obelisk/less/variables.less file

Change


@T3gridWidth: 980px; // T3 add. For non-responsive layout.
@gridColumns: 12;
@gridGutterWidth: 20px;
@gridColumnWidth: floor((@T3gridWidth - @gridGutterWidth * (@gridColumns - 1)) / @gridColumns);
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

// 1200px min
@T3gridWidth1200: 980px; // T3 add
@gridGutterWidth1200: 20px;
@gridColumnWidth1200: floor((@T3gridWidth1200 - @gridGutterWidth1200 * (@gridColumns - 1)) / @gridColumns);
@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));

// 980px-1199px
@T3gridWidth980: 980px; // T3 add
@gridGutterWidth980: 20px;
@gridColumnWidth980: floor((@T3gridWidth980 - @gridGutterWidth980 * (@gridColumns - 1)) / @gridColumns);
@gridRowWidth980: (@gridColumns * @gridColumnWidth980) + (@gridGutterWidth980 * (@gridColumns - 1));


To


@T3gridWidth: 1200px; // T3 add. For non-responsive layout.
@gridColumns: 12;
@gridGutterWidth: 20px;
@gridColumnWidth: floor((@T3gridWidth - @gridGutterWidth * (@gridColumns - 1)) / @gridColumns);
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

// 1200px min
@T3gridWidth1200: 1200px; // T3 add
@gridGutterWidth1200: 20px;
@gridColumnWidth1200: floor((@T3gridWidth1200 - @gridGutterWidth1200 * (@gridColumns - 1)) / @gridColumns);
@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));

// 980px-1199px
@T3gridWidth980: 1200px; // T3 add
@gridGutterWidth980: 20px;
@gridColumnWidth980: floor((@T3gridWidth980 - @gridGutterWidth980 * (@gridColumns - 1)) / @gridColumns);
@gridRowWidth980: (@gridColumns * @gridColumnWidth980) + (@gridGutterWidth980 * (@gridColumns - 1));


+ Backup all the css files customised on your site, then click Compile LESS to CSS button in JA Obelisk template admin panel.

+ Open the templates/ja_obelisk/css/custom.css file and add this new rule:


.container {
padding-left: 10px;
padding-right: 10px;
}


Let me know if it helps.

1 user says Thank You to Ninja Lead for this useful post

1. midhat

[midhat Friend midhatJoin date: January 2010Posts: 161Downloads:101Uploads:21 Thanks: 43 Thanked: 12 times in 1 posts]

#536190

It works!
Thank you,
You’re a real ninja 🙂

[Author]

Posts