Page 1 of 1

Third parties module stilying in Protostar

Posted: Thu Feb 14, 2019 11:32 am
by antonios
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

Re: Third parties module stilying in Protostar

Posted: Tue Feb 19, 2019 3:20 pm
by saraheagle
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

Re: Third parties module stilying in Protostar

Posted: Tue Feb 19, 2019 3:50 pm
by imanickam
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.

Re: Third parties module stilying in Protostar

Posted: Tue Feb 19, 2019 4:13 pm
by Webdongle
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

Re: Third parties module stilying in Protostar

Posted: Wed Feb 20, 2019 10:53 pm
by antonios
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.

Re: Third parties module stilying in Protostar

Posted: Thu Feb 21, 2019 3:04 am
by imanickam
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.

Re: Third parties module stilying in Protostar

Posted: Thu Feb 21, 2019 11:16 pm
by antonios
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

Re: Third parties module stilying in Protostar

Posted: Fri Feb 22, 2019 3:49 am
by imanickam
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.

Re: Third parties module stilying in Protostar

Posted: Sun Feb 24, 2019 9:38 am
by antonios
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

Re: Third parties module stilying in Protostar

Posted: Sun Feb 24, 2019 9:52 am
by Webdongle
In the Advanced tab of the module edit screen is 'Module Style' You can change that.

Re: Third parties module stilying in Protostar

Posted: Sun Feb 24, 2019 11:41 pm
by antonios
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!"

Re: Third parties module stilying in Protostar

Posted: Mon Feb 25, 2019 12:23 am
by Webdongle
Akeeba backup is to be restored to an empty folder and empty database.

Re: Third parties module stilying in Protostar

Posted: Sat Mar 02, 2019 12:00 am
by antonios
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

Re: Third parties module stilying in Protostar

Posted: Sat Mar 02, 2019 10:05 am
by Per Yngve Berg
Looking at the image, it appears that both modules are wrapped in an element or there are open/close mismatches of a div.

Re: Third parties module stilying in Protostar

Posted: Sat Mar 02, 2019 12:54 pm
by antonios
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.

Re: Third parties module stilying in Protostar

Posted: Sat Mar 02, 2019 2:31 pm
by Per Yngve Berg
Then there is a missing close tag in the Login Module.

Re: Third parties module stilying in Protostar

Posted: Sat Mar 02, 2019 5:10 pm
by antonios
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?

Re: Third parties module stilying in Protostar

Posted: Sat Mar 02, 2019 5:26 pm
by Per Yngve Berg
Found the error. Remove the "span12" class from the Login Module.

Re: Third parties module stilying in Protostar

Posted: Sat Mar 02, 2019 5:45 pm
by antonios
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?

Re: Third parties module stilying in Protostar

Posted: Sat Mar 02, 2019 6:43 pm
by Webdongle

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

Re: Third parties module stilying in Protostar

Posted: Sat Mar 02, 2019 6:51 pm
by antonios
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?

Re: Third parties module stilying in Protostar

Posted: Sat Mar 02, 2019 6:53 pm
by Per Yngve Berg
Isn't it a Module Class Suffix?

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

Re: Third parties module stilying in Protostar

Posted: Mon Mar 04, 2019 8:55 pm
by antonios
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

Re: Third parties module stilying in Protostar

Posted: Tue Mar 05, 2019 11:15 am
by antonios
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?

Re: Third parties module stilying in Protostar

Posted: Tue Mar 05, 2019 1:29 pm
by Per Yngve Berg
It's nothing wrong with the module. You need to set the Bootstrap size to zero.

Re: Third parties module stilying in Protostar

Posted: Tue Mar 05, 2019 2:09 pm
by antonios
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...

Re: Third parties module stilying in Protostar

Posted: Tue Mar 05, 2019 4:44 pm
by Per Yngve Berg
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.