Help With Joomla 3.x Templates

[djtech2k]

I have used Joomla on and off for years. Most of my experience was with 1.5.x and around that time, but I am now trying to help a non-profit with a Joomla site. I am trying to get caught up to speed, but its coming slowly

The area I need most help in is the template and/or appearance. I have not been able to find a nice looking, yet simple template to use, so I have been trying to make the protostar work. The goal of this site is to have a place for a High School sports program to have as their source of information. It will be used to broadcast information, track players, games, and so on.

Anyway, I am using protostar and cannot figure out a lot of stuff. Here are a few basic questions I have. Any help is appreciated.

1) I see it allows you to change between static and fluid for layout. Fluid is nice to have more space, but it seems a little sloppy. Static seems to be too small on the screen, so I was thinking of adjusting static to be wider but cannot figure out how.

2) On general layout, when on static I am creating basic placeholder content articles to see how it would look. With 1 article, the front page looks fine. When I create any more, it make it so small, it looks terrible. I looked for settings on how to order the content and how to change how the layout is on the front page content, but cannot find it in this new Joomla 3.x.

3) I would really like a nice clean, and simple template to use that I can make small adjustments to. I have had no luck. Any suggestions on any nice templates or any specific templates to use? The current theme is for football (US) and the team colors are green, red, and can also use white/gray/black. Thanks!

[djtech2k]

I figured out #2. I do not know how I overlooked it, but I found what I was looking for.

[djtech2k]

I am working on using the forum post info tool, but haven't been able to do it yet. I have tried modifying the css with the protostar template, but cannot seem to get it to change width.

[punkter]

1) Just adjust the media queries in CSS. What's the size of the screen you're working on?
2) /
3) Can't help you out with this one since I make all custom templates from scratch. Try Themeforest, Joomlart or search your luck on Google.

[djtech2k]

Thanks.

Unfortunately I do not know what you mean by "adjust media queries" in the css. I have been able to make the width change by messing with the width's in the css, but it makes the page look a little strange with alignemtn or something.

I am on a laptop with 1920x1080 resolution. I am not trying to go that big, but the default protostar is REALLY narrow in the static setting. I tried the fluid, but then its so wide that the menu's and content look really sloppy.

I was thinking maybe something like 1280 or something. It seems to auto-adjust for devices like phone and that's fine.

[coaleb]

Hello,

Protostar is a decent starter template, but like any template, you're going to need to learn how it manages your layout to have success with it. Luckily, Protostar has very thorough online documentation:

http://bj.zemplate.com/protostar-respon ... star-media

If you want to have more control over that fluid option (and over the appearance of your site in general), you're going to need to understand media queries and have a basic grasp of CSS.

http://getbootstrap.com/css/

Protostar is about as clean and simple as it gets, but a basic Google search will show you that there are many, many template options, paid and free, available for Joomla. Just realize that each, like Protostar, have a learning curve and limitations. They also have varying degrees of support & documentation.

best,
Brian

[AlexVega]

Hi there,

Related to your specific requirements:

1. Here you have the easy solution and the correct solution:
- Easy: Add in your main css file at the bottom a new value for the class container, something like:

Code: Select all

.container {
    max-width: 1170px;
}

- Correct: Check the steps in this post: http://forum.joomla.org/viewtopic.php?f=713&t=929285

2. Check this docs: https://docs.joomla.org/Help36:Menus_Me ... egory_Blog

3. Check this post: http://forum.joomla.org/viewtopic.php?f=713&t=782462

Also check this useful info:

- Beginners Guide
https://docs.joomla.org/Portal:Beginners

- Administrators Guide
https://docs.joomla.org/Portal:Administrators

Cheers.

[punkter]

@djtech2k - I'm not ignoring you, I'm just not yet in a position to respond to DMs being new user and all.
Take Alex's advice and go the Easy way for now. But when you have more time on your hands, check out the linked guides.

[djtech2k]

I tried adding that to the end of the template.css but it did not change the width. I also tried the purity 3 template. There was so much to adjust that I had to go back to protostar until I have a lot of time to sort through it all.

[jonBuckner1]

Hi

My thoughts:

Do you know the difference between fluid and static?

If not, fluid means the width of an element i.e. with class "span6" is percentage based so will adjust even to the smallest change of browser window width. i.e span6 is 50%, so it will be 50% of width of container element.

Static means an element with class "span6" is pixel based and will adjust when the browser window width goes above or below a media query breakpoint - taken from the bootstrap website http://getbootstrap.com/2.3.2/scaffolding.html):

Code: Select all

/* Large desktop */
@media (min-width: 1200px) { ... }
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
 
/* Landscape phones and down */
@media (max-width: 480px) { ... }

[djtech2k]

Sorry to revive my dated thread here but I am kinda getting back to this.

I have reviewed each suggestion. Some I could wrap my head around and some I couldn't. Like I said, I am a novice and specifically new to Joomla 3.x and html5.

My main goal is to widen the page. Now when I got it to widen, the modules and content looked weird. So I think when I widen it, I need to deal with the spacing and the width of the modules.

