Third parties module stilying in Protostar Topic is solved

Everything to do with Joomla! 3.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Locked
antonios
Joomla! Explorer
Joomla! Explorer
Posts: 286
Joined: Fri Jun 20, 2008 2:22 pm

Third parties module stilying in Protostar

Post by antonios » Thu Feb 14, 2019 11:32 am

Hi
I can see that default behaviour for modules styling in protostar template is having a grey "box" 'div' container
When I sometimes introduce a new third party module they have by default a different styling like
in this picture:
sv-styling2.png
If I change the default stilying by modifying the 'Module Style' property in the module's Advanced tab and put what is available for the protostar template, which is "well", what I get is the following:
sv-stylingproto.png
where the container box of the new module extends upwards and below that of the preceding module.
How can I avoid this behaviuor?
Thans in advance
You do not have the required permissions to view the files attached to this post.

User avatar
saraheagle
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 132
Joined: Sat Nov 03, 2007 8:06 am

Re: Third parties module stilying in Protostar

Post by saraheagle » Tue Feb 19, 2019 3:20 pm

You will need to add the following to your custom css file

.well .well
{
padding:0;
margin-bottom:0;
background-color:transparent;
border:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
}

see this page for how to do add the custom css file https://docs.joomla.org/J3.x:Adding_a_c ... _Protostar

User avatar
imanickam
Joomla! Master
Joomla! Master
Posts: 28193
Joined: Wed Aug 13, 2008 2:57 am
Location: Chennai, India

Re: Third parties module stilying in Protostar

Post by imanickam » Tue Feb 19, 2019 3:50 pm

What is your site's URL so that others can see what is happening?


You could try the following:

(a) Create a copy of the template Protostar - refer document https://docs.joomla.org/J3.x:Modifying_ ... !_Template

(b) Make the style of the new template as the default template style for your site

(c) In the newly created template directory, you would notice a file named index.php and edit the following line of code as shown.

Existing code:

Code: Select all

							<jdoc:include type="modules" name="position-8" style="xhtml" />
Revised code:

Code: Select all

							<jdoc:include type="modules" name="position-8" style="well" />
(d) If you have used the Module Class Suffix "Well" in the modules published in the position-8, remove them.

Note:
With this approach, any update to the Protostar template in the future releases of Joomla, will not get applied to the newly created template. You have to manually apply the modifications, if any.
Ilagnayeru (MIG) Manickam | இளஞாயிறு மாணிக்கம்
Joomla! - Global Moderators Team | Joomla! Core - Tamil (தமிழ்) Translation Team Coordinator
Former Joomla! Translations Coordination Team Lead
Eegan - Support the poor and underprivileged

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 44028
Joined: Sat Apr 05, 2008 9:58 pm

Re: Third parties module stilying in Protostar

Post by Webdongle » Tue Feb 19, 2019 4:13 pm

You could make a copy then create a Template override for the module https://docs.joomla.org/How_to_override ... omla!_core ?
https://docs.joomla.org/J3.x:How_to_use ... _Overrides
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".

antonios
Joomla! Explorer
Joomla! Explorer
Posts: 286
Joined: Fri Jun 20, 2008 2:22 pm

Re: Third parties module stilying in Protostar

Post by antonios » Wed Feb 20, 2019 10:53 pm

Hi imanikam thanks for your reply. Unfortunately can't show my site since it is still running on localhost in my laptop
(at least don´t know how to make it visible since I am not always connected)

Are you suggesting this solution as an alternative to the previous solution offered by Webdongle, and saraheagle?
Regards
Antonio
imanickam wrote:
Tue Feb 19, 2019 3:50 pm
What is your site's URL so that others can see what is happening?


You could try the following:

(a) Create a copy of the template Protostar - refer document https://docs.joomla.org/J3.x:Modifying_ ... !_Template

(b) Make the style of the new template as the default template style for your site

(c) In the newly created template directory, you would notice a file named index.php and edit the following line of code as shown.

Existing code:

Code: Select all

							<jdoc:include type="modules" name="position-8" style="xhtml" />
Revised code:

