Hello -
First of all, I want to say how much I love your templates! I spent some time yesterday looking through many different Joomla template sites, and you all stuck out as the absolute best. Simple, attractive, easy to navigate. The decision to join was a no-brainer.

I am currently working with the One Page template, and there are some revisions I want to make. I spent some time playing with the .css files to try to figure it out, but I'm having some trouble.

1) I want to use a custom font. I have a font that I have loaded into the template's font folder (same folder where the league gothic font resides). But how do I actually use this font? I think I may want to use it for all of my text needs, but I'm not sure. I see a custom fonts area in the template configuration of Joomla, but I don't really know how to make it all work

2) By the same token, how can I adjust the font sizes? I've been able to find the font sizes for the logo and sub-title (in the template .css folder), but I'm not sure how I can globally change the sizes of standard text or the menu items.

3) I want to change background colors of the template. I want the actual pages (associated with banner and grid links) to remain white, but I want the background down the sides to be a color. I also want the background behind the logo, and the menu bar to be a different color. How can I do this?

Thanks for your help. Sorry if these are elementary questions - I'm a Joomla novice, for sure!

Sincerely,
Drew

oops, i forgot to include my site:
Seems that I've figured out some of the background colors...

sound.drewboles.com

Hi

What is the font you are trying to use is it available for the google fonts and does it legally allow embedding?

Cheers
Paul

Regarding the fonts - you can alter the global font in the fonts tab
The base font size is 80%

If you wanted specific tags then we could help you with that

Regarding the logo area - replace the hash value


body #logowrap {
background: none repeat scroll 0 0 #4C0B5F;}

You would need to paste this line in the custom.css file - the file is found in the template css folder and you would need to rename it first to custom.css

With the nav area - same again paste the code below and add your background hex value to replace what I've added

#navwrap .zen-container { background: none repeat scroll 0 0 #4C0B5F;}

Cheers
Paul

Hi Paul -
Thanks so much for your help! Between that, and various trial and error I've done today, I pretty much have things the way I want them. But, I do have a few small things I could use help with.

1) How do I add margins/padding to the content on the page, so that the text and video embeds are not right to the very edge where the background color begin? I would also like to reduce the margins at the top and the bottom of each module (this seems to be a global setting, no?)

2) The navigation bar only appears on the iPad when it is in landscape mode. If I go to portrait mode, the navigation bar disappears, although I can see a small white bar surrounded by purple (in my case) at the very top. I have the same problem on the iPhone, although here the bar does not appear in both landscape and portrait modes.

3) Also, on my iPhone and iPad, I can see italicized portions of the custom font I'm using. However, on the computer, the italics do not appear.

I'm guessing these last two may have to do with settings in the responsive css file? I'm going to dig around that a little bit and see if I can make heads or tails of it.

Again, my site is sound.drewboles.com

Thanks again!

D

Oh yes, I forgot one other thing. I have my purple background, which I'm liking. When I use the navigation bar to move to someplace else, and it follows, the upper and side borders around the nav bar become white. How can I make these purple as well?

Thanks!

Drew

Quite a bit to cover here - this is for the sticky menu

#navwrap.affix {background: #4C0B5F ;}

Add this to your custom.css file

Please avoid altering any other css file as these will be wiped if you update the template - the custom.css file is protected

Paul

Content wise - you have tables at a 100% width so these would need to be reduced width wise

and then add right and left padding to

#bannerwrap .zen-container {padding: 60px 2em;}
This is waht I had with the table width being 90%

#grid1wrap h1, #grid1wrap h2, #grid1wrap h3, #grid1wrap h4, #grid1wrap h5, #grid1wrap h6 {
padding: 0 0.75em;
}

p {padding: 0 1em;}

and these for the other elements you have published

Cheers
Paul

Thanks Paul -
This is extremely helpful - much easier than poking around trying to figure out what to do.

Is it safe to assume that all of the JB templates have custom css files and any changes should be made there? I assume they override settings in the template.css?

What do you make of the issue I mentioned regarding the navigation bar not appearing on the iPhone or iPad portrait view? Incidentally, I took a quick look at a different JB template with a sticky navigation bar, and it exhibits the same behavior. Ideas?

Thanks for all your help!

Drew

Hi Drew,

Few questions here

How have you got the mobile menu set up?

Do you have the jbtype plugin installed?

Which other JB templates did you look at?

What version of IOS are you using?

Cheers
Paul

Hi Paul -
So, the other template I was referring to was Vintage, the one for my other site. However, I managed to make that mobile menu work (I didn't have the module set correctly).

However, with the One Page template, there does not seem to be a similar "togglemenu" position. Maybe I'm missing it, but I don't see a mobile menu option.

The jbtype plugin is installed.

I'm on iOS 6.1.3 for both my iPad and iPhone. Again, the menu shows up on the iPad, but only in landscape mode.

Ideas?

Hi Drew,

The two templates are different in relation to both how they work and were constructed

With onepage it uses the T3 plugin and the settings for it are in the the navigation tab of the onepage admin

It doesn't need to the togglemenu position

In the navigation tab of openpage what is the mobile menu currently set at?

Regarding jbtype its also enabled in the plugin manager?

As I can't see any mobile menu when I resize the page in a browser

Cheers
Paul

Just checking the quickstart - the jbtype is set to not enabled

This is a mistake as its the trigger for the mobile menus

Cheers
Paul

Ugh, I hate stupid mistakes!

Well, that fixed that problem. Of course, there's another problem that's seem to have cropped up as a result. Now, I'm my iPhone (but not my iPad), the portrait view is offset, and requires you to slide over to get it center. I've attached two pictures of it (both in landscape view - GOOD, and portrait view - BAD). I'm guessing/hoping this is something that can be corrected with CSS?

Also, a minor thing. Is there any way to now widen that white bar at the top, so the little menu icon doesn't get cut off. Not a huge deal, but I'm a very detail-oriented perfectionist (which is the worst kind, admittedly).

Thanks!

Drew

oops, i forgot the pictures

So the second one is what you see without the menu open?

regarding the height of the bar

try

@media (max-width: 800px) {
#navwrap .nav-collapse {padding: 15px 0px;}
}

yes, the second one is just how the page loads up on the iPhone in portrait mode. You can actually see the page centered (as you would expect it to be), and then as it finishes loading, it offsets itself to look as it does in the photo.

will try your suggestion re: the height of the bar right now

awesome, the bar adjustment worked. now if we can only get this weird offset issue taken care of, this website will be done!

Thanks - problem is I don't have access to an iphone to troubleshoot this reliably

Are you able to create a separate ticket for this

thanks
Paul