Shape 5

Joomla Free Templates => Design Control - Free => : ecomian March 19, 2016, 08:46:16 PM


: Putting a link or module on the responsive header picture
: ecomian March 19, 2016, 08:46:16 PM
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


: Re: Putting a link or module on the responsive header picture
: mikek March 21, 2016, 07:26:47 AM
Hello,

The header is not designed for an image, that area is designed for the logo only. Adding an image there would require custom programming, we don't provide this as part of our support. If you can post a url to your site I can see if there's an easy fix, otherwise it is css that you will need to create.

: Re: Putting a link or module on the responsive header picture
: ecomian March 21, 2016, 03:52:40 PM
: mikek  March 21, 2016, 07:26:47 AM
Hello,

The header is not designed for an image, that area is designed for the logo only. Adding an image there would require custom programming, we don't provide this as part of our support. If you can post a url to your site I can see if there's an easy fix, otherwise it is css that you will need to create.


Thank you mikek  for your reply.   The site is on a XAMP local server and is not published yet so I  cannot give a url. I can put it out to a test url. 

How can I do the css properly to do what I want? Can I still just use the custom.css overide file or is  it more involved than that?

Thank you for your help




: Re: Putting a link or module on the responsive header picture
: mikek March 22, 2016, 07:30:38 AM
Hello,

You would create the custom css in the custom.css file. I would suggest using Firebug for Firefox, it will help you identify the css and IDs for this area and develop the appropriate the css.