Jump to content
Madi

Customize Background of Specific Section (i.e. Banner, Box, Highlight)

Recommended Posts

Madi

How do I change the background for specific banners?

 

I already know how to change the background for banners on a specific page, but now I have multiple banners on one page that I would like to customize.

 

Having a hard time finding it in the forums, so please redirect me if this topic has already been answered.


- Madi

Share this post


Link to post
Share on other sites
Madi

Do I just create new sections?


- Madi

Share this post


Link to post
Share on other sites
Rob

Madi,

 

I'm not quite sure how one might do this unless each banner has a unique ID. They should.  When browsing the site in Firebug or Chrome's Inspection Tool, do you see any unique IDs or classes for the different banners?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Madi

It's all the same id name (i.e. section id="banners"), but with different class names (i.e. class="container clone_2 section-banners fix")

 

Not sure how to include the class into what I already have, which, for banners on my homepage, is:

 

.page #banners{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f3f3f3), color-stop(100%,#ededed), color-stop(100%,#ffffff));
box-shadow: 0 0 2px 2px rgba(0,0,0,0.3);


- Madi

Share this post


Link to post
Share on other sites
Madi

This works but is it good coding? -->

 

 

.page section#banners.container.clone_2, {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f3f3f3), color-stop(100%,#ededed), color-stop(100%,#ffffff));
  box-shadow: 0 0 2px 2px rgba(0,0,0,0.3);

- Madi

Share this post


Link to post
Share on other sites
Rob

Hi,

 

Try

.page section #banners .container .clone_2 and see if that works just a bit better.

 

{

  background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#ffffff), color-stop(50%,#f3f3f3),
color-stop(100%,#ededed), color-stop(100%,#ffffff));

  box-shadow: 0 0 2px 2px rgba(0,0,0,0.3);}
  • Like 1

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Madi

So just a space between everything?

 

I'm not a coder so I don't understand how that's more efficient. 


- Madi

Share this post


Link to post
Share on other sites
Rob

I'm not a coder either, and the spaces will do no harm. I have no idea if they'll fix the issue.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • sakkthi subramaniyam
      By sakkthi subramaniyam
      Working on a very old site which has  pagelines framework theme. I need section plugin. so i can install postpins section. I have lost backup copy.
      Thank you.
    • yemoonyah
      By yemoonyah+
      Hi, even though I just got a SSL certificate, I can't get the green padlock to appear due to the following error:
      :A file with an insecure url of "http://yemoonyah.com/wp-content/plugins/pl-section-boxes/check.svg" was loaded via the javascript file: https://yemoonyah.com/wp-includes/js/jquery/jquery.js?ver=1.12.4 on line 3. The insecure URL may not be directly contained in the script file and may exist elsewhere."
      I figured if I delete and re-install the plugin it might fix the problem but will my boxes on the website still be there? Or do I have to redesign everything all over again if I delete the plugin and then re-install it?
    • Borries
      By Borries+
      I know this is not an easy problem. Maybe there is a easy solution.
      I have tryed to uses the existing solution, that I have found in the forum
      I changed the colours of my nav (simple nav) and the hover effect (a. hover).
      I really tryed to highlight the active/used link in the nav but I cant figure it out.
      I want it to be black when active.
      Any help would be appreciated. Thanks.
      http://www.marcborries.de  nav link: "Sinn & Selbst" 
    • elementalkites
      By elementalkites+
      Good evening. I am attempting to use the Impulse section on a page I am working on (https://dev.elementalkites.com). The tool seems to have the ability to overlay a logo on top of the slider images but in my case it isn't working, even though I have added the logo file and given it a height to display at. I have attached a screenshot for reference. Any help would be appreciated.
       
       
    • jojoking
      By jojoking+
      I have to admit to being baffled.
      I'm trying to embed a video (from my WP media library) within a WP post using the videobox section shortcode.
      The shortcode section popup only allows two items to be configured - the section type, in this case videobox - and a unique id. There's no URL or other parameters such as autoplay or loop which are available within the Pagelines editor.
      Whatever I put in the unique ID makes no difference to what is shown which seems to be a default video with stars or white noise on a black background.
      I assume I need to define this ID somewhere else, or maybe WP has done it for me?
      HELP!
       
      PS This is the page source generated when a shortcode is added within the WP post editor
      <!-- VideoBox | Section --> <section id="videobox_1675853156" class="pl-sn pl-col-sm-12 pl-col-sm-offset-0 pl-sn-videobox" data-object="PL_VideoBox" data-clone="1675853156" data-level="0"><div class="pl-sn-wrap"><div class="pl-sn-pad fix" data-bind="pledit: true" > <div class="video-highlight"><h3 class="video-title" data-bind="pltext: vb_title"></h3></div> <div class="pl-video-box" data-bind="plcallback: { vb_autoplay: vb_autoplay(), vb_loop: vb_loop(), vb_controls: vb_controls(), vb_video: vb_video()}" data-callback="videobox"> <video id="280414138" autoplay loop > <source src="https://www.handinhandmanchester.org.uk/wp-content/plugins/pl-section-videobox/default.mp4?r=280414138" type="video/mp4" /> No browser html5 video. </video> <script> jQuery('#280414138')[0].load(); </script> </div> </div></div></section> </div>  
      If I add a videobox section using the Pagelines page editor the page source generated includes my video:
      <!-- VideoBox | Section --> <section id="videobox_udvu4uz" class="pl-sn pl-col-sm-12 pl-col-sm-offset-0 pl-sn-videobox" data-object="PL_VideoBox" data-clone="udvu4uz" data-level="0"><div class="pl-sn-wrap"><div class="pl-sn-pad fix" data-bind="pledit: true" > <div class="video-highlight"><h3 class="video-title" data-bind="pltext: vb_title"></h3></div> <div class="pl-video-box" data-bind="plcallback: { vb_autoplay: vb_autoplay(), vb_loop: vb_loop(), vb_controls: vb_controls(), vb_video: vb_video()}" data-callback="videobox"> <video id="429558737" autoplay loop > <source src="https://www.handinhandmanchester.org.uk/wp-content/uploads/2017/04/HIHWelcome.mp4?r=429558737" type="video/mp4" /> No browser html5 video. </video> <script> jQuery('#429558737')[0].load(); </script> </div> </div></div></section>  
×