Modify header position

More
4 years 6 months ago #7120 by sukanta_rakshit
sukanta_rakshit created the topic: Modify header position
Hello all,
Thanks for providing this great template for free.
I want to make the header module position responsive "full width" and adjust the height also, because I want to set a background picture inside header module and some inlay texts with "custom html" module. Please guide me where to look for step by step.
want to achieve something like this with a background pic.

Attachments:

Please Log in or Create an account to join the conversation.

More
4 years 6 months ago #7121 by marcin
marcin replied the topic: Modify header position
Hello,

1) Edit the following file:
/templates/jm-services/tpl/blocks/header.php
2) Remove the .container-fluid class or the div with the class:



3) Save the file.

The effect should be as follows:



Regards,
Marcin
Attachments:

Please Log in or Create an account to join the conversation.

More
4 years 6 months ago - 4 years 6 months ago #7129 by sukanta_rakshit
sukanta_rakshit replied the topic: Modify header position
Thanks for this guideline. it worked successfully. Now I need to change some less/css according to below image.
1. If I change Padding 30px to 0px as the image firebug showed, it removes all paddings from all modules, I need to remove particularly for this header module, other paddings will be there as default.
2. Also want to remove the header module top empty space as the image marked 2. for this what codes I need to write in custom.css or custom.less ?

If possible guide me how to safely override all these so that in future I can update the template.
Thanks.
Attachments:
Last Edit: 4 years 6 months ago by sukanta_rakshit.

Please Log in or Create an account to join the conversation.

More
4 years 6 months ago #7133 by marcin
marcin replied the topic: Modify header position
Hello,

1) Add the following style to the custom.css file:
#jm-header .jm-module {padding: 0;}
2) In the layout.less file you need to remove the following part of the style:



Well, try to put your changes as much as possible into the custom.css file.
If you are editing other files, you need to remember or write down all your changes to restore them after any future update.

Regards,
Marcin
Attachments:

Please Log in or Create an account to join the conversation.

More
4 years 5 months ago #7205 by sukanta_rakshit
sukanta_rakshit replied the topic: Modify header position
As per your instruction everything worked successfully but these changes were applied to whole template. I wanted this changes for homepage only, so I copied the default theme from Template Manager, and assigned the copy to only homepage from Menu manager but default theme settings also changed. Can you guide me where I was wrong?

Please Log in or Create an account to join the conversation.

More
4 years 5 months ago - 4 years 5 months ago #7208 by marcin
marcin replied the topic: Modify header position
Hello,

If you want those changes for homepage only, there is a better solution.

1) In layout builder you need to copy (create) a new layout:



2) New layout file will appear in the following directory:

/templates/jm-services/tpl/

3) Edit the file and add a body class, for example "homepage":



4) In Layout Builder assign the new layout to home page.

5) You need to modify the code I provided you earlier:

- do not remove container-fluid class for the header section, just add the following style to the custom.css file:

.homepage #jm-header .container-fluid {max-width: none;}

- add the "homepage" class for the previously added style in the custom.css file:

.homepage #jm-header .jm-module {padding: 0;}

- modify the previously styles added to the layout.less file:



Now, the changes should be for home page only.

Regards,
Marcin
Attachments:
Last Edit: 4 years 5 months ago by marcin.

Please Log in or Create an account to join the conversation.

Time to create page: 0.527 seconds

INDICO S.C.

ul. Wałowa 10/3, 84-200 Wejherowo, registered in Centralna Ewidencja i Informacja o Działalnosci Gospodarczej
NIP/VATID: PL5882424318

Copyright © 2009-2019 Joomla-Monster.com All rights reserved.

Joomla-Monster.com and this site is not affiliated with or endorsed by The Joomla! Project™. Any products and services provided through this site are not supported or warrantied by The Joomla! Project or Open Source Matters, Inc. Use of the Joomla!® name, symbol, logo and related trademarks is permitted under a limited license granted by Open Source Matters, Inc.