Two Price Items in one row


#1

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


#2

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.


#3

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


#4

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!


#5

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;
}


#6

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.


#7

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.


#8

jipie it worked out! Thank you.


#9

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!


#10

Yeap, both those widgets come with their own padding.

You need to add this:


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


#11

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!


#12

Sure:


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


#13

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.


#14

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.