Recent
Categories
View Replies (10)

RESOLVED - Elvira equalising height of top 3 modules background coloured areas

0
Votes
Undo
  1. suzannek
    suzannek
  2. Sherlock Holmes
  3. Commercial Templates
  4. Friday, 10 February 2017
  5.  Subscribe via email
Hi Ciaran,

I am using the Elvira template on a number of sites. It is a really great template!

Is it possible to make the coloured interior part of the top3 modules all the same height even if text differs a little?

At the moment if I add just one word (Joomla 51) to module 3A text then the columns do not line up (This is on a fresh install of the quickstart).

I do not want to have to have the exact same text in all top3 modules every time I use the template!

Screenshot attached.

Thanks for any assistance
Suzanne
Attachments (1)
top3-modules.jpg top3-modules.jpg
Responses (10)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Suzanne

To amend try adding the following to the Custom CSS field of your templates parameters...

#wrapper_top-3 {

    display: flex !important;

}

.top-3b .module_surround, .top-3b .module {

    height: 100%;

}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 1
suzannek
suzannek
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciarán,

Thanks for your reply.
I tried adding the CSS as you described, it made a difference but it did not work as hoped.

I have attached a screenshot, the upper image of the modules is how they are with just the word joomla51 added to the text, the lower image is what happens when I add that CSS.

Any further suggestions would be much appreciated.
Attachments (1)
top3-modules-with extra-css.jpg top3-modules-with extra-css.jpg
  1. more than a month ago
  2. Commercial Templates
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Suzanne

May I suggest sending temporary administration access to your Joomla installation to info@joomla51.com and we will examine this issue further. For our reference please paste a link to this post in your email.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 3
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you Suzanne

I have amended your template and changed your Custom CSS to the following which has resolved the issue...

#wrapper_top-3 {

    display: flex !important;

}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 4
suzannek
suzannek
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Thank-you Ciarán, I can now have very different amounts of text in each module and the background colours of the top 3 modules all are equal length on the fresh demoinstaller version :)

I tried adding that CSS to a live site but it does not work there.

Did you amend the template on the test site in any other way than adding that bit of CSS?

Suzanne
  1. more than a month ago
  2. Commercial Templates
  3. # 5
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Suzanne

There was one small change with your template. At the end of your templates styles.php (../templates/j51_elvira/php/styles.php) locate the following (line 367)...

.<?php echo $item->module_position; ?> .module_surround {


And replace with...

.<?php echo $item->module_position; ?> {


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 6
suzannek
suzannek
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciarán, thanks for your reply.

I tried adding that line but it did not work for me.

I then tried uploading the Elvira template folder from my test site (the one that you had gone in and fixed the layout of those modules on) to the live site site. I got the result that I wanted then. :)
  1. more than a month ago
  2. Commercial Templates
  3. # 7
suzannek
suzannek
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciarán,

Unfortunately the suggested fix is not responsive on smaller screens. Any suggestions?
Viewed via responsinator

Many thanks
Suzanne
  1. more than a month ago
  2. Commercial Templates
  3. # 8
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Suzanne

To amend try adding the following to the Custom CSS field of your templates parameters...

@media only screen and (max-width: 767px) {

#wrapper_top-3 {

    flex-direction: column;

}}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 9
suzannek
suzannek
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciarán,

That worked perfectly thank-you!

Suzanne
  1. more than a month ago
  2. Commercial Templates
  3. # 10
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!