Issues with custom CSS not working - Support | Kriesi.at

Tagged: CSS, custom.css, issues, not working

Viewing 28 posts - 1 through 28 (of 28 total)

Author

Posts
April 7, 2015 at 10:50 pm #424996

haydaw
Participant

Hello,

I’ve been attempting to edit some areas with some custom CSS, and I cannot seem to get them to work properly, even code that I find through these support forums.

1. Removing blog post comment sections, this is what I have input yet the comments are still there.

.comment-entry.post-entry {
display: none !important;
}

2. With the full-width menu setting, the right item is a little too close to the edge. I attempted using this to resolve the issue.

.av-main-nav-wrap {
margin-right: 35px!important;
}

3. Attempting to make the sidebars have less left margin as currently on a 27″ display it looks a bit empty.

.sidebar {
margin-left: 50px !important;
}

Thanks

April 8, 2015 at 5:17 pm #425449
Elliott
Inactive Moderator
Hey haydaw!

1. If your talking about the post meta comments then you can do it with this.
```
.slide-meta-comments { display: none !important; }
```
If your talking about the post meta comments in the single post view then try this.
```
.comment-container { display: none !important; }
```
2. + 3. Hmm, it’s a little hard to understand. Can you send us links to your pages and perhaps some screenshots highlighting your intentions so we can get a better idea?

Regards,
Elliott
- This reply was modified 9 years, 7 months ago by Elliott.
April 8, 2015 at 10:13 pm #425625
haydaw
Participant
Hey! Thanks for the reply, I couldn’t get the code supplied to work.

Here is the code in the Quick CSS:

‘.slide-meta-comments { display: none !important; }

.comment-container { display: none !important; }’

I also attempted

‘.comment-meta-container { display: none !important; }’ and did not get anything to work. You can see an example here: [REDACTED]

When I play with the CSS in my browsers developer window, I can turn these areas off no problem, and I can see that it is in fact .comment-container, so I am not sure why it is not working when I apply the code into the Quick CSS.

Thanks
- This reply was modified 9 years, 7 months ago by haydaw.
April 9, 2015 at 12:13 pm #425851

Rikard
Keymaster

Hey!

Did you try !important; after your CSS statements? Also, are you using any caching plugins? If so, please delete the cache and disable the plugin while testing.

Best regards,
Rikard

April 11, 2015 at 1:40 am #426862
haydaw
Participant
Hello,

Yes, I did use this in the code. It seems like a lot of the custom CSS elements I am using are not showing up. This is not because of a caching issue.

The comment sections are still showing, and now I have some other CSS that I cannot get to work.

Please take a look at the comments on this page:

[REDACTED]
- This reply was modified 9 years, 7 months ago by haydaw.
April 11, 2015 at 1:41 am #426863

haydaw
Participant

This reply has been marked as private.

April 11, 2015 at 2:45 am #426868

haydaw
Participant

Here is some other code I cannot get to work:

**Homepage Slider font family**
div .slideshow_caption h2 {
font-family: ‘Open Sans’, ‘HelveticaNeue’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif !important;
font-weight: 300 !important;
}

**Full Width Footer**

#footer .container {
max-width: 95% !important;
}

**Padding added to full width header**

.html_header_top #top .av_header_stretch .container {
width: 93% !important;
}

**Edits to framed text on homepage slider, increasing framed boxes size**

.caption_framed .slideshow_caption .avia-caption-title {
padding: 100px 150px !important;
margin-left: -60% !important;
}

Any idea why these are not working? I would really appreciate it if someone could take a look at the backend, because I believe I have the code correct but nothing seems to be taking effect.

April 13, 2015 at 3:40 am #427250

haydaw
Participant

Hello, is there any update on this? I don’t know why I seem to be having so many CSS issues with the theme, I’m not sure if using Chromes inspector is not showing me the correct CSS elements I need to be editing, but it even the code I’m given isn’t working.

If it would be possible to take a look at the backend and let me know if the CSS is correct or not that would be greatly appreciated.

April 13, 2015 at 11:46 pm #427909

Yigit
Keymaster

Hey!

Sorry for the late reply Haydaw! I believe this issue is now resolved? :)

Regards,
Yigit

April 13, 2015 at 11:55 pm #427919

haydaw
Participant

Hello Yigit,

I actually never did get this resolved.

For more information, I am trying to get the footer to be 100% width such as the header.

You can see an example of that here

Also, I believe the current “100% width header” makes it roughly ~96% full width, I would like for both the header and footer to be 93%.

Thanks!

April 14, 2015 at 12:02 am #427926

robinleung
Participant

I can confirm this that the custom css is not working on our site either. I have just updated to to the newest version of Enfold.

April 14, 2015 at 12:03 am #427927

Yigit
Keymaster

Hi!

Header and footer width seems to be the same on my end. Please see screenshot here – http://i.imgur.com/hDQOFtt.jpg
Custom CSS code is being applied successfully – http://i.imgur.com/PSuAZmA.png
Have you tried flushing browser cache and check if that helps?

Cheers!
Yigit

April 14, 2015 at 12:04 am #427928

Yigit
Keymaster

Hi!

@robinleung Please post the link to your website. We may need a temporary admin login as well to look into the issue.

Regards,
Yigit

April 14, 2015 at 12:28 am #427945

robinleung
Participant

This reply has been marked as private.

April 14, 2015 at 12:32 am #427950
Yigit
Keymaster
Hey!

@robinleung I added following code to Quick CSS and it worked
```
.logo { display: none; }
```
Please make sure to flush browser cache and refresh your page a few times after applying custom CSS code. Also, please disable CSS minifying in Total Cache plugin before adding custom CSS code.

