Hey psipi!

Which OS and browser are you using? I cannot see whitespace on the top of the page http://i.imgur.com/vg0Ev5I.jpg

Regards,
Yigit

Hey eswyt!

It is actually there but invisible because it is white :) Please add following code to Quick CSS and adjust as needed

.alternate_color .breadcrumb, .alternate_color .breadcrumb a, #top .alternate_color.title_container .main-title, #top .alternate_color.title_container .main-title a { color: red; }

Regards,
Yigit

Hi!

I know this is not practical but since you added the custom css class, you can try this. Edit all the color sections except for the section with the background overlay. Add a custom css class called section-top-index to all of them. Add this on Quick CSS:

.section-top-index {
position: relative;
z-index: 100;
}

This should move the layer position of all the section on top of the color section with the background overlay.

Best regards,
Ismael

Hi!

Please add following code to Quick CSS

@media only screen and (max-width: 480px) {
.responsive .logo a, .responsive .logo img {
height: auto !important; }
#header_main { height: 120px; }
#advanced_menu_toggle { top: 130%; }}

Regards,
Yigit

Hey!

Plese add following code to Quick CSS in Enfold theme options under Styling tab

@media only screen and (max-width: 480px) { 
#header_main { height: 120px; }
#advanced_menu_toggle { top: 115%; }}

Best regards,
Yigit

Hi!

Please try adding !important rule as following

#top.postid-332 .alternate_color {
background-color: #9dd09f !important;
}
.postid-332 .alternate_color.title_container * { color: #5b3b01!important; }

It does work fine on my local installation. Please try flushing browser cache after applying the code

Best regards,
Yigit

Hi!

You have a little mistake in your custom CSS code. Please use following code

#top.postid-332 .alternate_color {
background-color: #9dd09f;
color: #5b3b01;
}

Cheers!
Yigit

Hi!

Thank you for correcting me. I’m sorry about that, I must have been tired when I posted that.

Anyway, you can apply a certain background overlay on a color section but first make sure that you added the theme support for custom css class. Edit functions.php, add this code right after line 16:

add_theme_support('avia_template_builder_custom_css');

This will give you the option to add a custom css class on any avia elements within the builder. So let’s get started, add a color section with the background image that you want then insert a text block inside the section. The overlay image will be added on the text block. Switch to the text/html editor mode then add this:

<img alt="" src="http://fc09.deviantart.net/fs71/f/2011/074/3/7/dotted_overlay_texture_by_nobren-d3bqt3w.png" />

Scroll a bit below to add a custom css class, we’re going to use section-overlay-background for example. After that save the options then publish the page. Add this on Quick CSS or custom.css to adjust the image overlay to full width and height covering the entire color section background:

.section-overlay-background {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
  z-index: 0;
}

.section-overlay-background img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

Reference link is here, look for technique number 2: http://css-tricks.com/perfect-full-page-background-image/

Cheers!
Ismael

Hi DStoeckl!

Thank you for the information!

Unfortunately, I’m not entirely certain of what you’re trying to accomplish. If you don’t mind adding more information, that would be great. A screenshot of the layout will surely help. You can add another element right after the toggle title using the before and after pseudo selectors. Please try this on Quick CSS or cusotm.css:

.main_color .toggler.activeTitle:before {
content: '';
display: block;
width: 85%;
height: 2px;
background: red;
position: absolute;
top: 19px;
left: 10%;
}

The code will add a two pixel high red block beside the toggler title. I hope that helps a bit.

Best regards,
Ismael

Hi!

Please add following code to Quick CSS as well

.av-special-heading { margin-top: 20px; }
.js_active .tab_content { padding: 0; }

You can upload your screenshots on imgur.com or Dropbox public folder and post the links here.
Unfortunately we do not have custom CSS list. But you can find some custom code snippets on documentation here – http://kriesi.at/documentation/enfold/

Regards,
Yigit

Hey!

Please see Kriesi’s post here – https://kriesi.at/support/topic/kriesi-logo/#post-161892
You can hire a freelance developer if you really want to replicate it but unfortunately we cannot help you with that.
You can update the theme to the latest version 2.6.2 ( http://kriesi.at/documentation/enfold/updating-your-theme-files/ ) to have more control over header options ( http://kriesi.at/themes/enfold/headers/ )
Please add following code to Quick CSS as well

#top .social_bookmarks_twitter:hover a {
color: #46d4fe;
background-color: transparent;
}
#top .social_bookmarks_twitter a {
color: white;
background-color: #46d4fe;
}
#top .social_bookmarks_facebook:hover a {
color: #37589b;
background-color: transparent;
}
#top .social_bookmarks_facebook a {
color: white;
background-color: #37589b;
}
top .social_bookmarks_linkedin:hover a {
color: #419cca;
background-color: transparent;
}
top .social_bookmarks_linkedin a {
color: white;
background-color: #419cca;
}
#top .social_bookmarks_mail:hover a {
color: #9fae37;
background-color: transparent;
}
#top .social_bookmarks_mail a {
color: #fff;
background-color: #9fae37;
}

Regards,
Yigit

Hi!

Thank you for using the support forum. I can’t test it on actual iOS device but the scrolling on a touch laptop is working properly. Let me ask Josue and Devin to check this. I also noticed that you’re not utilizing page loading optimization. You might want to add a cache and minify plugin to improve loading speed.

Cheers!
Ismael

Hey!

Please add following code to Quick CSS as well and adjust as needed

#top .social_bookmarks li a { font-size: 18px; }

Regards,
Yigit

Hi!

Please add following code to Quick CSS as well

#top #main .sidebar_left .sidebar { width: 269px; }

Regards,
Yigit

Hey hellovlad_!

Please refer to my post here https://kriesi.at/support/topic/footer-socket-question/#post-193649

Regards,
Yigit

Hi Bruno!

Please try adding following code and adjusting it

.html_header_top.html_header_topbar_active.html_header_sticky.html_large #top #main {
padding-top: 147px;
}

If that does not work, please post the link to your website so we can take a look

Best regards,
Yigit