Menu color in pages without slideshow - JF Salina - Joomla Templates

Welcome, Guest

TOPIC: Menu color in pages without slideshow

Menu color in pages without slideshow 27 May 2016 21:41 #8898

Hi,

I'm trying to obtain a visible menu in those pages different from the home that don't have a slideshow. In these pages the menu is transparent, with white text color and if you have a background-color of the whole page set to light-grey, these menu voices are invisibles.

I'm looking on your jfsalina demo, and I saw that you used a class called "section-inner" to obtain a dark background with the page title (for example in a page called "Masonry Portfolio").
How I can obtain a similar effect? I have tryed to put a module in "welcome" position and add "section-inner" class, but this method don't work. I have tryed also to with a custom module, setting the width to 100%, heigth 200px and a background color, but I don't like the results.

What can I do?

Thank you

Reply Quote

Posts:75
me
Senior Boarder
OFFLINE
Karma: 0

Re: Menu color in pages without slideshow 29 May 2016 14:15 #8901

I solved using a module in "slideshow" position, I have created a Joomla "customized" module, and I have added with "Sourcerer" (Sourcerer is a plugin for adding html, css, php and js code snippets) this code writed by me:

 
 
{source} <!-- the sourcerer snippet starting tag -->
 
style <!-- You need to put here the START style tag, this forum can t permit me to add this kind of tag with major and minor signs for style element -->
 
.background_for_menu{
width: 100%;
height: 400px;
float: left;
position: relative;
top: 0;
background-color: black;
}
 
.bg_image_for_menu {
position: absolute;
background-image: url("/images/back_menu.jpg"); <!-- your image source -->
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 400px;
opacity: 0.4;
width: 100%;
}
 
.text_for_menu_area {
width: 100%;
position: absolute;
margin-top: 160px;
font-size: 46px;
font-weight: 300;
letter-spacing: 3px;
color:white;
}
 
style <!-- put here the END style tag here, this forum can t permit me to add this kind of tag with major and minor signs for style element -->
 
 
<div class="background_for_menu">
 
<div class="bg_image_for_menu"> </div>
<div class="text_for_menu_area"> Contact Us </div>
 
</div>
 
{/source}

The result it's similar at what you can see here: www.joomfreak.com/demo/jf_salina/portfol...rtfolio-masonry.html with a dark top bar, title, and background image with opacity.

I hope that this solution can be useful for other people.