• 0

CSS Won't Take Effect


Question

Posted · Report post

So I've used the code below 5 other places on my website that are literally exactly the same on http://websitealright.com and it works fine. I tried it on the news section within the header and it won't take effect? The css selector is set for header-highlight6 and the code below works for every other highlight. What's going on?
 
 
 
.header-highlight6 .highlight-head {
font-size: 48.8px;
margin: 0;
position: relative;
top: 60px;
color: white;
}
.header-highlight6 .highlight-subhead {
margin: 0;
position: relative;
top: 60px;
color: white;
}
 
Even though I'm editing local settings it's reflecting the changes on multiple pages??

Share this post


Link to post
Share on other sites

29 answers to this question

  • 0

Posted · Report post

As for things not taking effect, try using !important after a rule:

 

top:60px!important;

 

Does that have any effect?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there,

 

Turn off your Total cache plugin and clear the cache file, that will block the css changes as they're made in the front end of the site on the live page. Need to keep the cache plugin off when making all your edits :-)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

James B"] @[member="fliptheu Hey guys, I tried both of your solutions with no luck of change. Again, I never had this issue until I updated. I'm really in a time crunch and need to get this site finished by the end of the day friday, so anything you could do to help before then would be very appreciated. Thank you!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

If you click on news and on blog on the menu the local settings for "news" are reflecting on both pages. That should also not be happening.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

James B I have now completely removed W3 Total Cache and I am still getting no css changes and local setting are still reflecting on multiple pages.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hello Bentley 

 

Using a CSS validator i pasted in your custom CSS and it returned  22 errors http://d.pr/i/vDxu with your CSS relating to the following code http://paste.pagelines.com/M6lpQH0f

 

I then made a small addition to your CSS as below 

 

h3 {
  color:green;
}

 

this didn't work - i then removed the CSS from the paste above and it then did work http://d.pr/i/ij7p

 

The error appears to be with  with the CSS you are using. Any input error in the code and none of your CSS will work. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Also i have checked your debug information http://websitealright.com/?pldebug=1

 

Please contact your host and ask them to update your PHP (current version is PHP 5.4) as you have the following active which are no longer needed and have been known to cause issues 

 

PHP Magic Quotes gpc
Yes! Deprecated as of PHP 5.3 and removed in PHP 5.4

 

PHP User

Posix functions are disabled on this host!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Martin Davies I removed all the .example code, which fixed the css issue,  still I am having my local options change global settings. For instance I chose local on the blog page and made the heading say blog and now on the news page it says blog too? Whats causing this? 

 

Also why was my box shadow code ".example" (the selector) causing the issue? Can I use box shadows?

Godaddy's hosting only has 5.3 PHP

 

I'm not having any issues on my other sites that i'm running DMS on Godaddy

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Taking a look at the blog title issue fo ryou now. 

 

With regards the .example - try using a totally unique selector (if you created this yourself) like Bentleyexample (or something like that) 

 

also please try using the Hex color code rather than the name 

 

try    

 .box-shadow(0 0 3px #000000); 

 instead of 

.box-shadow(0 0 3px black);

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I set up the box shadow as you reccomended and it seems to be working so far. Thank you! I am still having the local options blog title issue though. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

great news RE the CSS & box shadows 

 

Please do not make any further changes to your site and i will take a look now. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Martin Davies Okay leaving it alone now

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

The highlight section you have added the information to is in the header. Move the highlight to the template of the page and then add the local settings there and you can then do this for each page. Header is the same on each page. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I switched it to the Template and am still having the same issue.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Martin Davies

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Martin Davies Any ideas of what I can do?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Okay, so i've narrowed it down and I cant change the highlight between "Post category" pages, but i can between "Pages". What do you think the issue is? I want to have a different header for each category.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi,

 

If you want to have a different image per category, this isn't currently possible at the moment, I am not sure if this is a bug. However, I have reported this myself, as I was trying to do the same thing and have a different banner image per category.

 

In the meantime, you could use a CSS, to add all the images then hide them per category using one of the following classes located in the body tag to prefix your custom CSS. Which will only display the image for that category.

 

.category-name

.category-id

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Danny That seems like a pretty big flaw considering this was an option in previous version of pagelines and was a huge reason why i decided to pay for DMS. I have no idea how i would implement it this with css (When you choose to hide, it hides on all pages) and why no one told me this earlier this week when i started this thread. I have expressed over and over again that i am in a time crunch and this website is due at the end of today for work. I need to figure out how to make this possible ASAP. I would really appreciate detailed instructions. Thank you.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Bentley - add all the content to the pages and i will show you how to hide page by page. it is quite simple 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Martin Davies Hey Martin, I have now made the header/highlight image for each category. They are just stacked at the moment. What is my next move? By the way thank you very much for the help!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Ok thanks - Please do not make any changes whatsoever. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Martin Davies No changes will be made. Thank you

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

OK here is how to do this 

 

Your pages News, Entertainment, Corporate, Hospitality, Institutional are Categories and therefore have category ID's -

 

You can see the category ID's by going to Wordpress > Posts > Categories then hover over the category names you will see the ID of the category at the bottom of the page http://d.pr/i/oAtq

 

Make a note of all the Category ID's. 

 

Next go to each section on the template and give the section a unique class - I have  done this for you. For example Industry news section's class has been given 'indnews' 

 

So to hide the Entertainment Client section on the news page you would use the following 

 

.category-9 .entclient {display: none;}

 

to hide all the sections other than the one you want on that category page add the unique Styling Class to the CSS. 

 

.category-9 .entclient .corpclient {display: none;} 

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thank you!! That worked perfectly! You're the man.

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