JA Accordion: Page 2 - Support Central

JA Accordion

saguaros

#1. Yes, you can add new position, kindly checkout this documentation for how to work with layout / block/ module position. Basically, layout will load multiple blocks, in each block, it will call module positions.
http://www.t3-framework.org/documentation/bs3-layout-system#about-layout

#2. Could you share screenshot of how it should be?

#3. As I mentioned in my last reply, the module is showing under a position which is included in container so it can be in full-width, you can try with a new position

#4. Unfortunately, there is no new module, if you want to style for the header, you can try with this custom css:

.ja-accordion ul.ja-accordion-containner li h3.ja-accordion-title {
  font-size: 120%;
	/*your custom code goes here*/
}

Regards

osseo

saguaros Ok, sorry I miss that comment, I know I can find a full width position but it's not in the order I want unless I add new position. Just to confirm, so there is no way to make the "article content" to display in full width in "auto message/component" position? Because I really need the article content to display in full width and the home layout will work for all other modules other than the article content is cut in half, see screenshots.

I need the auto component to be full width like this:

And what about the css for "full width background color"? I've treid the code you give me for the accordion but it didn't work. Basically I want to make the module background a light grey color that will extend to "full browser width" so it creates "sections" on the page when people scroll through (please see demo page below). Can you please check on that? Thanks!

aman204

osseo Just to confirm, so there is no way to make the "article content" to display in full width in "auto message/component" position?

You can achieve such layout structure for component (main body) area by not assigning any module to sidebar-1 or sidebar-2 module position for respective menu items.

And what about the css for "full width background color"? I've treid the code you give me for the accordion but it didn't work. Basically I want to make the module background a light grey color that will extend to "full browser width"

Try add this to custom.css file and change color code accordingly :

.t3-contentslider{background:#ddd !important;}

Kindly ensure to clear your browser cache if changes dont reflect.

If looking forward to have the specific section solely surrounding JA Accordion module adapt specific background styling, You may let us know as this would require creating new block which would precisely adapt to specific module position

osseo

aman204 You can achieve such layout structure for component (main body) area by not assigning any module to sidebar-1 or sidebar-2 module position for respective menu items.

That's why I couldn't figure out, as you can see from my screenshot above, I did "disable/assign None" to those 2 "auto" areas, I assume that's what you mean by "not assigning any module to sidebar1 or sidebar2. However, the auto component is still NOT full width and I can't figure out why, please help?

aman204 Try add this to custom.css file and change color code accordingly :

.t3-contentslider{background:#ddd !important;}

Yes, that worked! I think adding !important helped! However, it added the color background for BOTH modules in the contentslider position. How can I make the background color apply to only 1 custom module (i.e. "Enroll - content slider")? Thanks again!

aman204

osseo However, the auto component is still NOT full width and I can't figure out why, please help?

You may check now as the component (main body) area is spanning full width now as envisaged. Have changed this in /local/tpls/home-enroll.php :

<?php $this->loadBlock('home') ?>

<?php $this->loadBlock('mainbody/no-sidebar') ?>

which has resulted in layout to appear as envisaged in T3 framework > layout section also. Ref: Screenshot

How can I make the background color apply to only 1 custom module (i.e. "Enroll - content slider")?

Will try to make the custom changes in order to get the results as envisaged. Please be patient while we revert back for this

osseo

aman204
Thank you so much for your help on the custom module background color.
Another thing I've notice is when I add the code:
.t3-spotlight-1{background:#f5f5f5 !important;}
The background color didn't extend to full browser width like it did for the containerslider modules, see screenshot.

Go back to the css code to change the accordion headers from saguaros below:
.ja-accordion ul.ja-accordion-containner li h3.ja-accordion-title {
font-size: 120%;
/your custom code goes here/
}
I think it only apply to the accordion module title... not the "article title" as I'm trying to create a visual emphasis on the "article title" that shows up within the accordion module since we can't add in "+ or -" to show user they can extend to see more content. Is there a way to change the front style for those article headers (not the module heading) for that module?

Thank you so much for your help!

aman204

osseo I think it only apply to the accordion module title... not the "article title" as I'm trying to create a visual emphasis on the "article title" that shows up within the accordion module since we can't add in "+ or -" to show user they can extend to see more content. Is there a way to change the front style for those article headers (not the module heading) for that module?

I’m having trouble understanding your query. Can you kindly elaborate or better yet, you may provide screenshot marked with annotations as to which element you wish to refer to

Regarding (+/-) marker, Do you wish to refer to having something like shown in JA ACM accordion module seen on JA Company demo site as seen under "Frequently Asked Question" title ?

How can I make the background color apply to only 1 custom module (i.e. "Enroll - content slider")?

The specific result can be derived by creating new module position enveloped around separate div tag which will affect the specific section solely. Here's how -

1) You can go to \templates\ja_university_t3\tpls\blocks\contentslider.php and add this code at the very bottom :

<?php if ($this->countModules('contentsliderbelow')) : ?>
<!-- CONTENTSLIDER BELOW -->
<div class="t3-contentsliderbelow">
	<div class="container contentsliderbelow">
		<div class="main <?php $this->_c('contentsliderbelow') ?>">
			<jdoc:include type="modules" name="<?php $this->_p('contentsliderbelow') ?>" style="T3Xhtml" />
		</div>
	</div>
</div>
<!-- //CONTENTSLIDER BELOW ENDS-->
<?php endif ?>

Note - Would suggest to also take backup of your current file before performing aforesaid steps, in case rollback required whilst facing any issues

2) Assign your specific module to newly created module position - contentsliderbelow

You can kindly refer to this documentation for defining new module position for assigning specific module

3) Add this to custom.css file and change color code accordingly :

