Jump to content

Archived

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

photomom86

Custom CSS not working.

Recommended Posts

photomom86

So today I realized that all of my Custom CSS is not working? It was working 2 days ago just fine and there has been ZERO changes to the site since then. 

 

Help please!

Share this post


Link to post
Share on other sites
batman

HI photomom86

I copy/paste a Danny´s reply about this  in the forum that you can not see.

 

If you're using the latest version of DMS 1.x and are still experiencing this issue, then its likely caused by one of the following:

1. A third party plugin, such as cache etc.. disable all active plugins and see if this resolves the issue.

2. DMS Pro Tools, make sure you do not have section cache active, this is experimental and not for all server setups.

3. You have invalid custom CSS, review all your custom CSS for any mistakes.

4. Your server is configuration is the problem, if you enable DMS Debug mode and then provide a link, we will be able to investigate further.

 

Please, first take a look with this


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
photomom86

Thanks for the reply. I don't have the DMS Pro Tools installed so that shouldn't be the problem. I checked all plugins and that makes no change. I flushed the cache via my hosting company. I have enabled debug mode. link is http://greeneyedcountrygirl.com

 

Here is my custom CSS.

#textboxuj7huz .pl-section-pad, #textboxuj7huz .the-media {
margin: 0;
}

/* Social media color variables */   
@facebook:          #3b5998;
@googleplus:        #dd4b39;
@instagram:         #745f09;
@pinterest:         #cb2027;
@rss:               #E5842F;
@twitter:           #2ba9e1;

.social-bar {
    a {
        margin-right: 0px; // Here in-case you wish to add margins
        padding: 0px; // Here in-case you wish to add padding
    }
    li {
        display: inline;
    }
    .icon {
        .border-radius(0px); // Here in-case you wish to add a radius
        margin-bottom: 5px;
        min-width: 50px;
        color: #FFF;
        text-align: center;
        font-size: 26px;
        line-height: 50px;
    &:hover { .transition(background 400ms linear); }
    }
    .icon-envelope {
        background-color: @envelope;
    &:hover { background-color: lighten(@envelope, 10%); }
    }
    .icon-facebook {
        background-color: @facebook;
    &:hover { background-color: lighten(@facebook, 10%); }
    }
    .icon-google-plus {
        background-color: @googleplus;
    &:hover { background-color: lighten(@googleplus, 10%); }
    }
     .icon-instagram {
        background-color: @instagram;
    &:hover { background-color: lighten(@instagram, 10%); }
    }
    .icon-linkedin {
        background-color: @linkedin;
    &:hover { background-color: lighten(@linkedin, 10%); }
    }
    .icon-pinterest {
        background-color: @pinterest;
    &:hover { background-color: lighten(@pinterest, 10%); }
    }
     .icon-rss {
        background-color: @rss;
    &:hover { background-color: lighten(@rss, 10%); }
    }
    .icon-twitter {
        background-color: @twitter;
    &:hover { background-color: lighten(@twitter, 10%); }
    }
}

@media (max-width: 767px) {
    .social-bar {
        float: none;
        text-align: center;
    }
}

