Hi, I am using your Design Control template on Joomla 3 and have used a full size header picture on the logo position. I have managed to some links on the picture. See attached header.jpg
All seems fine but it is not responsive. The link positions move as in attached header2.jpg
I am not a programmer, just picking up as I go. This is the code I ended up using, probably not the correct way, but it is what I did.
Custom html Joomla module on logo position:
<div class="custom_image"><img src="images/man_jumping4.jpg" alt="Man Jumping" width="1600" height="1125" border="0" />
<h2><a href="index.php/go-shopping" target="_self" class="linkstyle linkposition1">Go Shopping</a></h2>
<h2><a href="index.php/clinic" target="_self" class="linkstyle linkposition2">Online Clinc</a></h2>
<h2><a href="index.php/articles" target="_self" class="linkstyle linkposition3">Read Articles</a></h2>
</div>
In the custom css file of the Design control template
#s5_component_wrap_inner h1 {
text-align:center;
font-family:Philosopher;
font-weight: bold;
font-size: 3em;
line-height: 45px;
Color: #42592F;
padding: 0; }important
#s5_component_wrap_inner h2 {
text-align:center;
font-family:Philosopher;
font-size: 0.3em;
line-height: 14px;
Color: #000000;
padding: 0; } !important
#s5_header_area1 {
height:1px;
width: 100vw;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
} important!
#s5_header_area2 {
height:1200px;
width: 1600px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
} important!
customimage h2 {}
.linkposition1 { position: absolute; left: 75vw; top: 20vh;
}
.linkposition2 { position: absolute; left: 75vw; top: 50vh;
}
.linkposition3 { position: absolute; left: 75vw; top: 70vh;
}
.linkstyle {
font-family: georgia,palatino;
font-size: 3.0vmin;
font-style: italic;
font-weight: 900;
text-shadow: -2px -2px #ECE66C, 0px 0px 1px #000, -1px -1px #000000, 1px 1px #000, 2px 2px #ECE66C;
color: #42592f;
}
I know it is supposed to be better to put the image in the css, but have not been able to figure that out yet.
Can anyone help me to do this.
Also if would be nice to be able to put buttons and widgets on the picture. I have attemped Javascript. I have more than enough just with html and css.
Thanks