Thank you for the reply!

Although the above code didnt quite work for what I was trying to achieve, I eventually managed to figure it out. However some of the code may be redundant. The following works, so I will leave it here for anyone interested in the effect I have achieved on http://www.thejetcoaster.com but if anyone could tell me what is unnecessary that would be even better. Once again, thank you guys so much.

.av-masonry-entry .av-inner-masonry:hover:before {
    background: rgba(0, 181, 241, 0.1);
}

.avia_desktop .av-hover-overlay-active .av-masonry-image-container {
opacity: 1;
box-shadow: 0 0 150px 5px #000 inset;
}

.avia_desktop .av-masonry-entry:hover .av-masonry-image-container {
-webkit-transform: none;
-moz-transform: none;
transform: none;
opacity: .9!important;
box-shadow: 0 0 150px 5px #000 inset;
 }

.av-masonry-date{ display: none !important;
}
.av-masonry-entry .av-inner-masonry-content { 
background:transparent !important;
  text-align: center; 
 }
.av-masonry-entry .avia-arrow { display: none; 
}
.av-masonry-entry .av-masonry-entry-title {
background: transparent;
padding: 10px;
margin-bottom: 20%;
font-weight: bold;
  font-size: 30px;
  color: #ffffff !important;
 text-shadow: 2px 2px 4px #000000; }

.avia_desktop.avia_transform3d .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry{
-webkit-animation: none; /* Safari 4+ */
-moz-animation:    none; /* Fx 5+ */
animation:         none; /* IE 10+ */
}

/*
.av-masonry-entry:before {
    content: attr(title);
    background: radial-gradient(transparent, black);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1000;
    text-align: center;
    line-height: 180px;
    opacity: 0;
    font-weight: bold;
    font-size: 24px;
    color:#ffffff !important;
}

.av-masonry-entry:hover:before {
    opacity: 1;
}

.av-masonry-entry:before{
    transition: all linear 0.2s;
}

Perfect.. just one more question.. is there anyway i can change de default font size for paragraph??? cause when i tried the css.. p{ font-size:12px;} it changes all the paragraphs to the same size… but id like to change only the default size.. and the others i’d like to keep the same size i set for each one..

did u understand ? sorry cause my english is not that good..

Just to clarify I want the font size changed on all the individual blog post as well as the blog itself.
Thanks,

I am looking to change the font size for the entire blog page.

This is it: http://www.ellenallard.com/blog/

Thanks,

…also the active tab’s font is bold. I do not want this. How to manage this?

i use this code now

.js_active .tab { font-size: 15px; }
.js_active .active_tab { font-size: 15px; }

this is what happens

Hello again Elliott,

Thanks for the suggestion. Unfortunately I cannot change the .htaccess file on my hosting provider. Also, I’d prefer to just disable caching for one specific file (custom.css) as that is the one that changes the most when modifying CSS for the Enfold theme. I rarely touch other files.

I found this, but not sure where I would add this to the theme and how to specify it should refer to custom.css instead of style.css (unless I just change “style.css” to “custom.css”):
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen, projection" />
This basically automatically adds a version number to the file so it is regarded as a new file and requests a fresh download.

My site is never completely finished. New things get added, changed and optimised daily. I often overrule existing style (specified by Enfold), but if the visitors don’t see my version, they will see a broken result.

For example:
I added a new fullscreen slider to the homepage. I set the caption to “center without frame”. This already has existing styles specified by Enfold, but I need to change several aspects of it, such as the positioning (top instead of middle, etc.). If the visitors still have the previous custom.css version in their cache in which that style isn’t overruled yet, they will see the caption in the middle of my picture instead of at the intended top position, and so on.

If tomorrow I change my fullscreen slider and want to change the font-family, this too will be done in custom.css, but only those who do a force refresh (= no one except me) will see the change.

Personally, I don’t even think the custom.css file should be cached in the first place, or not longer than a single session (like only lasting an hour). That is THE file we (Enfold users) will probably be modifying the most and the small file size would most likely not even impact load speed at all. If that’s the file we modify the most, I assume everyone would prefer these changes to be immediate.

Using the custom CSS text area in Enfold options (inside WP admin) is not a solution for me. Not all styles are accepted (for example changing font types), possibly because there are still other styles rendered below it. And I have about 10 languages, meaning I need to copy-paste every single change to every language. I also find it too risky to add anything there, because there is no turning back after saving changes (undo, backup different versions, …).

I ended up using this. Is there any problem using “px” instead of “em”?

@media only screen and (max-width: 767px) {
#top .av-large-testimonial-slider .avia-testimonial-content {
font-size: 14px;
}

#top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
padding: 0px 7%;
}

#top .av-large-testimonial-slider .avia-slideshow-arrows a {
font-size: 25px;
}

.avia-slideshow-arrows.avia-slideshow-controls {
display: none;
}
}

Great, thanks!

It also looks like my button font size is not the same as all other buttons. Is there code to correct this?