Edit: Please try disabling CSS minifying feature as i mentioned and check if that helps with custom.css file

Best regards,
Yigit
- This reply was modified 9 years, 7 months ago by Yigit.
April 14, 2015 at 1:58 am #427963
robinleung
Participant
Hi Yigit,

The Quick CSS function works fine for us as well, but we aren’t looking to depend on Quick CSS to hold all the styling changes we want to make.

It looks like any changes I make in the CSS files (custom.css, layout.css, shortcodes.css) don’t actually apply any changes to the site. I’ve even tried removing all the stylesheets to see how it affects the styling, but it still only displays a default layout drawn from the dynamic-css.php file.

For example, one of the buttons are styled to look like this in the custom.css file:
```
.avia-button.avia-size-medium {
    padding: 11px 30px 9px 30px;
    width: 200px;
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    letter-spacing: 1.5px;
    border-radius: 0px;
    background: none;
    border: 2px solid rgba(255,255,255,0.4);
    font-size: 13px;
    text-transform: uppercase;
    font-family: 'Open Sans', 'Hiragino Sans GB', 'HiraKakuProN-W6', 'SimHei' sans-serif;
}
```
This worked fine before, but for some unknown reason it stopped working.

Thanks.
April 14, 2015 at 4:07 pm #428292
Yigit
Keymaster
Hey!

Can you please try adding !important rule as following and check if that helps
```
.avia-button.avia-size-medium {
    padding: 11px 30px 9px 30px !important;
    width: 200px !important;
    -webkit-transition: all 0.4s ease 0s !important;
    -moz-transition: all 0.4s ease 0s !important;
    -o-transition: all 0.4s ease 0s !important;
    transition: all 0.4s ease 0s !important;
    letter-spacing: 1.5px !important;
    border-radius: 0px !important;
    background: none !important;
    border: 2px solid rgba(255,255,255,0.4) !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    font-family: 'Open Sans', 'Hiragino Sans GB', 'HiraKakuProN-W6', 'SimHei' sans-serif !important;
}
```
Regards,
Yigit
April 14, 2015 at 6:53 pm #428398

robinleung
Participant

Hey Yigit,

It didn’t work. I suspect the custom.css file isn’t even being used by the webpage.

April 15, 2015 at 7:07 pm #429166

Yigit
Keymaster

Hey!

Have you tried de-activating all active plugins to see if that helps? On your source code, links to CSS files look like this – wp-content/themes/enfold/css/A.layout.css,qver=2.pagespeed.cf.sM9ifxzhFM.css

Regards,
Yigit

April 17, 2015 at 5:38 am #430082

robinleung
Participant

Hi Yigit,

What do you mean by source code? I don’t see this in my FTP client.

April 17, 2015 at 5:41 am #430083

robinleung
Participant

We’ve disabled all possible plugins but still don’t see where it’s going wrong.

April 19, 2015 at 4:26 am #430800

Ismael
Moderator

Hey!

@robinleung: Did you install any minify or cache plugins? And make sure that you have the latest version of the theme. Right now, the theme version is 3.0.4. Please update to 3.1.3.

Best regards,
Ismael

April 21, 2015 at 10:02 pm #432412

robinleung
Participant

Hi Ismael and team,

Yes I do have W3 Total Cache enabled. What you see here is a brand new install with data restored that’s why it was 3.0.4 and custom css was still working (that was the last working version before it stopped working). Once I’ve updated to the latest version of Enfold (3.1.3) custom css does not work. We’ve been having trouble since.

April 23, 2015 at 8:02 pm #433720

Andy
Inactive Moderator

Hey!

go into your W3 Total Cache settings and deactivate caching. Afterwards clear browser cache and refresh your site a few times. If that does not work your server might use some kind of caching and you would need to contact your host.

Regards,
Andy

April 28, 2015 at 12:38 am #435740

robinleung
Participant

Thanks for all the support. I’ll take another poke at it.

April 28, 2015 at 12:27 pm #435956

Rikard
Keymaster

Hey!

Ok, please let us know if you should have any further problems.

Regards,
Rikard

August 10, 2016 at 11:36 pm #671092

ihoffy
Participant

Hi,

I have a Enfold theme with business flat settings. (http://kriesi.at/themes/enfold-business-flat/service/)
I want to change the text style (not so bold) in title and the full slider. I wrote the following text in Quick css, but it doesn’t work.
If I’m in admin page, it’s ok, but without sign in it doesn’t work.

Can you help me?
Hoffy

.avia-caption-title {font-family: Open Sans; font-weight:100 !important; }
.avia-caption-content { font-family: Open Sans; font-style: none; }
.avia-caption-title { background: rgba(78, 202, 194, 0.0) !important; }
.avia-caption-content p { background: rgba(78, 202, 194, 0.0) !important; }
.slideshow_align_caption { top: 5%; vertical-align: inherit; }

.avia_transform .av_fullscreen.avia-fade-slider .active-slide .avia-caption-title
{text-shadow: 1px 1px 1px #696969;}
.avia_transform .av_fullscreen.avia-fade-slider .active-slide .avia-caption-content
{text-shadow: 1px 1px 1px #696969;}

August 13, 2016 at 6:34 am #672195

Rikard
Keymaster

Hi Hoffy,

The CSS should apply regardless of you being logged in or not, could you try clearing your browser cache and reload a few times or try a different browser and/or machine please?

Best regards,
Rikard
Author

Posts

Viewing 28 posts - 1 through 28 (of 28 total)

You must be logged in to reply to this topic.