JACM not having Top spacing and Bottom spacing

talktobiola

cssyeah

Hi @talktobiola,
You can add top and bottom spacing by adding a class to the Module Class field in the Advanced tab. These styles will then be applied to the module. Alternatively, let me know your specific case, and I'll help you find the right solution.

Kind regards,

talktobiola

What is the module class to be added to the Advance tab to adjust the spacing please

cssyeah

Hi,
I have added spacing classes in custom.css file (user/local/css/ folder). Please add spacing classes to any module you want to add.

.pt-1 { padding-top: 16px; }
.pb-1 { padding-bottom: 16px; }

.pt-2 { padding-top: 32px; }
.pt-2 { padding-bottom: 32px; }

.pt-3 { padding-top: 48px; }
.pb-3 { padding-bottom: 48px; }

.pt-4 { padding-top: 64px; }
.pb-4 { padding-bottom: 64px; }

.pt-5 { padding-top: 80px; }
.pb-5 { padding-bottom: 80px; }

.pt-6 { padding-top: 96px; }
.pb-6 { padding-bottom: 96px; }

Add spacing class to the Module Class field in the Advanced tab.

Please add a space before each class name.

talktobiola

The code distabilize my website. For instance, it shifts the module title leftward in addition to this, it increases the text size of the module.

talktobiola

cssyeah

Hi @talktobiola.

The code distabilize my website. For instance, it shifts the module title leftward in addition to this, it increases the text size of the module.

You need add blank space before first class name (I edited on your website).
Menu style: I applied custom style for the dropdown menu on your site. However I cleared the t3-css cache on your website and the colors seem to be wrong. Can you help me reconfigure it?
Kind regards,

talktobiola

Also, please take a look at these codes in the custom.css and tell what is wrong. Why are they not working?
`.uber-header.dark-color .navbar-default .navbar-nav > li > a, .uber-header.none-color.affix .navbar-default .navbar-nav > li > a {
color: #ffffff !important; /change color for menu item text/
}

.uber-header.header-5.dark-color {
background-color: #ffffff !important; /change background color of the header/
}

@media (min-width: 992px) {
.sections-wrap .section .section-inner, .sections-wrap .t3-module .section-inner {
padding-top: 104px !important;
padding-bottom: 104px !important;
}
.btn-border.btn-primary {
border-color: #39B777;
color: #39B777;
}
.btn-border.btn-primary {
border-color: #006600;
color: #006600;
}
element.style {
}
.uber-header.header-5.dark-color {
background-color: #f1f;
}

.uber-header.dark-color .navbar-default .navbar-nav > li > a, .uber-header.none-color.affix .navbar-default .navbar-nav > li > a {
color: #006600;
padding-left: 26px;
padding-right: 26px;
}
.navbar-default .navbar-nav > li > a {
color: #006600;
padding: 13px 26px;
text-transform: uppercase;
}`

cssyeah

Hi,
I have just updated all padding classes in the custom.css file. It's working now, please reload your website to view the change.
Kind regards,

talktobiola

please take a look at these codes in the custom.css and tell what is wrong. Why are they not working in custom.css or make corrections where necessary

.uber-header.dark-color .navbar-default .navbar-nav > li > a, .uber-header.none-color.affix .navbar-default .navbar-nav > li > a {
color: #ffffff !important; /change color for menu item text/
}

.uber-header.header-5.dark-color {
background-color: #ffffff !important; /change background color of the header/
}

talktobiola

Hello, are we still together as regards my last questions?

cssyeah

Hi @talktobiola,
The above code is absolutely correct and it's working on your website. Can you take a screenshot of the issue for me?
Thanks

talktobiola

Here are what I want to correct through this code

.acm-slideshow .style-1:after {
content: "";
background-color: #006600;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
filter: alpha(opacity=85);
opacity: 0.85;
z-index: -1;
}

.uber-header.header-5.dark-color .site-navigation-right .right-menu ul li > a {
border: 0;
text-transform: none;
font-weight: 700;
background: #009900;
padding: 13px 26px;
color: #ffffff;
height: auto;
line-height: 1;
border-radius: 2px;
}

a {
color: #006600;
text-decoration: none;
-webkit-transition: all 0.2s ease 0s;
-o-transition: all 0.2s ease 0s;
transition: all 0.2s ease 0s;
}

.btn-border.btn-primary {
border-color: #006600;
color: #009900;
}

.btn-border:hover, .btn-border:focus, .btn-border:active {
background: #009900;
border-color: #006600;
color: #ffffff;
}

.acm-features .font-icon {
color: #009900;
font-size: 55px;
margin-bottom: 26px;
line-height: 1;
}

talktobiola

Hi,

I am waiting for your response on this please

saguaros

For the style customization like this, you can use Google Chrome or Firefox inspect element. What I usually do is hover on any HTML element (i.e. button, tag, text, …) you want and right click on it and then click on inspect element, it will show you which CSS class it is using and which CSS file and the path to this element on the right side. then you can go to the file and replace it with new CSS you change.

If you want to change in CSS, just add your custom CSS code into the file: root/templates/uber(your default template)/css/custom.css

Regards

talktobiola

Hi,

I'm having some confusion about this uber template. Firstly, the Product Menu item looks different from other menu items. Secondly, the menu items comes vertically in other pages instead of the way it looks at the front page. Thirdly, the menu publish to the right menu does not display. Fouthly, the code generated from the inspect tool and editted to custom css does not reflect at the frontend and lastly when are you going to update this template and there is no feeling of Joomla5 using it. Also, how can I expand the sidebar2 width. It is too tiny for what I want to use it for.
What I want to change in the custom.css code is to change all the blue colour to #006600

saguaros

It looks like you're using a default menu module instead of the megamenu in template.

Could you check the super admin details that you provided in this topic again? as I was not able to access the administrator panel now.

talktobiola

The super admin details is correct. Only that the P is capital letter

saguaros

talktobiola

The header of this Uber template utilizes the JA ACM module called [Application] Header in acm-header position, this module was not assigned to these product pages so nothing displayed there.

I just updated for you

saguaros

To expand the right sidebar, edit the following file:

/templates/uber/tpls/blocks/mainbody/one-sidebar-right.php

Adjust the Bootstrap classes to meet your needs, ensuring the total grid equals 12. For example, I changed col-md-9/col-md-3 to col-md-8/col-md-4.