Forum Support

Shape 5
March 28, 2024, 06:43:31 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Putting a link or module on the responsive header picture  (Read 432 times)
ecomian
Jr. Member
**
Offline Offline

Posts: 12



« on: 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:

Code:
<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

Code:
#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

Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #1 on: 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.
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
ecomian
Jr. Member
**
Offline Offline

Posts: 12



« Reply #2 on: March 21, 2016, 03:52:40 PM »

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



Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #3 on: 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.
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.