Tagged: notification box
-
AuthorPosts
-
December 17, 2015 at 5:18 am #554187
See http://173.254.96.214/~thecfrgc/concrete-cleaning/gum-removal/
There is a warning notification box on that page. It is placed on the page using shortcode within a text element. When I put no spacer (with your shortcode) between the box and the text below it, there is not enough space there. I wanted about 20px, so I set 20px of whitespace separator with your shortcode, but it gave way too much space – much more than 20px. So then I decreaesed it to 5 pixels, but it is way too much space. So I am curious. Does the notifcation box shortcode only correctly when generated from a content element, but not when inserted into a text element using shortcode?
December 17, 2015 at 9:57 am #554289Hey robphat,
I’m not sure, did you achieve the look you wanted though? If not then please try to explain what changes you are looking to make.
Regards,
RikardDecember 17, 2015 at 5:55 pm #554554Please compare http://173.254.96.214/~thecfrgc/pressure-washing/ to http://173.254.96.214/~thecfrgc/concrete-cleaning/gum-removal/
The former has the notification entered via content widget into the page layout. The padding is normal. The latter link has the notification box entered via shortcode entered into a text widget. There was not padding between in at the text below it, so I added [av_hr class='invisible' height='20']
But that added way more than 20px. So now it is [av_hr class='invisible' height='5'], but as you can see it is way more than 5 px, and even still way more than 20px
So something is not working right with the whitespace shortcode.
Hope that helps you resolve the issue.
December 21, 2015 at 6:31 am #555764Hey!
There are br tags below the notification box. Please remove any excess spaces between the elements. And add this in the Quick CSS field:
p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 0; }
Regards,
IsmaelDecember 21, 2015 at 4:11 pm #555996Ismael,
This is the portion of the html code of that page, including some of the code before and after the notification box:
<h2>Top of the line EPA Compliant Pressure washers</h2>
Our pressure washers are compliant with the EPA requirements for water reclamation. It is now an EPA violation for you to flush dirty water down your drains. With Chesapeake Facilities Resources your gum removal, you have the peace of mind knowing that will not be in violation of the EPA regulations regarding pressure washers.[av_notification title='' color='red' border='solid' custom_bg='#444444' custom_font='#ffffff' size='large' icon_select='yes' icon='ue83e' font='entypo-fontello']
<h3>“Why can’t I use a water hose to remove gum?</h3>
Simply put, water hoses do not produce enough pressure to break up dried up chewing gum and separate it from your floor. To learn more about why pressure washers are necessary when cleaning your concrete surfaces, click here.
[/av_notification][av_hr class='invisible' height='5']
<h2>Our process</h2>
<h3>Treating</h3>As you can see, there is no <br> tags after the [/av_notification], but there was bunch of default space there. I added [av_hr class='invisible' height='5'] to decrease that, but it didn’t work. So are you saying within the html generated by the notification box shortcode, that there are <br> tags beneath it? If so will the css you gave >>>
p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 {
margin-top: 0;
}
Will this css only affect the placement of notification boxes via shortcode into the page, or will it also affect other page elements and/or notification boxes that are inserted via the notification content widget into the page builder?January 4, 2016 at 1:15 pm #559159Hi!
you can always use page-id to make sure the code Ismael provided to you will work on a specific page only, as shown for example here: https://kriesi.at/support/topic/changing-a-specific-page-with-quick-css/#post-223394
Best regards,
Andy -
AuthorPosts
- You must be logged in to reply to this topic.