Joomla Templates Club 406,261 posts

[bigmagic2014 Friend bigmagic2014Join date: December 2013Posts: 65Downloads:0Uploads:6 Thanks: 15 Thanked: 2 times in 1 posts]

#195140

Need some very basic instruction for tailoring Home Page Masshead (Featured Page Main Menu)
Hi
Fixel.
Rock Team of one
Designer One Developer

Appreciate all assistance, but please don’t refer me to the module description in the template (at least not without additional input, because obviously I’ve spent a tremendous amount of time studying it already as well as other related material, and apparently I’m not finding the necessary information.)

The upside is, I’m sure this is a very simple question for an expert or anyone familiar with Joomla. But please take a moment to provide clear details (very simple English… i.e. translate the technical jargon), as I’m still very new to Joomla and operate at a beginner’s level.

Objective
Customize Masshead Message:

◆ Title — size, number of words, spacing and number of lines
◆ Paragraph (placeholder text) — playing with moving small text up title text.
◆ Paragraph (h3) — move double space below Title text and adjust size.

Problem
Normal html coding does not modify text to desired specifications. It seems “title=” is preset and severely limited as far as perameter adjustment.

Q1 Is there some place other than module mgr– pos home 1– Masshead used to create and edit Masshead? Maybe I’m in the wrong area.

Q2 How would you customize code inside square brackets to achieve desired effect (see objective) (Not familiar with title = notation and square bracket coding)

Q3 Where and how do you adjust masshead module parameters (other than just big and small padding) so paragraph can extend further down module without being cutoff?

Solutions??

Thanks Magic

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#524140

There are a number of ways that you can use masshead (where the H3 tags etc are set by css) or fake it using custom-html-module (where you will have full control). Masshead saves you using many custom-html-modules so if you only want the ‘masshead’ on a few pages you can use custom-html.

A picture of what you are trying to achieve would be useful.

1 user says Thank You to swissa for this useful post

1. bigmagic2014

[bigmagic2014 Friend bigmagic2014Join date: December 2013Posts: 65Downloads:0Uploads:6 Thanks: 15 Thanked: 2 times in 1 posts]

#524187

