ROCKETTHEME IS CLOSING JUNE 30, 2025. Read our Farewell Blog Post for more info.
SOLVED Styling Gantry 5 Helium
-
-
- Maurice Lehr
- Jr. Rocketeer
- Posts: 40
- Thanks: 0
-
Hai,
I am busy restyling the Megiq website. For the new styling I use the Joomla template Helium, with framework Gantry5. You can find the new website here: www.nieuw.megiq.com .
1. In the upper part, section navigation, there is now the menu bar and above that an extra module with social media icons. I want to style this upper part (so where the icons are now) in a different way than the menu bar. What is the best way to do that?
2. A part of the website is a webshop with Hikashop, for example nieuw.megiq.com/shop/vector-network-analyzers
In terms of styling, that does not go quite well. Is Helium compatible with hikashop? Or is there perhaps another Gantry5 template that is more suitable?
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
I've split this as a separate topic as it is a different and unrelated question to your previous topic.
Looking now...
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
1. Using custom CSS. To create a custom CSS compatible with Gantry 5 please read this
http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet
.
Remember to recompile CSS from base outline too.
2. We do not provide any styling for Hikashop in any of our templates. If additional styling is required then that has to be done with Custom CSS. We cannot guarantee compatibility with every third-party product, but I can tell you that there are many other members who use Hikashop with our templates. That said, there will be some styling that needs to be tweaked a little using custom CSS because of the way that Gantry 5 styles the template.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Maurice Lehr
- Jr. Rocketeer
- Posts: 40
- Thanks: 0
-
Thank you Mark.
I have partly succeeded in giving the upper part a different background color than the navigation bar, but not completely. See nieuw.megiq.com/
As you can see in the print screen, the left and right parts are still black instead of gray.
This is the css code that I used in the custom.sccs file:
#g-navigation .g-container .g-grid .size-50 { background: # 777; }
How can I also adjust the colors of the left and right sections?
This image is hidden for guests.
Please log in or register to see it. - Last Edit: 5 years 4 months ago by Maurice Lehr.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
You can't as it is structured now. You would need to change the layout of the navigation section from "fullwidth (boxed)" to "fullwdith" and also move the menu out to another section unless you are happy for that to go all the way across too). In all this you can simply just change the "navigation" section background color in the "styles" section of your outline.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Maurice Lehr
- Jr. Rocketeer
- Posts: 40
- Thanks: 0
-
The navigation bar is now in Header position.
See print screen:
1. When I move over a main menu item with my mouse, a cross will now appear. How can I remove that?
2. The background of the submenus is transparent. How can I change that and how can I color the background of these submenus?
This image is hidden for guests.
Please log in or register to see it.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Please would you post your URL, superuser id and pswd in the secure tab of your post and I'll have a look for you.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Maurice Lehr
- Jr. Rocketeer
- Posts: 40
- Thanks: 0
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Use this code...
To create a custom CSS compatible with Gantry 5 please read this http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet ..g-main-nav .g-toplevel > li.g-parent.g-selected > .g-menu-item-container > .g-menu-parent-indicator::after { content: "\f078"; } .g-main-nav .g-dropdown { background-color: white; }
Remember to recompile CSS from base outline too.
When developing web sites it is useful to learn to use either, the Inspector in Firefox, Chrome Developer Tools in Chrome, or one of the other browser developer tools, they will save you hours on things like this and they're very easy to use.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Maurice Lehr
- Jr. Rocketeer
- Posts: 40
- Thanks: 0
-
Time to create page: 0.064 seconds