- This topic has 1 reply, 2 voices, and was last updated 7 years, 9 months ago by
.
-
Posts
-
Hello,
we are new to the intense plugin and honestly a bit overwhelmed by all the features.After testing label, content box, blockquote and promotional box, we can’t find a way to do a box with only left border and an label to it.
An example of what we are trying to do is the “Our Pick” area at the beginning of this page:
http://thewirecutter.com/reviews/best-wireless-carrier/
Basically its a left border with an orange “label” floating left of a text.
Is there any way to create something like this with the intense plugin?
Would be great if anybody could help.
Hello,
The promo box lets you control the different borders around the box. To add the orange ribbon, this can be done with some CSS. Here is an example with the CSS inline for the ribbon:
[intense_promo_box border_left="1px solid #cccccc" background_color="#fff" border_top="0px solid #ccc" border_bottom="0px solid #ccc" border_right="0px solid #ccc"] <h2 class="ribbon" style="margin-left: -10px; box-sizing: border-box; margin: 20px; height: 30px; width: 100px; color: #000; font-size: 16px; text-align: center; line-height: 30px; padding: 0 10px; position: absolute; left:-15px; background-color: #ffba13;"> Our Pick <div class="fold" style="bottom: -9px; border-width: 9px 0px 0px 10px; border-color: #b6830f transparent transparent; box-sizing: border-box; position: absolute; left: 0; width: 0; height: 0; border-style: solid; color: #fff; font-size: 30px; text-align: center; line-height: 40px;"></div></h2> <img src="https://slcphoeniximages.s3-us-west-2.amazonaws.com/7098/fullsize.png" alt="Verizon Image" /> [/intense_promo_box]
You must be logged in to reply to this topic.