Code: Select all

							<jdoc:include type="modules" name="position-8" style="well" />
(d) If you have used the Module Class Suffix "Well" in the modules published in the position-8, remove them.

Note:
With this approach, any update to the Protostar template in the future releases of Joomla, will not get applied to the newly created template. You have to manually apply the modifications, if any.

User avatar
imanickam
Joomla! Master
Joomla! Master
Posts: 28193
Joined: Wed Aug 13, 2008 2:57 am
Location: Chennai, India

Re: Third parties module stilying in Protostar

Post by imanickam » Thu Feb 21, 2019 3:04 am

As no one can see the site, it is hard to suggest a particular solution. The reason being, it is not clear as to what module is being used as the second module on the left side.

The solutions offered are distinct. What I would suggest is to try out the solutions one by one and adapt the one that suits your need.

IMHO, the css solution offered by saraheagle is the simplest of all the solutions and from the maintenance point of view is also a good one.
Ilagnayeru (MIG) Manickam | இளஞாயிறு மாணிக்கம்
Joomla! - Global Moderators Team | Joomla! Core - Tamil (தமிழ்) Translation Team Coordinator
Former Joomla! Translations Coordination Team Lead
Eegan - Support the poor and underprivileged

antonios
Joomla! Explorer
Joomla! Explorer
Posts: 286
Joined: Fri Jun 20, 2008 2:22 pm

Re: Third parties module stilying in Protostar

Post by antonios » Thu Feb 21, 2019 11:16 pm

