Jump to content

Archived

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

Toby

Add padding to 'tabs' (shortcode) globally

Recommended Posts

Toby    2
Toby

Hi, I would like to add padding to the 'tabs' short code, globally so there is more space on the left and right throughout my site.

 

Here is an image of my section, and as you can seethe image lines up flush with the end of the tab.

http://postimg.org/image/lz0l3wtrx/

 

I would like to add 10px of padding to the left and right, I think I am on the right track with:

 

 

#site .tabs {
padding-right:10px;
padding-left:10px;
 
}
 
I am not sure what the identifier/property is.
Any help would be greatly appreciated, Thanks

Share this post


Link to post
Share on other sites
Erwan    37
Erwan

Toby

Did you try with the tab-content class instead of the tabs class (not sure this one exists)?

Share this post


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

Toby,

 

I think Erwan is right and you should be targeting the tab-content class.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Toby    2
Toby

I applied it to the tab-content class and achieved this result:

http://postimg.org/image/uiokferi5/

 

As you can see it has pushed the white space over the 'content/loop' area, also it does not line up with the top line.

Is there a way to keep the padding within the 'content/loop' section?

 

If you want to compare this is what it looks like before i apply the padding:

http://postimg.org/image/lz0l3wtrx/

Share this post


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

Can you provide a link to the page in question please.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Toby    2
Toby
The site has an under construction banner on it at the moment.
I can take it down for 10 minutes if you like?

Share this post


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

Yeah sure, just reply here when you have taken it down, don't forget to link the page you're referring too.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Toby    2
Toby
Thanks Danny.
The site is active now.

The page is:
www.innovativethinkingit.com.au/news

I will put it back up in 10mins.

Share this post


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

That page doesn't contain any tabs ?


Please search our forums, before posting!

Share this post


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

Update, you gave me the wrong link :D

 

You should have give the Our Clients page link, nevermind. Add the following to your custom CSS:

 

#site .tab-content {
padding: 30px;
box-sizing: border-box;
}

http://d.pr/i/mG3D

 

Change the 30px value to whatever, you like. The more information on why I have added Box-sizing, see here - http://www.w3schools.com/cssref/css3_pr_box-sizing.asp


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Toby    2
Toby
I'm sorry I linked the wrong page.
The correct one is
www.innovativethinkingit.com.au/markets

Share this post


Link to post
Share on other sites
Toby    2
Toby
Amazing thanks Danny!!
The site is still up if you want to see what it looks like :)

Share this post


Link to post
Share on other sites
Toby    2
Toby
Site is back up now.
Thanks again for the help Danny"] and @[member="Erwan

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

    • John Olsson
      By John Olsson+
      We're often working with ACF (https://www.advancedcustomfields.com/) that's great for user experience in the backend, 'cause we don't want out clients to be in the editor to much.
      So we want to be able to use shortcodes in the editor fields, regardless of section, THIS WOULD BE SO GREAT. Is there a way to fix this, it should open up som much more functionality.
      In ACF, the shortcode is for example: 
      [acf field="field_name"] ...for example, I want to att field_names value to display in a section, i understand I can make it in embed and so, but I want it in titles and options, the whole range.
      I know I can build my own sections, that we've done, but it's not very effective, and thats what PL5 is about.
      Any ideas on this, can Pagelines take this in the core? I guessing there are more than just ACF out there who can use this.

    • Barnaby Skinner
      By Barnaby Skinner+
      Hey all, hope I worded the topic correctly!
      I just need to know if either 1) I'm making a mistake or 2) this could be set as a new feature?
      Using the global settings typography parameters, I have a global paragraph font type (set using googlefonts) and have set the style to align:justify. When laying out <p> text inside a simple TEXT module, the <p> text adheres to both the font type and justification. Perfect.
      Now, when I set <p> text inside the PARAGRAPH TEXT field within an ELEMENT module, the <p> text adheres to the font type, but not the justification. It's rather annoying as I like to fully justify para text across the board and tend to use Element modules instead of text boxes for various reasons. It also seems silly that some PARAGRAPH TEXT fields adopt global settings, whilst other don't.
      Or I'm doing it wrong :S
      Any help or advice is much appreciated!
      Cheers
    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      every since Chrome introduce scroll anchoring (see chrome://flags) blog posts on my page start scroll automatically as soon as the user scrolls down a bit. It is super annoying and I don't know exactly what triggers the incompatibility with Chrome's latest feature that is supposed to improve usability.
      Since I don't know what causes it (Pagelines, or a Plugin), I would like to disable the feature using a CSS override that Google describes as follow:
      "Scroll anchoring aims to be the default mode of behavior when launched, so that users benefit from it even on legacy content. A CSS property overflow-anchor can disable scroll anchoring in part or all of a webpage (opt out), or exclude portions of the DOM from the anchor node selection algorithm. This property supports the following values when applied to an element E:
      overflow-anchor: auto (the default value) declares that the DOM subtree rooted at E is eligible to participate in the anchor node selection algorithm for any scrolling box created by E or an ancestor of E. overflow-anchor: none declares that the DOM subtree rooted at E is not eligible to participate in the anchor node selection algorithm for any scrolling box created by E or an ancestor of E." Do you guys happen to know how to use that property with the ROOT element so it applies to the whole page?
      Thanks
      Michael 
    • 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>  
    • bnapoli
      By bnapoli+
      On my site www.anewbeginning.com the "toggle" function mysteriously stopped working.  I have tried all browsers, tried disabling plugins, removing all the relevant CSS but still cant understand why it isn't working.
      The toggle is placed on this page: http://anewbeginning.com/?page_id=15965 and http://anewbeginning.com/?page_id=10779 but it does not display.
      On my other Platform5 websites, that exact code works fine: see here http://4aa.d11.myftpupload.com/?page_id=123
      Code is the same. Please help, thank you!
×