Jump to content


Photo
- - - - -

Framework 2.4.5 CSS Not Showing Up

Framework CSS/LESS

Best Answer Danny , 22 May 2014 - 08:59 AM

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.c...n-in-the-class/

Go to the full post


  • Please log in to reply
7 replies to this topic

#1 balfred1345

balfred1345

    Super Member

  • Members

  • 108 posts
  • LocationFlyover Country, USA
  • Framework Version:Some sites Pagelines Framework (latest version), some sites DMS latest version
  • Country: Country Flag

Posted 20 May 2014 - 11:35 PM

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: 

Please Login or Register to see this Hidden Content

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:  

Please Login or Register to see this Hidden Content

 
Please tell me what I need to do to get the CSS to take effect.
 
Thanks,
Bruce


#2 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 21 May 2014 - 12:48 AM

could you try 

 

Please Login or Register to see this Hidden Content



#3 balfred1345

balfred1345

    Super Member

  • Members

  • 108 posts
  • LocationFlyover Country, USA
  • Framework Version:Some sites Pagelines Framework (latest version), some sites DMS latest version
  • Country: Country Flag

Posted 21 May 2014 - 02:16 AM

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



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 17533 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 21 May 2014 - 10:24 AM

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;
}

  • balfred1345 likes this

#5 balfred1345

balfred1345

    Super Member

  • Members

  • 108 posts
  • LocationFlyover Country, USA
  • Framework Version:Some sites Pagelines Framework (latest version), some sites DMS latest version
  • Country: Country Flag

Posted 21 May 2014 - 01:42 PM

@

Please Login or Register to see this Hidden Content

,

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 



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 17533 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 22 May 2014 - 08:59 AM   Best Answer

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 - 

Please Login or Register to see this Hidden Content



#7 balfred1345

balfred1345

    Super Member

  • Members

  • 108 posts
  • LocationFlyover Country, USA
  • Framework Version:Some sites Pagelines Framework (latest version), some sites DMS latest version
  • Country: Country Flag

Posted 22 May 2014 - 02:52 PM

Thanks @

Please Login or Register to see this Hidden Content

!

 

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



#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 17533 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 23 May 2014 - 10:11 AM

No problem Bruce, happy to help.







Also tagged with one or more of these keywords: Framework, CSS/LESS