CODEWITHSUNDEEP
javascripthtmlcss
Plumpie
Plumpie

Reputation: 466

How to adjust the size of a Launchrock-widget?

I'm running a Joomla website, and am trying to embed a launcrock-widget (launchrock is a service that lets people interested in your project enter their email, so when you're done you can email them), but I can't really adjust the size of it. The widget comes in 1 line of javascript code that I put in a Joomla article using the Sourcerer Code Helper plugin.

The widget is embedded here: http://cavemanskin.com/index.php/14-day-meal-plan-widget

Now there are 2 problems: for some reason 1) the widget takes up the whole page and 2) the grey box under the text is gone so you can't really read it. With 'inspect element I noticed that Launchrock puts everything in a DIV named 'lr-widget'. I added the code:

<style type="text/css">  
div#lr-widget { height:300px; width:300px }  
</style>

But the widget is still the same size. Can anybody tell me what I'm doing wrong?

Edit: the code of the widget only works on the domain that I gave launchrock, I'd like to experiment with a .html on my PC with the javascript code in it but the launchrock widget doesn't load at all.

Upvotes: 1

Views: 1835

Answers (1)

Riskbreaker
Riskbreaker

Reputation: 4791

Looking at this in Chrome developer there is an inner shell that can also be customized and added in your master css so overwrite their classes and added to your Master CSS.

EX:

.LR-content {
    color: #FFFFFF;
    font-family: "Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
    font-size: 14px;
    font-weight: 300;
    height: 200px;
    min-height: 100%;
    position: absolute;
    width: 500px;
    z-index: 0;
}

.LR-bg-img {
    background-attachment: fixed;
    background-color: #222222;
    background-image: url("img/classicBg.png");
    background-position: center center;
    background-size: cover;
    content: "";
    height: 50%;
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
}

I was just testing those and you can see the many changes. So you can try grabing those codes and overwrite them on your master.

Upvotes: 1

Related Questions