Forum Support

 
Advanced Search


[1]

Offline jimbondox
Free Member
Posts: 795
Posted on: January 30, 2016, 05:50:52 PM

I want to put text over an image and tried a few different versions but it never comes out ok. using this template what is the best way to go about it?

the website is set for 1250 width

the image is 1900 x 600 pixels and dark, I would like to add text to the right side of the image about 40% of the image width. further would like the top part of text to be H2 then break and paragraph.

For Responsive website

please help Smiley

I was thinking of doing this in a module
« Last Edit: January 30, 2016, 06:10:47 PM by jimbondox »
Logged

Offline jimbondox
Free Member
Posts: 795
Posted on: January 30, 2016, 08:52:33 PM

Ok I added this to custom css

Code:
/* Alpine 10"-------*/

.product-maps {
    background: #fff url("/images/x110-slv_maps.jpg") no-repeat scroll 50% 0 / cover ;
}

.container::after {
    clear: both;
    content: " ";
    display: block;
}
.container {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    max-width: 1228px;
}

.product-infoOverlay .product-infoOverlay-contentRight::after {
    left: 100%;
}
.product-infoOverlay .product-infoOverlay-content::after {
    background: inherit;
    bottom: 0;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    width: 9999px;
}
.product-infoOverlay .product-infoOverlay-contentRight {
    float: right;
    margin-right: 0;
}
.product-infoOverlay .product-infoOverlay-content {
    background: rgba(255, 255, 255, 0.8) none repeat scroll 0 0;
    box-sizing: border-box;
    float: left;
    font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 2.3125rem;
    margin-right: 1.69492%;
    padding: 140px 0 140px 80px;
    position: relative;
    width: 57.6271%;
}

Added this to the article:

Code:
<div class="product-maps product-infoOverlay">
<div class="container">
<div class="product-infoOverlay-content product-infoOverlay-contentRight">
<h2>Wherever Life Takes You, You?re Covered</h2>
<p>The X110-SLV offers reliable navigation to wherever work or play takes you with preloaded HERE? map data of the United States and Canada, including Alaska, Hawaii, Puerto Rico and the Virgin Islands, which translates to maps galore. With turn-by-turn instructions delivered by Text-to-Speech (TTS) technology, street names, freeway numbers and freeway exit names are announced clearly through your vehicle?s audio system. Choose from different intuitive map view options, such as 3D mapping, split map, and turn-by-turn arrow view. This unit also features Alpine's exclusive Graphical User Interface with intuitive screen graphics, so it's easy for you to find your way. Thanks to the included free lifetime traffic service, see the congestion ahead of time so you can choose an alternate route. Get quick and easy directions from start to finish.</p>
</div>
</div>
</div>

the issue is that it is huge and resizing to be smaller
Logged

Offline jonahh
Free Member
Posts: 23789 WWW
Posted on: February 01, 2016, 12:06:14 PM

Hello,

Did you try using any of the info slides? These would allow you to do text over an image.
Logged

Offline jimbondox
Free Member
Posts: 795
Posted on: February 03, 2016, 09:33:48 AM

I did end up doing it because i am in a bind. not the result I was looking for.

I am looking for something like this:

See attachment

image slide css 3 & 4 have black box on the right over the picture. If there was a way to get rid of it that would be great, also no text slide.

javascript version doesn't work at all

so I am open for suggestions. I want it responsive as 46% of the visits to the site is with mobile or tablet browser

Here is the link to the current article http://www.access1alarm.com/vehicle-specific/gmc/sierra/navigation-10

thanks
Logged

Offline jonahh
Free Member
Posts: 23789 WWW
Posted on: February 03, 2016, 11:39:07 AM

Hello,

In order to do this it would require custom coding to achieve. You could get quote here:  http://www.shape5.com/custom_services.html

As for the JavaScript version not working, I noticed it broke on the demo too. I've updated the demo and downloads and to fix on your site just grab the "s5_info_slide.css" file and overwrite yours.
Logged

Offline jimbondox
Free Member
Posts: 795
Posted on: February 05, 2016, 09:35:44 AM

Thanks
Logged

Offline jimbondox
Free Member
Posts: 795
Posted on: February 05, 2016, 11:38:28 AM

Hello,

In order to do this it would require custom coding to achieve. You could get quote here:  http://www.shape5.com/custom_services.html

As for the JavaScript version not working, I noticed it broke on the demo too. I've updated the demo and downloads and to fix on your site just grab the "s5_info_slide.css" file and overwrite yours.

I believe I am close with the code originally posted. I will work it a bit more.

I will try the javascript version also

Logged
[1]

Jump to:  


Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Page created in 0.028 seconds with 21 queries.
Need some help getting your site up and running? Be sure to check out our tutorials area, post on the forum or hire us
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.