• 0

Framework 2.4.5 CSS Not Showing Up


Question

Posted · Report post

I'm attempting to update a site using PL Framework 2.4.5, Basetheme, and WP 3.9.1

 

In Base Theme Global Setings / Custom Code / Custom CSS/LESS I've entered the following CSS:

#site .hentry ul #gift-amount {

  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
 
The custom CSS is not showing up as expected.
Please see the screenshot: http://screencast.com/t/ODfUOxlpoAyL
In the screenshot you'll see what I'm attempting to style, the html, and the Chrome Developer Tools.
As you can see in Chrome Developer Tools, my CSS is nowhere in sight. 
 
I've used the Flush LESS button, but it doesn't help.
 
The page I"m working on is:  http://seasonshospice.org/donate/
 
Please tell me what I need to do to get the CSS to take effect.
 
Thanks,
Bruce

Share this post


Link to post
Share on other sites

7 answers to this question

  • 0

Posted · Report post

Well you're free to use whatever you like, but classes can be used on multiple elements and reused throughout your site. Whereas, elements can have only one ID and each page can have only one element with that ID.

 

In regards to CSS, there is nothing you can do with an ID that you can't do with a class, where as in your case (JavaScript) it does matter.

 

This is a good post - http://csswizardry.com/2011/09/when-using-ids-can-be-a-pain-in-the-class/

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

could you try 

 

#gift-amount .hentry ul {
  margin:0;
  padding:0;
   list-style:none;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Gave that a try, but it did not work.

 

As you saw in the screenshot w/ Chrome Dev Tools, it seems that my CSS is not being read by the browser. 

I'm used to seeing my CSS in Dev Tools or Firebug, even if it doesn't work for some reason. 

 

So, I don't know if the Flush Less is not working, or if there is something else going on.

 

Thoughts?

 

Thanks,

Bruce

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Bruce,

 

The code didn't work, because it wasn't valid, use this instead.

 

#gift-amount {
list-style-type: none;
margin: 0;
padding: 0;
}
 
Also, you shouldn't use IDs to styling, you should always use classes instead. So replace your code with the following:
 
<ul class="gift-amount">
 
Then replace the CSS I gave you above with the following:
 
.gift-amount {
list-style-type: none;
margin: 0;
padding: 0;
}
1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Danny,

Thanks so much! 

 

I was really beating my head agains the wall on this, for some reason. I think I'm so used to trying to be as specific as possible in my CSS, that I didn't think to use just the custom ID.

 

Question about ID vs. Class for styling

I'm styling a page that is mostly a javascript form that a developer provided me. I'm therefore hesitant to change IDs to Classes, since I'm assuming it might break the references in the javascript code.

If I leave the ID to use with styling, are there problems I should be aware of?

 

Thanks again! Always appreciate your assistance.

 

Best,

Bruce 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks Danny!

 

Appreciate the link. It made me realize that I could add my own class in the html w/o  concern re breaking the javascript code. 

 

So I went ahead and put in the new class and took out my IDs in CSS.

 

Thanks again,

Bruce

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No problem Bruce, happy to help.

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