Jump to content

Archived

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

alisamski

CSS questions

Recommended Posts

alisamski+    8
alisamski

Hi Ellen,

 

ellenmva Using the accordions and having a bit of trouble isolating some of the css for color and border-radius.

 

Three things...

1. Within an actual section added to a page... the color works fine.

When I use the shortcode I cannot set the color. See this link: http://bit.ly/1mkP5xi (shortcode is in the tab loans)

 

I would rather not change all accordions to one color in CSS (as I have some color changes on individual pages) see here: http://bit.ly/1niW9uB

 

2. I was able to change the overall border radius to 10px  however, in the shortcode it does not work.

 

3. Using Font awesome.... the closing selector gets activated on only some of the accordions in the calculator on this page : http://bit.ly/1niW9uB (I have it set not to use the open close selector) Did not want it to show up just the icon.

 

I'm not isolating the correct css..

 

Please advise.

Thanks

Share this post


Link to post
Share on other sites
ellenmva    112
ellenmva

alisamski I like the way you are using Accordions. I am working on an update that will make it easier to style. That's a little ways off though so let's see if we can get things working right for you.

 

1 & 2. For the shortcode, try targeting the styling with the accordion id like so:

.accordion-heading.ac432033324-consumer-loans {
	background: #000000 !important;
	border-radius: 10px;
} 

Right now you need to put the important in to override the background color (that's one of the things I'm working on in the update, not to need the !important).

 

Each accordion has a class along with .accordion-heading, so the one for Auto Loans is  .accordion-heading.ac432033324-auto-loans

 

3. I'll need to look into the font-awesome issue so that it only puts the closing icon if the opening icon is used, not any other icon. Probably just a quick fix in the section. Will let you know when update with fix is available, should be next day or two.

 

Let me know if the css works.

 

Best,

 

Elen

 

 


Ellen Moore

Pagelines Developer

www.elsue.com www.betterdms.com

Share this post


Link to post
Share on other sites
alisamski+    8
alisamski

ellenmva

That CSS does not seem to work....

 

:-(

 

Share this post


Link to post
Share on other sites
alisamski+    8
alisamski

Can you see now?  I've published it...

 

and I'm still not seeing it...

 

I've checked the backend in Pagelines LESS and the code is there.

Share this post


Link to post
Share on other sites
ellenmva    112
ellenmva

alisamski Ah, I see the problem. The accordion group number is changing because it is random. To fix that, in your accordion shortcode we are going to give the set of accordions a name by adding accordions_id="loans" So your shortcode would look like (may have more to it as well)

[accordions accordion_set="your_accordion_set" accordions_id="loans" accordion_hash="slug"]

Then target the accordion with .accordion-heading.acloans--consumer-loans (see how the number is replaced with acloans.

 

Let me know if that works.

 

Sorry for the trouble.

 

Ellen

 


Ellen Moore

Pagelines Developer

www.elsue.com www.betterdms.com

Share this post


Link to post
Share on other sites
alisamski+    8
alisamski

Will try that. and report back... thanks

Share this post


Link to post
Share on other sites
alisamski+    8
alisamski

ellenmva

So a bit of tweaking... this is how the css looks and is working!... needed to add the id "number" not name... thank you!

 

.accordion-heading.ac3-consumer-loans {
    background: #e2db6a !important;
    border-radius: 10px;
}
.accordion-heading.ac3-auto-loans {
    background: #e2db6a !important;
    border-radius: 10px;
}
.accordion-heading.ac3-home-equity-loan {
    background: #e2db6a !important;
    border-radius: 10px;
}

Share this post


Link to post
Share on other sites
ellenmva    112
ellenmva

alisamski Super! I'll work on the icon fix and let you know when the update is ready.

 

Best,

 

Ellen


Ellen Moore

Pagelines Developer

www.elsue.com www.betterdms.com

Share this post


Link to post
Share on other sites
ellenmva    112
ellenmva

jharri74 What is the shortcode you are using? Doesn't seem to be picking up any styles for the accordion set.

 

Ellen


Ellen Moore

Pagelines Developer

www.elsue.com www.betterdms.com

Share this post


Link to post
Share on other sites
jharri74+    0
jharri74

HI Ellen, I should've updated this but my quesions was anwsered the other day by Danny.

 

I was using:

  1. [pl_accordion name="accordion"][pl_accordioncontent name="accordion" number="1" heading="Tile 1" open="yes"]
  2. Content 1
  3. [/pl_accordioncontent]
  4. [pl_accordioncontent name="accordion" number="2" heading="Title 2"]
  5. <img class="pl-imageframe" src="" alt="" />
  6. [/pl_accordioncontent]
  7. [/pl_accordion]

 

 

and he suggested (which worked) using this css:

For example:

 

// This maintains the collapse area as a white background

#site .collapse {
  background: white !important;
}
 
#site .accordion-group:nth-child(1) {
  background: red;
}
#site .accordion-group:nth-child(2) {
  background: green;
}

Share this post


Link to post
Share on other sites
ellenmva    112
ellenmva

jharri74 Yes, that's the shortcode within DMS, not the shortcode for the Accordions Section. Glad you got it sorted.

 


Ellen Moore

Pagelines Developer

www.elsue.com www.betterdms.com

Share this post


Link to post
Share on other sites
jharri74+    0
jharri74

thanks. Sorry but whats the difference (if you have time to explain)?

Share this post


Link to post
Share on other sites
ellenmva    112
ellenmva

jharri74 not a problem. I hated working with the shortcode that PageLines had for creating accordions so I created a section where each accordion is a post (Accordions post type) and then accordions are grouped together in accordion sets (a custom taxonomy) and displayed on pages using the Accordions Section.

 

I need to update my website, didn't realize so out of date (the last site worked on is always your own), but this shows Accordions and different accordion sets as sections on the page and as a sidebar widget.

 

You can also insert accordion sets using a shortcode, that's what I thought you were referring to.

 

Let me know if any more questions. 

 

Ellen


Ellen Moore

Pagelines Developer

www.elsue.com www.betterdms.com

Share this post


Link to post
Share on other sites
jharri74+    0
jharri74

oh ok. thank you. I understand now

Share this post


Link to post
Share on other sites
patsc    0
patsc

Hello Ellen,

 

I am trying to do the same as jharri but with the Accordion Section (which I love!)

 

I've read the threads relative to putting diferent colors to different tabs, but I am not being  able to put an image instead of color.

 

This is the url I am working on: http://patriciacangas.com/ux-projects/

 

Thank you in advanced.

 

Patricia

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.

    • 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!
    • wyo22ski
      By wyo22ski+
      Hello,
       
      I'm basically a designer and understand a little on how to change CSS, etc., so please excuse my ignorance...  I recently upgraded to the newest platform from the DMS and my old DMS theme no longer functions.  I'm trying to replace the image slider that my Horizon Photography Theme (Nick Haskins) had created.  The Impulse image slider seemed the closest to what I need, but there are problems.
      It seems the the Impulse section for sliding images defaults to the image width, no the height.  I can change the Impulse stage height and width, but this does nothing to the internal content.  For instance, if I change the height to 200 pixels, the image remains the full width and only shows a cropped section.  I would like the ability to change the Impulse height, and have the image height fit space. 
      I've put this custom CSS in, but again, this only controls the stage height of Impulse:
      .pl-sn-impulse .pl-impulse-cell .cell-wrap, .pl-impulse-container, .owl-stage-outer {
        width: 100%;
      }
       
      Any suggestions welcome.  Thanks 
×