Joomla Templates Club 406,261 posts

[omojesu2 Friend omojesu2Join date: December 2012Posts: 34Downloads:0Uploads:1 Thanks: 8 Thanked: 3 times in 1 posts]

#202145

I am trying to migrate my website from ja orisite 2.5 to ja medicare 3.3. The upgrade path is not as smooth as one would like, so I decided to rebuild the site from scratch on Mamp (local machine), and move content over manually.

I am faced with some an issue trying to reduce the max site width from 1280px to 1025px, and reducing the padding on module headers, and footer modules. I am making all changes in /templates/ja_medicare/custom.css, and none of the changes are reflecting on the site.

Every attempt I made to reduce the width size of the site has been ignored. Here is what I did. I added the following css codes to custom.css

1025px) {

.t3-mainnav{
top:30px !important;
}

.nav > li > a{
padding: 10px 6px !important;
}

.t3-module.box-icon-facetime-video:before {
content: “f109”;

}

.container {
margin-right: auto;
margin-left: auto;
padding-left: 20px;
padding-right: 20px;
}
@media (min-width: 768px) {
.container {
width: 760px;
}
}
@media (min-width: 980px) {
.container {
width: 980px;
}
}
@media (min-width: 1280px) {
.container {
width: 1025px;
}
}

@media (max-width: 1025px) {
.container {
width: 10205px;
}

I then refreshed and cleared my cache on three different browsers (FF, Safari, and Chrome), retested but nothing changed when I increase the browser size the site still expands to 1261px whereas I only want the max width to be 1025 even if the browser is larger than that size.

I also tried to reduce the padding on the footer nav modules by updating the .t3-footernav code to custom.css…cleared cache and refreshed browser, no changes. I can see the changes when I make them in firebug to template.css, but it appears ja medicare is ignoring whatever changes I add to custom.css

.t3-footnav {
padding-bottom: 10px;
padding-left: 0;
padding-right: 0;
padding-top: 10px;
}

Thanks for any assistance.

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#553363

Hi @omojesu2,

Could you please provide your site url so I can have a look ?

[omojesu2 Friend omojesu2Join date: December 2012Posts: 34Downloads:0Uploads:1 Thanks: 8 Thanked: 3 times in 1 posts]

#553392

Adrian – thanks…per my mail above, the site is being developed in localhost and so I do not have a url that you can see at this time.

I think all I need at this time is the guidance on how to reduce the default max width from 1600px to 1025px and how to reduce the padding on the modules. Custom.css doesn’t seem to be respected by the template for whatever reason I don’t get.

<em>@Adam M 450575 wrote:</em><blockquote>Hi @omojesu2,

Could you please provide your site url so I can have a look ?</blockquote>

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#553544

Hi @ omojesu2,

First, please navigate to Admin >>> Extensions >>> Template Manager >>> choose your template >>> in General tab >>> enable Development Mode and make sure you temporary disable CSS Compression.

1. To reduce overall width, open file root_folder/templates/ja_medicare/less/variables.less, look for this part :

// Large screen / wide desktop
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
@screen-lg: 1280px;
@screen-lg-min: @screen-lg;
@screen-lg-desktop: @screen-lg-min;

All you have to do is change the screen-lg value and recheck.

2. For layout customization process, you can use Firefox addon named Firebug to inspect the element you want to change. If you could provide a screenshot and clarify a little bit about the spacing you want to change, I can provide you better answer.

[omojesu2 Friend omojesu2Join date: December 2012Posts: 34Downloads:0Uploads:1 Thanks: 8 Thanked: 3 times in 1 posts]

#553692

Thanks again Adam. That did not work even though I am hesitant make the change directly on the less file since this will most certainly be overidden when you guys release a future template or framework update. I have already gone that route to change the screen-lg value and this did not have any impact on the site width when the browser size is wide.

Here is what I have in the open file root_folder/templates/ja_medicare/less/variables.less file

// Large screen / wide desktop
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1 - default: 1280
@screen-lg: 1025px;
@screen-lg-min: @screen-lg;
@screen-lg-desktop: @screen-lg-min;

After making this change, I did the less to CSS btn in the admin.

For the second issue, (reducing padding btw modules, I inspected with firebug and here is the file it pointed me to:

/t3-assets/dev/red/templates.ja_medicare.less.style.less.css

Here are the classes (same as I updated in my custom.css but which the template is not obeying):

.t3-footnav {
padding-bottom: 100px;
padding-left: 0;
padding-right: 0;
padding-top: 100px;

I however did notice that in the less.css file above, there is also a media query which is set to below values: I played a little around with this in firebug and while it did seem to change the site width, it was somehow erratic results…

Template is set to development mode and CSS caching is set to No.

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#554855

Hi @omojesu2,

Look like some replies are missed in this thread after recovered from data lost problem, could you please confirm your current status ?

1 user says Thank You to Adam M for this useful post

1. omojesu2

[omojesu2 Friend omojesu2Join date: December 2012Posts: 34Downloads:0Uploads:1 Thanks: 8 Thanked: 3 times in 1 posts]

#555128

All good for now…

<em>@Adam M 452605 wrote:</em><blockquote>Hi @omojesu2,

Look like some replies are missed in this thread after recovered from data lost problem, could you please confirm your current status ?</blockquote>

[Author]

Posts