Jump to content

Archived

This topic is now archived and is closed to further replies.

alasdairc

How do I create a Light Grey Border around all Sections?

Recommended Posts

alasdairc    0
alasdairc

High folks, 

 

I'd like to add a light grey border around each of the sections on my site to give a bit of definition / differentiation.

 

What's the best way to achieve this?

 

Thanks.

 

Alasdair.

 

Website URL: www.alasdaircarter.com
DMS Version: 2.1.4
WordPress Version: 3.9.1

Server/Host: GoDaddy Managed Wordpress
 

Share this post


Link to post
Share on other sites
Aires+    258
Aires

Hi,

Are you trying to achieve something like this

 

http://i.imgur.com/BlCSeCT.png

 

This can be done with classes

 

my-border {
border: 1px solid black;
border-radius: 10px;

}

 

which can be then added to custom area of each section you want a border around or target all like it did in the screenshot.

hope it helps

  • Like 1

ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
alasdairc    0
alasdairc

Aires that's exactly what I'm looking for. Thank you so much for the response.

 

My styling knowledge is weak so could I ask I'm entering this in the right place? (It's not coming up so I assume I'm doing something stupid.)

 

Thanks once again.

 

Alasdair

 

UPDATE: I've got this working by putting the individual parameters into the Inline Styling. Still a bit confused on how to do it via class so I've clearly got some reading to do.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

 

What you have added shouldn't really work or may work, but will likely cause issues. The field you have added that code in, is suppose to house only class names and not full CSS snippets.

 

So you will want to either remove it from the styling classes field and instead add it to the inline styling classes field or you can add my-border to the Styling classes field along with the following to your custom CSS:

 

my-border {
border: 1px solid black;
border-radius: 10px;
}
  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
alasdairc    0
alasdairc

Danny thanks for the reply. Works like a dream putting the CSS code into the Inline Style field. Can't get the Styling Class to work though.

 

I've added the

 

my-border {
border: 1px solid black;
border-radius: 10px;
}
 
to the CSS in Wordpress and also tried adding it to the Custom LESS/CSS field.
I'm happy just to put the code into the inline field.
 
I don't want to waste anymore of your time as it's probably me just being a spoon. I'll go off and do some reading, but I've achieved the effect I wanted for now.
 
Many thanks to you and aries for the advice.

Share this post


Link to post
Share on other sites
Aires+    258
Aires

Danny is correct maybe I should have been for specific on where to add it.

 

I recommend  doing that way because in the long run it will save you alot of headache.

 

http://i.imgur.com/sJJolMg.png 

 

By doing it this way you can going in and just change the color in custom css and it will change the color for every border that has this class.

 

The way you currently have it you will have to go into every section and change it one by one if you decided to change the color or border radius which can be a real pain.

  • Like 1

ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
alasdairc    0
alasdairc

OK I tried going back and using classes and this is what I've spotted.

 

Assuming I've put the correct things in the correct places, I'm not getting anything passed across into the style=" " in the page source code.

 

I've attached some screenshot fragments.

 

aries made a good point about using the class technique as I may want to change the parameters in the future.

 

Alasdair

 

 

Share this post


Link to post
Share on other sites
Aires+    258
Aires

alasdairc you forgot the dot

 

.my-border {

 

in the custom less/css ...all classes have periods in front of them


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
alasdairc    0
alasdairc

(Bangs head off the desk - really hard)

 

Aires you are a true Gentleman. :bow:

 

Thanks to you & Danny for putting up with my stupidity & CSS ignorance.

 

I'm off to find a dark room to sit in for a while. I promise I'll not post again on this thread.  

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

:) No problem.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • 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>  
    • Jared Smith
      By Jared Smith+
      I'm trying to make a visible border around the entirety of a client's site.  Example on some other site here:
      http://www.makeyourvisionreal.com/movement

      So it is around the Title, Menu, and Content Area.  I'm having a bit of difficulty with this on pagelines, using the Framework theme. It's slightly more complex because the site has a "landing page" that doesn't need the border. Much like this homepage
      http://www.makeyourvisionreal.com/
       
      Right now I'm using a content width of 80%, and fullscreen.  But maybe thats not the best way to do it.  
       
      So, with the #site id, I can hit the whole area on most of the site, but I'm not sure how I can remove it for just one page.
      #site { border:1px solid #ccc; margin: 100px 5% 5% 50px; } anyone have any suggestions?  Maybe I need to go make a child template, not sure?  Thanks!
    • 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!
    • 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
       
    • chamois_blanc
      By chamois_blanc+
      What is the right/best way to make a one-page website with PL5? The framework seems to hardcode section IDs without any possibility of changing them. Scrolling to a page section requires the link to use the section ID, ie <a href="#<section_ID>">...</a>. I don't see myself hardcoding weird section IDs in there as this will show up in the address bar.
      Please advise, thanks!
×