[jonBuckner1]

Hi

Like in my reply
Decide if you want static or fluid.
What have you chosen and do you understand it?
I suggest static pretty much every time. The site is only adjusting at set breakpoints (set widths) rather than every single change of width.

Once you have that decided, use the browsers web inspector to find the code that is bothering you...
Maybe post that on here and also put that code with new values in to you templates custom.css file (depending on template, depends on how you add your own css)

[djtech2k]

I am using static. I understand the concept, but am trying to learn the code technique.

The concept of overrides and all these new things definitely make it harder to work with since I always just simply worked with the index.php and main css.

I have used the inspector, but I am unable to find the exact part that is changing the page width, including the content and modules. For example, I see all the ".container" entries in the css, but there's a ton of them. I saw the container entries and started to see where it was showing "conditional" settings based on screen resolution.

On a side note, I have another thread for this but in Protostar I found that linked titles does not work on anything other than the home page. I found it because I wanted the same style to apply on all pages, but it doesn't for article titles.

[jonBuckner1]

Hi

Have you scoured the bootstrap 2 docs.

That might help ...

http://getbootstrap.com/2.3.2/

[djtech2k]

That link is dead, but I am looking at the newest version.

Wow, its pretty intimidating. There is SO much that I do not know about. Less components, jquery plugins, overrides, config.json, etc. All this is new to me.

I get the concept of setting up "cases" for different browser/screens. So if a phone is detected vs a laptop, it will resize things. That's great. I see the configuration page on the bootstrap page, but not sure about most of the values nor how I would apply it to my site/template.

[jonBuckner1]

Hi

The link is not dead for me, goes straight there...

There is a lot going on
You just need to look at the scaffolding and css sections for now.

Also, you need to look at the link I sent because Bootstrap 3 and 4 are not used by Joomla yet - plenty of discussions elsewhere about that.

Post screen shots of where you are looking etc...

[djtech2k]

Ok, I see some of the doc links on the bootstrap are working. The first 2 I tried said they were discontinued with the old version.

So I got protostar widened a bit....I think.

I do not really understand why this works, but here is what I did on my test site:

template.css

Change 1:

Code: Select all

@media (min-width: 1200px) {
	.row {
		margin-left: -20px;
		*zoom: 1;
	}
	.row:before,
	.row:after {
		display: table;
		content: "";
		line-height: 0;
	}
	.row:after {
		clear: both;
	}
	[class*="span"] {
		float: left;
		min-height: 1px;
		margin-left: 20px;
	}
	.container,
	.navbar-static-top .container,
	.navbar-fixed-top .container,
	.navbar-fixed-bottom .container {
		/* width: 940px; */
		width: 1240px;
	}

Change 2

Code: Select all

.hero-unit > * {
	color: white;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
.container {
	/* max-width: 960px; */
	max-width: 1260px;
}
.body .container {
	background-color: #fff;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	padding: 20px;
	border: 1px solid rgba(0,0,0,0.15);
	-moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.05);
	-webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.05);
	box-shadow: 0px 0px 6px rgba(0,0,0,0.05);
}

I kinda understand the one in the media 1200px display area, but not the last entry. This change made my content area and my right modules wider, which is partly what I want. I want both wider, and may add left side modules in the future, but need the width either way.

[jonBuckner1]

Hi

I have attached a screenshot of the bit I think you need to override

Screen Shot 2016-08-31 at 9.41.08 PM.png

Just play around with the widths and in your css put something like:


The '>' means that the immediate children with class 'container' of element with class 'body' will be effected
.body > .container {
// start with smallest width desired
width: 100%; // or maybe 300px etc...
}
// then add media query using the first value for each of bootstraps breakpoints
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.body > .container {
width: 80%; // or maybe 500px or some other crazy value etc...
}
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
.body > .container {
width: 70%; // or maybe 450px or some other crazy value etc...
}
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
.body > .container {
width: 60%; // or maybe 400px or some other crazy value etc...
}
}

[jonBuckner1]

PS

Don't forget that BS2 is old, and the layout system isn't as fine tuned as it is in BS3

ie span8 and span4 can cause layout issues even though they add up to the desired '12', whereas
span8 and span3 will work better...

Watch out for things like that

[djtech2k]

Thanks, I will look at it this evening.

So are you saying the 2 changes I made are not the right way?

So are you suggesting that I modify the index.php, and then modify the CSS? I see you mention "override". Do you mean override as in the new Joomla 3.x override file functionality I saw or do you mean just modify the original files?

In the media area, I made the adjustment in the min-width 1200 section because I really just want to make the screen wider for full res desktops, etc. On things with smaller res, the current look is fine.

[jonBuckner1]

Hi

No, not override index.php at all unless you are creating custom template

Not sure what you were highlighting with your code example.... not sure which elements you are unhappy with or the visual idea apart from 'wider', sorry.

Your code looks ok to me though.

Re overrides, yes it depends what you are overridingL a module layout, a component etc...
In this case, it is just overriding the template's css. This is done in your own css file.

You seem to be getting there.