.t3-contentsliderbelow{background:#ccc;}

Please start a new topic for other forum queries/relative issues so as to avoid multiplicity [adding of variety of queries in trailing forum threads which arent related to parent topic]

The gesture requested would help streamlining forum topics and keep them organized which would eventually be beneficial for the whole community

Thanks for understanding

osseo

aman204 Regarding (+/-) marker, Do you wish to refer to having something like shown in JA ACM accordion module seen on JA Company demo site as seen under "Frequently Asked Question" title ?

Yes, that format will work. I went to JA company and download the "JA ACM" module - I assume that's the module for accordion because I don't see any other module called "JA ACM accordion"? Then I went to enable that ACM module but it doesn't look like an accordion module at all, I also looked into the online documentation for that JA company FAQ module and couldn't figure how to duplicate that on my JA university template. Please advise, or let me know if you want me to repost this question in a new forum? Thanks!

aman204

osseo Hi

To port JA ACM module - Accordion style to JA University, You can try the steps outlined below :

1) Download and install JA ACM module following the documentation excerpt
2) Copy the folder - \templates\ja_company\acm\accordion from unzipped JA Company template package to unzipped folder location of JA University -\templates\ja_university\acm\ [Create the parent folder if doesnt exist] and thereafter copy accordion folder in the parent folder
3) Thereafter, Assign specific ACM module to specific module position and update module settings accordingly along with style selection

Hope this helps 🙂

osseo

aman204 What permissions should I set the new "acm" folder? 755? Thanks.

aman204

osseo What permissions should I set the new "acm" folder? 755? Thanks.

It is solely at your discretion whether you wish to set the permissions to chmod 777 or 755 or 644 etc. as there are several factors to be taken into consideration such as security vulnerability, permission access levels and others

To know in depth about file permissions and thereafter choosing the appropriate file permissions, Would suggest to google keywords such as "file permissions chmod explained" "file permissions unwritable" or "file permissions writable" which would result in ample search strings

osseo

aman204 Ok, I just want to make sure this module will work under 755 because I remember in the past when I change the folder permission then some module will stop working. Thanks.

osseo

Sorry, one last thing... I add the custom "contentsliderbelow" position however, the background color didn't show through the JA ACM accordion module. See my screenshot below. And how can I make the background color show through like the other JA accordion module above? Thanks!

saguaros

osseo
Hi,

On which page I can see the module as your screenshot?

osseo

saguaros
https://district279.org/demo-enroll

Thanks.

aman204

osseo See my screenshot below. And how can I make the background color show through like the other JA accordion module above?

Try add this to custom.css file -

.t3-contentsliderbelow .acm-accordion .panel-title a,.t3-contentsliderbelow .acm-accordion .panel-default > .panel-heading + .panel-collapse > .panel-body{background: #f5f5f5 !important;}

osseo

aman204 Thanks, that works!! If I want to make the "title heading" stand out more, like "bold and larger front", should I add the html code in the module or add the css code in the custom.css?

teitbite

osseo Hi. I believe best will be to use custom.css with a code like:

.acm-accordion .panel-title a b {
font-size: 20px;
}

since it's bold already.

aman204

osseo If I want to make the "title heading" stand out more, like "bold and larger front",

Try add this also to custom.css file and change font-size and font-weight value accordingly -

.t3-contentsliderbelow .acm-accordion .panel-title a{font-weight: 600 !important;font-size:20px !important;}

aman204

osseo Hi

Kindly let us know if all queries to relative topic have been resolved so as to mark the thread as resolved or need further assistance on the same

osseo

aman204 Thank you for all your helps! Please mark the thread as resolved.

« Previous Page