Public Forums 71,145 posts

[Scott Lavelle Friend Scott LavelleJoin date: November 2010Posts: 266Downloads:16Uploads:5 Thanks: 6 Thanked: 64 times in 27 posts]

#186582

After looking around the net, I’ve found that this issue is not specififc to the T3 framework, but as much to Bootstrap or other grid layout options, but I need a solution for T3, nonetheless and the solutions offered for non-Joomla sites aren’t an option.

I hope I’m just missing something simple somewhere.

I need to add a little bit of space to the left and right sides of the page, but when I add padding (seemingly to just about any level), the columns wrap or get pushed outside the frame.

For example, using the base T3 blank template, using the stock Typography page: I have made the background contrasting to the “page area”, so it looks like a traditional fixed width. When you have this contrast, you can see that the type on the left and right sides of the page are crammed right up to the edge.

The same goes for the spotlights – the first column of the spotlight is jammed right up against the left side of the page.

If you have a background that is the same as the content area, you don’t really see the issue because there is no defined line that the text lays up against, but as soon as you add a background, the line is obvious and the text looks crowded to the edge.

I have tried to add the padding to the t3-mainbody, or the item-page, or the <article>, or the .container, or the t3-spotlight, and various other areas and they all seem to have similar results.

As I said at the top, I’m sure I must be just missing something, since this looks pretty obviously wrong and people must have found a way around it.

Anyone have any advice?

Scott Lavelle - Technical Resource Solutions, LLC
Certified Joomla Administrator

[Scott Lavelle Friend Scott LavelleJoin date: November 2010Posts: 266Downloads:16Uploads:5 Thanks: 6 Thanked: 64 times in 27 posts]

#489342

I think I’ve actually figured it out – at least for the moment.

What I was trying to do was to apply a style that would easily casecade through the site, giving a little bit of space to the left and right of the site in general so that all individual elements would take on that style, but what I wound up doing was addressing each of the styles on the page individually in my custom.css. This works, but it’s a lot of styles just to get a little overall padding.

So I have things like these:


div.row-fluid {
padding-left: 15px;
}

header.article-header {
padding-left: 15px;
}

div.page-header,h1,h2,h3,h4,h5,h6 {
margin-left: 15px;
}

div.page-header h1, div.page-header h2, div.page-header h3, div.page-header h4, div.page-header h5, div.page-header h6 {
margin-left: 0;
}

div.alert {
margin-left: 15px;
margin-right: 15px;
}

section.container {
background-color: white;
}

table {
margin-left: 15px;
}

ul.nav {
margin-left: 15px;
}

div.tab-content {
margin-left: 15px;
}


The one that somehow I was overlooking in the spotlight was this:


div.t3-spotlight div.module-inner {
stuff here
}


It’s the module-inner that I was not seeing for some reason. This allowed me to put a little space in each of the spotlights without bumping the whole page around.

Hope this helps someone else with this particular issue.

Scott Lavelle - Technical Resource Solutions, LLC
Certified Joomla Administrator

1 user says Thank You to Scott Lavelle for this useful post

1. phong nam

[Author]

Posts