.navbar.pl-color-orange {
 
background-color: #fce171;
 
background: -moz-linear-gradient(center top , #fce171, #fce171);
 
background: -webkit-gradient(linear, left top, left bottom, from(#fce171), to(#fce171));
 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fce171', endColorstr='#fce171');
 
background-repeat: repeat-x;
 
border-top: 1px solid #fce171;
 
}

.navbar.pl-color-blue {
 
background-color: #93d250;
 
background: -moz-linear-gradient(center top , #93d250, #93d250);
 
background: -webkit-gradient(linear, left top, left bottom, from(#93d250), to(#93d250));
 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#93d250', endColorstr='#93d250');
 
background-repeat: repeat-x;
 
border-top: 1px solid #93d250;
 
}


.navbar .navline > li > a {
    color: #1e3d6f;}

#site .navbar .navline > li > a {
    font-size: 16px;
}

h1, .fpost .entry-title {font-size: 30px !important;}


h1, .fpost .entry-title {  text-align: center;}
.metabar { text-align: center;}

.post-meta .metabar em {
    font-size: 14px;
}

Share this post


Link to post
Share on other sites
Danny

CSS can not stop working, unless something has changed such as:

 

You have added some CSS which isn't valid or made changes to your custom CSS

A plugin has been installed

A plugin has been updated

 

I have only quickly viewed your CSS and I can't see any error. However, you do have a cache widget plugin installed, I have never used the plugin, but you're going to need to disable all active plugins, while we attempt to diagnose your issue.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
photomom86

Ok. I have deactivated all my plugins. I do believe that I did update a plugin a few days ago but I cannot remember which one(s).

 

Thanks!

Share this post


Link to post
Share on other sites
Danny

Now that all plugins are disabled, go to DMS Toolbar > Settings > Reset and then click on the Flush CSS button. Then refresh your site and see if that resolves your issue.

If it doesn't then I suggest you remove all custom CSS, add each snippet one at time and until it stops loading, then the snippet you added before it stopped loading is the cause of the issue.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
photomom86

Ok. I did as Danny suggested above. The CSS changing the color of my menu bars works great, the css centering my post titles works great, and right now the css for the Social Media links in the header area (which I got from Pagelines Docs/Tutorials...Creating a Branding Area) is in there not breaking anything else but it's also not making the social media buttons style the way they are supposed to....

 

thanks so much, Maybe one of these days my site will stop breaking all the time!

Share this post


Link to post
Share on other sites
Danny

I can no longer see the Social Media icons on your site, I have just this moment tried the code and it is working fine for me on my site. Can you add the code again so we can see the problem.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
photomom86

um, ok. sorry about that. I've added the code for the social bar and the styling back in. 

Share this post


Link to post
Share on other sites
Danny

Where are you adding the CSS for the social links, as the CSS isn't loading, thats why it looks the way it does.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
photomom86

this is the code I have in the textbox component for the social icons/email sign up form:

<div class="social-bar pull-right">
    <ul class="zmt zmb">
        <li><a href="http://facebook.com/grneydcntrygirl" target="_blank"><i class="icon icon-facebook"></i></a></li>
        <li><a href="http://plus.google.com/+AnnaHettick" target="_blank"><i class="icon icon-google-plus"></i></a></li>
        <li><a href="http://instagram.com/grneydcntrygirl" target="_blank"><i class="icon icon-instagram"></i></a></li>
        <li><a href="http://pinterest.com/grneydcntrygirl" target="_blank"><i class="icon icon-pinterest"></i></a></li>
        <li><a href="http://twitter.com/grneydcntrygirl" target="_blank"><i class="icon icon-twitter"></i></a></li>
        <li><a href="http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2Fgreeneyedcountrygirl.com%2Ffeed_blank" target="_blank"><i class="icon icon-rss"></i></a></li>
    </ul>
</div>
<div class = "pull right"> <input type="email" name="EMAIL" placeholder="Your email address" required="required"> <input type="submit" value="Subscribe">
</div>
<img src="[pl_site_url]/wp-content/uploads/2014/05/be-in-the-know.png" alt="Green Eyed Country Girl" width="325" height="75"> 

and this is the code I have in the "custom" CSS area and it's the same in the Pagelines DMS settings area in the backend.

.social-bar {
    a {
        margin-right: 0px; // Here in-case you wish to add margins
        padding: 0px; // Here in-case you wish to add padding
    }
    li {
        display: inline;
    }
    .icon {
        .border-radius(0px); // Here in-case you wish to add a radius
        margin-bottom: 5px;
        min-width: 50px;
        color: #FFF;
        text-align: center;
        font-size: 26px;
        line-height: 50px;
    &:hover { .transition(background 400ms linear); }
    }
    .icon-envelope {
        background-color: @envelope;
    &:hover { background-color: lighten(@envelope, 10%); }
    }
    .icon-facebook {
        background-color: @facebook;
    &:hover { background-color: lighten(@facebook, 10%); }
    }
    .icon-google-plus {
        background-color: @googleplus;
    &:hover { background-color: lighten(@googleplus, 10%); }
    }
     .icon-instagram {
        background-color: @instagram;
    &:hover { background-color: lighten(@instagram, 10%); }
    }
    .icon-linkedin {
        background-color: @linkedin;
    &:hover { background-color: lighten(@linkedin, 10%); }
    }
    .icon-pinterest {
        background-color: @pinterest;
    &:hover { background-color: lighten(@pinterest, 10%); }
    }
     .icon-rss {
        background-color: @rss;
    &:hover { background-color: lighten(@rss, 10%); }
    }
    .icon-twitter {
        background-color: @twitter;
    &:hover { background-color: lighten(@twitter, 10%); }
    }
}

@media (max-width: 767px) {
    .social-bar {
        float: none;
        text-align: center;
    }
}

/* Social media color variables */   
@facebook:          #3b5998;
@googleplus:        #dd4b39;
@instagram:         #745f09;
@pinterest:         #cb2027;
@rss:               #E5842F;
@twitter:           #2ba9e1;

#textboxuj7huz .pl-section-pad, #textboxuj7huz .the-media {
margin: 0;
} 

Share this post


Link to post
Share on other sites
Danny

You shouldn't use a TextBox for HTML, it called TextBox because it should only used for text, if you want to use HTML, then you should use either the MediaBox section or the NextBox section.

 

Also, please contact our helpdesk and provide the following information.

 

A link to this topic so they have something to reference

A link to the site in question

Provide your admin username/password

Make sure all plugins are disabled

Make sure DMS debug mode is active.

 

hello at pagelines dot com


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
photomom86

ok thanks.

Share this post


Link to post
Share on other sites
Danny

OK Anna, all fixed for you!

 

The problem was pilot error on your part ;) However, it is also my error too as I never mentioned that this could happen in the docs.

 

Basically, you were giving yourself a compiling error, because you removed the color variables for the icons you were not using. However, you kept the CSS code the icons, so the code was looking for the @envelope and @linkedin, but there was no variable as you removed it.

 

To fix your problem, all I needed to was remove the code for the envelope and linkedin icons. We could have also added the variables back which would have done the same thing.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
photomom86

Ok great! That does make sense. Thank you so much for all your help!! :)

Share this post


Link to post
Share on other sites
Danny

No problem.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×