Jump to content

Archived

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

alisamski

CSS questions

Recommended Posts

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

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

ellenmva

That CSS does not seem to work....

 

:-(

 

Share this post


Link to post
Share on other sites
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

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

Will try that. and report back... thanks

Share this post


Link to post
Share on other sites
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

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

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

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

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

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

Share this post


Link to post
Share on other sites
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

oh ok. thank you. I understand now

Share this post


Link to post
Share on other sites
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

    • glyph.marketing
      By glyph.marketing+
      Hello, I am having a problem similar to that experienced by Michael Kummer here. We have pages that show this automatic scrolling issue (examples here and here) and it is sufficiently annoying that we have seen customers bounce while trying to convert. Strangely, it only happens at specific resolutions, so it can be difficult to reproduce. In general we can only consistently reproduce it on a 4k resolution with a browser width between 1517 and 1536px. 
      Thanks to Michael Kummer's help we were able to set the overflow-anchor property to none in the entire body, which fixed the issue as far as we can tell, but also obviously disabled scroll anchoring for the whole site. I tried applying it to the specific element that looked like it was being reloaded, which was the PL Meganav extension, but that was unsuccessful. 
      Can anyone help us figure out which element or ID we can apply this property to, so that we can fix the scrolling issue but not disable scroll anchoring for the entire site?
      Thank you - 
      Glyph Language Services
    • chamois_blanc
      By chamois_blanc+
      Hello,
      Shouldn't the image PL5 component be using the srcset/picture css directives to pick the correct size for an image? or it does already and I don't know how to use it? Thank you for any advice or enlightenment.
    • Dan Haddock
      By Dan Haddock
      Plugins Active and installed: 
      Akismet Anti-Spam
      Coming Soon Page & Maintenance Mode by SeedProd
      Contact Form 7
      Cookie Law Info
      DMS Professional Tools  
      Enhanced Media Library  
      Flamingo
      Google Analytics for WordPress by MonsterInsights
      Google XML Sitemap
      Jetpack by WordPress.com
      Legull 
      Loginizer   
      MailChimp for WordPress
      PageLines Updater    
      Schema App Structured Data 
      Sucuri Security - Auditing, Malware Scanner and Hardening
      Uber reCaptcha    
      Yoast SEO
      Wordpress Version: 4.8.1
      Pagelines Version: 2.2.4
       
      Good Evening/Afternoon or Morning, 
      I am running into a problem with CSS styling not applying inside of most browsers (Safari, Firefox) when I am logged in to wordpress, and all browsers that I have tested when I am logged off and the site has been made public (Chrome, Firefox and Safari).
      As a result, I have managed to identify the probable cause. It looks as though these browsers are refusing to render my sites compiled CSS file due to it being a HTTP URL rather than HTTPS.
      I have attempted to change this URL to HTTPS in my browser, however it brings back an ERROR: File not found page - https://www.shortfilmblog.com/wp-content/uploads/pagelines/compiled-css-core-1505847507.css
      What would you suggest in this regard? Would this be resolvable from your end?
      Happy to provide any further details required.
    • 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" 
    • 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.

×