Hi imanikam, the 2nd module is an image slider (SV Rotator Images extension - https://extensions.joomla.org/extension ... or-images/).
The proposed css code in the first reply didn't work (no effect whatsoever) by the way.
Regards
Last edited by imanickam on Fri Feb 22, 2019 2:43 am, edited 1 time in total.

User avatar
imanickam
Joomla! Master
Joomla! Master
Posts: 28193
Joined: Wed Aug 13, 2008 2:57 am
Location: Chennai, India

Re: Third parties module stilying in Protostar

Post by imanickam » Fri Feb 22, 2019 3:49 am

I have tested the module on a fresh install of Joomla! 3.9.3 with the module class suffix " well" used in the module SV Rotator Images. I have enclosed the module class suffix within quotes just to show a space before the text string well.

Following is the screenshot.
sv_rotator_images_with_spacewell.jpg
As you can notice there is a space between the modules.

So, I suspect that the behavior could be due to the css changes, if any has been made. Or, it could be caused by the css loaded from other extension(s). I would suggest inspecting the element and see what is happening.

If you want others to see the site you are developing, a better option would be to transfer the site or develop the site at https://launch.joomla.org/. This is a free service.
You do not have the required permissions to view the files attached to this post.
Ilagnayeru (MIG) Manickam | இளஞாயிறு மாணிக்கம்
Joomla! - Global Moderators Team | Joomla! Core - Tamil (தமிழ்) Translation Team Coordinator
Former Joomla! Translations Coordination Team Lead
Eegan - Support the poor and underprivileged

antonios
Joomla! Explorer
Joomla! Explorer
Posts: 286
Joined: Fri Jun 20, 2008 2:22 pm

Re: Third parties module stilying in Protostar

Post by antonios » Sun Feb 24, 2019 9:38 am

I see...

by using the inspector function in firefox I get this view on the html and css codings were the div element
is initialized with a class name <div class="well well " >
wellwell.png
Is this normal???
The other modules have their class name as <div class="well ">....

Cheers
You do not have the required permissions to view the files attached to this post.

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 44028
Joined: Sat Apr 05, 2008 9:58 pm

Re: Third parties module stilying in Protostar

Post by Webdongle » Sun Feb 24, 2019 9:52 am

In the Advanced tab of the module edit screen is 'Module Style' You can change that.
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".

antonios
Joomla! Explorer
Joomla! Explorer
Posts: 286
Joined: Fri Jun 20, 2008 2:22 pm

Re: Third parties module stilying in Protostar

Post by antonios » Sun Feb 24, 2019 11:41 pm

Thanks. I know but the only options I have within protostar template is either "no" or "well" if I use "no" the module is presented without the protostar module style, if I use "well" the described behaviour happens...

Also, I tried to set up my site on launch.joomla.org but when I try to upload my site's backup (with Akeeba) an error happens:

"Error: SyntaxError: JSON.parse: unexpected character at line 6 column 1 of the JSON data!"

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 44028
Joined: Sat Apr 05, 2008 9:58 pm

Re: Third parties module stilying in Protostar

Post by Webdongle » Mon Feb 25, 2019 12:23 am

Akeeba backup is to be restored to an empty folder and empty database.
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".

antonios
Joomla! Explorer
Joomla! Explorer
Posts: 286
Joined: Fri Jun 20, 2008 2:22 pm

Re: Third parties module stilying in Protostar

Post by antonios » Sat Mar 02, 2019 12:00 am

Hi
I have now restored my site in a production server, so it can now be inspected
Just to remind what the problem was:
Hi
I can see that default behaviour for modules styling in protostar template is having a grey "box" 'div' container
When I sometimes introduce a new third party module they have by default a different styling like
in this picture:
sv-styling2.png
If I change the default stilying by modifying the 'Module Style' property in the module's Advanced tab and put what is available for the protostar template, which is "well", what I get is the following:
sv-stylingproto.png
where the container box of the new module extends upwards and below that of the preceding module.
How can I avoid this behaviuor?
Thanks in advance
You do not have the required permissions to view the files attached to this post.

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 30819
Joined: Mon Oct 27, 2008 9:27 pm
Location: Romerike, Norway

Re: Third parties module stilying in Protostar

Post by Per Yngve Berg » Sat Mar 02, 2019 10:05 am

Looking at the image, it appears that both modules are wrapped in an element or there are open/close mismatches of a div.

antonios
Joomla! Explorer
Joomla! Explorer
Posts: 286
Joined: Fri Jun 20, 2008 2:22 pm

Re: Third parties module stilying in Protostar

Post by antonios » Sat Mar 02, 2019 12:54 pm

It looks like that the conflict be between the SV Rotator Images module and the Login module. In other pages where the login module is not present the SV Rotator Images is displayed correctly, like in http://www.permacultura-es.org/index.ph ... Itemid=154, for example.

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 30819
Joined: Mon Oct 27, 2008 9:27 pm
Location: Romerike, Norway

Re: Third parties module stilying in Protostar

Post by Per Yngve Berg » Sat Mar 02, 2019 2:31 pm

Then there is a missing close tag in the Login Module.

antonios
Joomla! Explorer
Joomla! Explorer
Posts: 286
Joined: Fri Jun 20, 2008 2:22 pm

Re: Third parties module stilying in Protostar

Post by antonios » Sat Mar 02, 2019 5:10 pm

Hum..can't see it with the inspector (not enough experience I guess in using this tool).
Anyway whom should I report this to? The module developers or is there something that can be done in the custom css to sort this out. Is this a built in module?

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 30819
Joined: Mon Oct 27, 2008 9:27 pm
Location: Romerike, Norway

Re: Third parties module stilying in Protostar

Post by Per Yngve Berg » Sat Mar 02, 2019 5:26 pm

Found the error. Remove the "span12" class from the Login Module.

antonios
Joomla! Explorer
Joomla! Explorer
Posts: 286
Joined: Fri Jun 20, 2008 2:22 pm

Re: Third parties module stilying in Protostar

Post by antonios » Sat Mar 02, 2019 5:45 pm

Hum...I am not sure how. I looked for it in the module's php files but can't find it
Is it in the template files? which?

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 44028
Joined: Sat Apr 05, 2008 9:58 pm

Re: Third parties module stilying in Protostar

Post by Webdongle » Sat Mar 02, 2019 6:43 pm

Code: Select all

// Adjusting content width
$position7ModuleCount = $this->countModules('position-7');
$position8ModuleCount = $this->countModules('position-8');

if ($position7ModuleCount && $position8ModuleCount)
{
	$span = 'span6';
}
elseif ($position7ModuleCount && !$position8ModuleCount)
{
	$span = 'span9';
}
elseif (!$position7ModuleCount && $position8ModuleCount)
{
	$span = 'span9';
}
else
{
	$span = 'span12';
}
If position 7 or 8 not used then span12 is used
Last edited by Webdongle on Sat Mar 02, 2019 7:24 pm, edited 1 time in total.
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".

antonios
Joomla! Explorer
Joomla! Explorer
Posts: 286
Joined: Fri Jun 20, 2008 2:22 pm

Re: Third parties module stilying in Protostar

Post by antonios » Sat Mar 02, 2019 6:51 pm

but in which file is this code living?

Also should I just change this code by deleting the span12 elseif? Couldn't this have other side effects if it is not done in the context of the whole module code (which I do not know much about)?

Wouldn't also this be a code fix for the next Joomla upgrade?

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 30819
Joined: Mon Oct 27, 2008 9:27 pm
Location: Romerike, Norway

Re: Third parties module stilying in Protostar

Post by Per Yngve Berg » Sat Mar 02, 2019 6:53 pm

Isn't it a Module Class Suffix?

Edit: You mau also set the Bootstrap Size in the Module Configration.

antonios
Joomla! Explorer
Joomla! Explorer
Posts: 286
Joined: Fri Jun 20, 2008 2:22 pm

Re: Third parties module stilying in Protostar

Post by antonios » Mon Mar 04, 2019 8:55 pm

Per Yngve Berg wrote:
Sat Mar 02, 2019 6:53 pm
Isn't it a Module Class Suffix?
It's empty....what would you suggest to write in there?
Edit: You mau also set the Bootstrap Size in the Module Configration.
But doesn't this refer to the number of columns?

Also I deleted the last elseif where the assignment to span12 was made but nothing changed
I wonder if I should put it back....
Regards

antonios
Joomla! Explorer
Joomla! Explorer
Posts: 286
Joined: Fri Jun 20, 2008 2:22 pm

Re: Third parties module stilying in Protostar

Post by antonios » Tue Mar 05, 2019 11:15 am

Webdongle wrote:
Sun Feb 24, 2019 9:52 am
In the Advanced tab of the module edit screen is 'Module Style' You can change that.
I just changed that (put "no" instead of "well") and what I now get is the login module behaviour has normalized (no more superposition with the module right below) BUT I lost the Protostar styling.
Not sure what to try next apart from looking for a different login extension out there....

[edit]
By the way who developed this login module? I think it comes with the Joomla distro isn't it?
If this is the case how can one post/issue a ticket with the developers?

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 30819
Joined: Mon Oct 27, 2008 9:27 pm
Location: Romerike, Norway

Re: Third parties module stilying in Protostar

Post by Per Yngve Berg » Tue Mar 05, 2019 1:29 pm

It's nothing wrong with the module. You need to set the Bootstrap size to zero.

antonios
Joomla! Explorer
Joomla! Explorer
Posts: 286
Joined: Fri Jun 20, 2008 2:22 pm

Re: Third parties module stilying in Protostar

Post by antonios » Tue Mar 05, 2019 2:09 pm

Per Yngve Berg wrote:
Tue Mar 05, 2019 1:29 pm
It's nothing wrong with the module. You need to set the Bootstrap size to zero.
Again, thanks for the exact clue Per!
From what the explanatory text says when passing the mouse on top of the
property I couldn't get that by putting 0 it would have sorted out the issue, since it says that it is an option to specify how many columns the module will use and from the visual effect that I had I thought that it was more something to do with rows rather than columns....since the module overextended in height rather than in width. Anyway...

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 30819
Joined: Mon Oct 27, 2008 9:27 pm
Location: Romerike, Norway

Re: Third parties module stilying in Protostar

Post by Per Yngve Berg » Tue Mar 05, 2019 4:44 pm

It sets the "spanX" class for the Bootstrap Grid System.

https://getbootstrap.com/2.3.2/scaffold ... gridSystem

It tried to display that module and the next on in one row.


Locked

Return to “Templates for Joomla! 3.x”