Thanks for getting back Swissa. I know this is something simple but I just can’t figure out what it is. >:(

<em>@swissa 413124 wrote:</em><blockquote>

A picture of what you are trying to achieve would be useful.</blockquote>

Anyway just something real simple like this.

current

Hi.

Fixel.
Rock team of one
Designer and one
Developer.

Donec pellentesque venenatis elit, quis aliquet mauris
malesuada el. Donec uitae libero dolor. Maecenas

To something along these lines

JAZZ
Musical

ENJOY A NIGHT ON
THE TOWN WITH LIVE JAZZ!

Take that special someone out
and remember years gone by.

Or Maybe

Take that special someone out
and remember years gone by.

JAZZ
Musical

ENJOY A NIGHT ON
THE TOWN WITH LIVE JAZZ!

Basically just some simple rearranging, Problem I’ve been running into is (title=) in code seems to be preset and you can’t edit it. At least I haven’t figured out how. I can do a few things with “h” tags (h1, h2, etc) but I still can’t type more than one word for title. I can eliminate “title=” but then my padding goes all out of whack. I can only use top half of masshead.

I need more precise control to achieve the effect I’m looking for. Coding it all in HTML is fine with me but I still need to figure out how to adjust the parameters so I can use the full masshead.

The other approach that might work is coding within the square brackets (which I’m not that familiar with and just now beginning to learn.)

So that’s it in a nutshell. I want to create a promo similar to above and have it take up about 3/4 of the masshead. (about the same parameters of the current masshead demo).

Thanks again Swissa for getting back. I’m already making some progress, but really looking forward to what you have to say about it.

Big Magic

[bigmagic2014 Friend bigmagic2014Join date: December 2013Posts: 65Downloads:0Uploads:6 Thanks: 15 Thanked: 2 times in 1 posts]

#524216

Ok guys, I’m making some progress (hats off to Swissa),

Here’s the thing though, I can code in HTML and get pretty much what I want, but how do you get content to span the full masshead? My promo keeps cutting off right about halfway down. Where is the control to extend message to full 2×2 grid?

This is what I was referring to with “title=”. I can use the entire masshead when I use “title=”, but when I remove “title=” to code it out in html, all the perameters change and I can only place content in the top half of the masshead.

Q1 How do get content to flow in both top and bottom halves of masshead as when using “title=”?

Q2 Where is the control or location to adjust masshead perameters?

Q3 How would you make a masshead module from scratch?

Thanks guys, help me get past this basic stuff and I think we’ll be pretty good.

Big Magic

1 user says Thank You to bigmagic2014 for this useful post

1. Saguaros

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#524241

If you customise the masshead module you will have to build some module suffixes.

If you use a custom html module you can add some module suffixes – to get it to look like masshead use ” grid-2×2 grid-pos-1 highlight big-padding”

If you don’t want ‘ big padding’ remove it and the same for ‘ highlight’. (All have a leading space)

See if that works for you.

1 user says Thank You to swissa for this useful post

1. Saguaros

[Martin Möller Friend Martin MöllerJoin date: September 2014Posts: 54Downloads:132Uploads:5 Thanks: 5 Thanked: 1 times in 1 posts]

#524285

Hi, I need to place a picture in to the masshead area. Is that possible?

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#524289

<em>@martinmo 413302 wrote:</em><blockquote>Hi, I need to place a picture in to the masshead area. Is that possible?</blockquote>

Just make a custom-html module, add the image and then add the module suffix (in ‘advanced’ tab) ” grid-2×2 grid-pos-1″

Don’t forget the leading space and don’t include the ” either side.

That simple!

Post a url if you need further help please. 🙂

[Martin Möller Friend Martin MöllerJoin date: September 2014Posts: 54Downloads:132Uploads:5 Thanks: 5 Thanked: 1 times in 1 posts]

#524301

Thanks, I will try that.

another question: where do I control the length of the introtext shown in the animated Frontpage pictures?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#524550

Do you mean the text when hovering the article image? http://prntscr.com/2w7brw

Actually, it’s intro text of article, we use CSS rule to control the height of introtext paragraph. If you have a look at this file: /templates/ja_fixel/css/template.css, you will see this rule:


.fixel-grid .items.image.rotateY article .back .article-intro {
display: block;
overflow: hidden;
height: 60px;
width: 100%;
padding: 10px 0 0;
text-align: center;
}


If you want to customize this value, it’s recommended to create a new CSS file called custom.css in this path: /templates/ja_fixel/css and override above class , then change to your desired value:


.fixel-grid .items.image.rotateY article .back .article-intro {
height: 60px;
}


2 users say Thank You to Saguaros for this useful post

1. Martin Möller
2. mkisite

[bigmagic2014 Friend bigmagic2014Join date: December 2013Posts: 65Downloads:0Uploads:6 Thanks: 15 Thanked: 2 times in 1 posts]

#524930

Some good news — some still to work out news.

I can pretty much customize as desired now just like you said (make pretty much whatever I want… pretty much). The thing is when I get it looking great in one browser or device, it doesn’t look so great in another. For instance, some tablets render the large heading (tor title) smaller, some at the size it should and so on and so forth varying by device, screen and browser.

I notice the masshead template looks great on any device. What is the trick to this? Do I need to use the “title=” format to get the main header text to be pretty much the same size on any device (still would like to know how to use)? Do you have to use H3 for subhead? How do you get such a consistent look across all devices, browsers and screens?

Q1 How to get consistent masshead look across all browsers, screens, and devices (effect similar to template)

Q2 I notice my feature page takes noticeably longer (particularly on some devices and connections) than the template. Is there a particular reason for this. (just replaced pictures by size indicated 300×300, 602×602)

Q3 Also coffee cup loader does not display.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#525071

@bigmagic2014:

A1: What do you mean by consistent masshead here? With different screens/devices, the block for masshead will be automatically resized due to the screen size.

A2: Hope this tips can help you: http://www.joomlart.com/blog/news-updates/tools-and-tips-to-check-joomla-site-speed-and-improve-performance

A3: You can post your site URL here so that we can have a look at this issue.

[bigmagic2014 Friend bigmagic2014Join date: December 2013Posts: 65Downloads:0Uploads:6 Thanks: 15 Thanked: 2 times in 1 posts]

#525091

<em>@Saguaros 414303 wrote:</em><blockquote>@bigmagic2014:

A1: What do you mean by consistent masshead here? With different screens/devices, the block for masshead will be automatically resized due to the screen size.

</blockquote>

Yes, I understand will automatically be resized by screen size but I don’t think I should be getting such a dramatic difference in appearance. I can even use the same browser and I get considerably different appearance on desktop than on browser. I get considerably different appearance when I change screen orientation for tablet. Considerable difference from phone to phone, tablet to phone, tablet to tablet and so on.

I sent you the URL, if you can view it in various devices you’ll see what I mean — maybe try desktop vs tablet to start. (Maybe you could look at this when you look at the coffee cup.)

*There must be something causing a difference between template output and my site output because, like I said, the template varies some, but it still looks great for the most part in whatever device you view it on.

While I’ve got you, the next big thing I’m going to do is install the quickstart locally, so I can operate when there’s no internet connection etc. Is there anything in particular I need to know that might be helpful, or maybe not so clear or included in the documentation? Are there any additional software apps or programs (from microsoft etc) that I would need? Are there any adjustment I would need to make to my computer or browser? (right now run all major apps with no problem). Also would this cause any security issues? Just want everything to go smoothly as possible. I know there’s the standard documentation, which is simple for experienced users and all those that already know, but there’s a learning curve for most of us newbies and uninitiated — I would like to minimize that as much as possible.

Thanks again for the support.
Big Magic

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#525092

<em>@bigmagic2014 414333 wrote:</em><blockquote>… there’s a learning curve for most of us newbies and uninitiated — I would like to minimize that as much as possible.
</blockquote>

Sorry to jump back in but the single biggest lesson/trick/tip that I can give anyone new to Joomla is to install akeeba (on hosting or local) and learn how to do a backup and a restore. Then TEST IT!! Second would be to do all dev either on local or a dev site – never work on a production site. When your dev site is finished transfer it using akeeba.

If you want to work locally, you’ll need MAMP or WAMP.

Pass you back to Saguaros. Regards.

1 user says Thank You to swissa for this useful post

1. bigmagic2014

[bigmagic2014 Friend bigmagic2014Join date: December 2013Posts: 65Downloads:0Uploads:6 Thanks: 15 Thanked: 2 times in 1 posts]

#525094

No, no, very helpful. I’m doing this as we speak.

You said mamp or wamp. Is there an advantage to one over the other? Does it make any difference?

Big Magic

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#525095

<em>@bigmagic2014 414337 wrote:</em><blockquote>No, no, very helpful. I’m doing this as we speak.

You said mamp or wamp. Is there an advantage to one over the other? Does it make any difference?

Big Magic</blockquote>

mamp = mac, apache, mysql, php

wamp = windows, apache, mysql, php

So you’ll be limited by your OS! 🙂

[Author]

Posts