Home Forums Plugins Notice Bar Pro Custom CSS active site wide when notice enabled, or disabled, for specific page

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #105339
    Rick D’Haene
    Participant

    I have added the following custom CSS to the Custom CSS section of the Display tab: body { margin-top: 36px; }

    Adding this code pushes the page’s content down allowing the notice to display above, instead of on top of, the content in the header. The problem I’m seeing is that this custom CSS is added site wide, not just for the page I have selected / activated the notice on. Further, when the notice itself is disabled this CSS is still loading site wide. So, even with the notice disabled I’d have to remove the custom CSS so that it doesn’t impact the entire website.

    Can you tell me why the custom CSS is loading on every page of the website even though I have the notice set to display on a single page, and even when the notice in question is disabled? It seems to me that the custom CSS for the specific notice should only fire on pages where the notice is set to display, and only if the notice is not disabled.

    #105369
    wensolutions
    Keymaster

    Hello @bellinghamp,

    It is because you have added the general CSS targeting the general class which will affect all the pages.

    So you need to use the class from the notice bar and use the page ID so that it will only affect your desired place.

    Also, can you please provide your site URL so that we can inspect further and help you?

    Thank you.

    #110918
    Rick D’Haene
    Participant

    The website has a top bar section which displays a few links along with social media icons. When the notice is enabled the bar covers over this top bar section. Because the notice is added at the bottom of the page and adjusted to the top with CSS I’m not able to make it display as a block element in order to force the top bar down the page while the notice is active. To make this work I’ve added a margin-top rule for the BODY to give it the padding it needs.

    I had expected that the Custom CSS section within the Display tab of the notice would be setup to only use the custom CSS code entered on the pages which are selected in the Visibility tab. It seems pointless to me to have the Custom CSS rules, which have been added to a specific notice, loaded on pages which the notices are not configured to display.

    I then had expected the Custom CSS rules entered for the notice to only be active while the notice was configured to display using the Visibility tab. This too isn’t the case. The Custom CSS rules added for each notice are active sitewide regardless of whether the particular notice is configured to display currently.

    Do you have any suggestions for how I can accomplish what I’m after using this plugin? I need to push the top bar down the page but only while a notice is active. I’d like to keep the website’s URL private for my client. Is there a way I can communicate information about the website to you securely, without having it display in the support forums?

    #110940
    wensolutions
    Keymaster

    Hello,

    Can you please provide us with site URL in below given email so that we can help you?

    email: wensolution@gmail.com

    Regards.

    #110987
    wensolutions
    Keymaster

    Hello,

    Thank you for providing site URL.

    Can you please mention the position in the site where you are willing to display the notice shown in screen shot below:

    http://prntscr.com/q6ygjn

    Also, can you please provide us with screenshot by marking the position where to display the notice as our plugin provides the option to display the notice in the bottom section too.

    Regards.

    #110988
    wensolutions
    Keymaster

    Hello,

    Since, you have given CSS for Body, CSS has been applied for all pages as all pages contains ‘Body’ tag.

    Also, Please add following given CSS code to display notice in bottom section of page.

    .nb-notice-outer-wrap-4057 .nb-top-absolute {
      top: auto;
    }

    If you have any queries further, let us know.

    Thank you.

    #111481
    Rick D’Haene
    Participant

    Also, can you please provide us with screenshot by marking the position where to display the notice as our plugin provides the option to display the notice in the bottom section too.

    How can I provide you with a screenshot while also keeping the website anonymous through these forums? Would you like me to email the screenshot to the address you’ve provided? I feel like I’ve done a good job explaining where we’d like it to display. I’ve expressed the location in detail in both of my previous responses in this ticket thread. The website has a top bar which displays above the main navigation. This top bar contains the social media links. When the notice bar is enabled and set to display at the top, it covers over this top bar. I have to add the Body CSS rule to force the rest of the page down the screen so that the notice bar doesn’t cover over the top bar.

    Since, you have given CSS for Body, CSS has been applied for all pages as all pages contains ‘Body’ tag.

    Also, Please add following given CSS code to display notice in bottom section of page.

    .nb-notice-outer-wrap-4057 .nb-top-absolute {
    top: auto;
    }

    I know that it’s being applied to all pages, that’s what I told you it was doing. What I don’t understand is why it is. The plugin should be setup to out the CSS rules ONLY to the pages which are indicated in the Visibility tab. And the rules should only be active IF the notice bar is enabled, and schedule to be displayed. This would only output the added CSS rules on the specific pages which a notice is configured to display. It’s weird to me that you wouldn’t use these user indicated options to control the output of the CSS. If the BODY rule I’m adding were only being output on the pages with a notice, when that notice was schedule to display, this wouldn’t be an issue.

    Further, the CSS rule you’ve posted forces the notice to display at the bottom of the page, and that’s not what we want. We want it to display at the top of the page, but it shouldn’t cover over the top bar with the social media links. If this still isn’t clear, please re-read my previous posts while looking at the website.

    #111520
    wensolutions
    Keymaster

    Hello,

    Actually, ‘Notice Bar pro’ plugin provides the feature of setting the position of notice section to be displayed in frontend section. You can add top margin for the notice section(to set the position) by going to Notice Bar pro > Individual Notice Bar(edited notice bar)> Display > Margin from Bottom or Top as shown in screenshot below:

    http://prntscr.com/qa8hfx

    Also, if you want to display notice section in top bar then you have to add custom CSS for specific classes of the pages or posts where you are willing to display notice section.

    To display notice section in top bar in your home page, please add following given CSS code.

    .page-id-3792{
    margin-top: 70px;
    }

    Further, you have to add above given CSS code by replacing the class(class with page id or post id) with class of specific page or post where you display the notice.

    Hope this helps.

    If you have any queries further, let us know.

    Thank you.

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.