Jump to content
Madi

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

Recommended Posts

Madi+    1
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+    1
Madi

Do I just create new sections?


- Madi

Share this post


Link to post
Share on other sites
Rob    547
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+    1
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+    1
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    547
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+    1
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    547
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

    • 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>  
    • flourishdesignstudio
      By flourishdesignstudio
      Hi,
      I am having an issue with the Lax sections on Platform 5. I can embed a widget or text box into a Lax section which is really neat, but the image in the background (the parallax image) seems to get stretched and doesn't scale in an attractive way.  For example, the page http://ed6.61e.myftpupload.com/#clients has a parallax section with a woman's face  and I thought is would scale as the browser window gets smaller but the zoom-level never changes. Also, the amount of parallax shift seems more dramatic than what we want. I thought that if I uploaded a shorter image it would scan/scroll less since the height from the image's top to bottom would be less. However, that doesn't seem to have any effect and I am at a loss of how to properly control the way the image is displayed within that box. Any thoughts, tips, or suggestions to get me pointed in the right direction?
      Thanks so much for the help!
    • Audun MB
      By Audun MB+

      Here:http://attac.no/global-ulikhet/
      The images are forced into a boxed frame so that you can't see the whole picture. Doesn't look so good. Is this a bug? A feature? How can I fix it?
    • JudithKlinger
      By JudithKlinger+
      The recent WP update seems to be quite cheeky...messing about with a number of things. 
       
      Having trouble with boxes displaying differently in different browsers.  1st screen shot is Chrom...looks ok. 
      2nd screenshot is Firefox...colors are different. Icons are different. Have weird 1000's next to the icons. Any idea what's going on? 
       
      Thanks!! 
      Judith
       
       


    • PierreFF
      By PierreFF+
      Hello Everyone, 
      I think this one is for the pagelines team. 
      I have some trouble with the Adventure section plugin https://www.pagelines.com/product/pl-section-adventure/ that doesn't seem to load in any of the three websites I run using pagelines. 
      I do the setup via the extend platform as usual. It tells me that the plugin is installed and activated but unfortunately it doesn't appear on the page editor.
      I have just tried it consecutively with three websites I own with the same result.
      My intention was to use it with this website: http://launchpadweekend.foundersofthefuture.co/ (free version)
      And I also tried with this website http://foundersofthefuture.co/ (pro license) and this one http://ffactor.me/ (free version). And I have the same problem with each. 
      I would love to see how I could solve this issue. 
      Thanks a lot. 
      Pierre
       
×