Two Price Items in one row

Hello,

I wanted to show two price items in one row. But the result is that they overlap each other. What can I do that they are shown propperly?
Site: http://looptheglobe.de/?page_id=271

Thank you!
Br,
Lisa

That widget is not part of the theme, but you can do with like this:


.widget_origin_price-box {
   width: 100%;
}

Anyway, the rule of thumb is that you need to use the front page template for pages you plan to use the page builder on.

Yea it gets also overlapped when I switch to the front page template.
But the custon css worked!! Thank you.

Is it possible to add another class with my own style to e.g. customs css or styles.css?

The idea is that I want to have different colors for this information:
<p class=“information”>Next dates: Jan/Feb 2015; Dez 2014 - fully booked</p>

Means “Jan/Feb 2015” should be green. “Dez 2014 - fully booked” should be red.

Thank you!

Do you have access to that HTML? If you do, you can do it like this:


<p class=”information”>Next dates: <span class="green">Jan/Feb 2015</span>; <span class="red">Dez 2014 – fully booked</span></p>

And this to your custom CSS plugin:


.green {
   color: green;
}
.red {
   color: red;
}

Thanks for your answer!
The question is where is that html-file and what is the name?!
I saw this code after I switched to the editor-mode for that price side. I can do some changes here but as soon as I push the “Update” Button it gets somehow overwritten with the old code… I recon its because that price table is made with the pagebuilder?! Do you know where the “real” code is stored ? :slight_smile:
Thank you.

I just checked that widget (it’s part of the page builder) and it seems the information field supports HTML. So you can add like this in it:


Next dates: <span class="green">Jan/Feb 2015</span>; <span class="red">Dez 2014 – fully booked</span>

Then add the CSS code I gave you earlier in the custom CSS plugin so the spans get coloured.

jipie it worked out! Thank you.

Hello Vlad,
back to the price table :wink:
I added a text before the the price items.
How can I decrease the space between the text and the price items. It look a bit to much at the moment.
http://looptheglobe.de/dates-prices/

Thank you!

Yeap, both those widgets come with their own padding.

You need to add this:


#panel-271-0-0-0 {
   padding: 30px 15px 0;
}

Thank you. Now it looks ways better!
I tried to get some “hooks” in the description text of the price item. But with using a “*” in the front of the line I get a hook and also a bullet. Do you know how I get just the hook?
Thanks a lot!

Sure:


.origin-widget li:before {
   content: '';
   margin: 0;
}

Thanks for the quick answer!
I get for one price item grey hooks for the other one orange hooks. Strange! Actually I like that orange. How do I get for the other price item also orange hooks?
Thx.

Seems like you chose orange for one and grey for the other from inside those widgets. Those ticks are images so I cannot give you any code, simply visit the widget options.