Hi rrdr,

In this video I create a section very much like that one: https://vimeo.com/channels/aviathemes/64927358

You just need to use a color section and set a background image to get that kind of effect. Then you can add other elements on top of it.

Additional videos are posted on that same channel and you can make requests for new ones here: https://kriesi.at/support/topic/video-requests

Regards,

Devin

Hi,

If I understood you correctly, please add the code below to Quick CSS located in Enfold > Layout .. text area on the bottom of the page OR add it to the bottom of /css/custom.css

@media only screen and (min-width: 1140px){

#top .avia_mega_div.avia_mega3.nine.units {

right: -662px !important;

}}

Thanks,

Nick

Hi madebynoemi,

Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

#top.single-post .big-preview.single-big {

display: none;

}

This is the most straightforward way of removing the featured media are on the single posts.

Regards,

Devin

Glad we could help :)

Let us know if you have any other questions or issues. I’ll close this topic for now since the main issue has been resolved.

Regards,

Devin

Hi kriru,

I’m not sure which theme you are using, but generally you can change the color of the bold text by adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

#top p strong {

color: #333;

}

Just change the color code to the color you want.

Regards,

Devin

Glad we could help :)

If you have any other video requests for tutorials I’m looking to do some more when the current overflow of support topics calms down. Just make a post in this topic with any requests: https://kriesi.at/support/topic/video-requests

Regards,

Devin

Hi,

Ok thats good, however that won’t always work. You need to add #top before everything (which is from the body tag) , this way you will get more specificity and override the original code. Sometimes for some real hard cases, you need to add !important; to the end of the statement — color: red !important;

if your code ignored, do this. Open up chrome developer tools like this ( http://i.imgur.com/RfNyIBs.png ) find custom.css file in there step 2, then you add your changed code into the screen in middle, just don’t forget to copy it if you need to refresh ) and enter the css directly, if nothing changes, add #top, take something off, and you will see results live, so this way you don’t have to copy and paste and save every time to see whats working and what isnt. also you can edit the html live too and any of the files, but as soon as you refresh, its all gone.

also don’t use media=”screen” unless you see something like @media only screen and (max-width:767px) { .. if you see that, you need to grab that since that’s a media query (which is css that works on a specific screen size for mobile/tablets).

so first try (your code with #top directive)

#top .avia-icon-list .iconlist_icon {

height:64px;

width:64px;

line-height:60px;

font-size:30px;

text-align:center;

border-radius:500px;

position:relative;

float:left;

margin-right:30px;

margin-left:2px;

z-index:5;

border-style:solid;

border-width:2px;

color: #fff;

}

Then as you get comfortable you will see that css is like a postal address country, state, city, street, house.. further you go in the more specific it becomes. So you can take the less specific stuff off sometimes.

#top .avia-icon-list .iconlist_icon {

background-color: #d73119;

}

I wish you had a url, where I can look at these disks. when i click url from your name , a website loads, but nothing there.

Don’t give up on this tool, watch a youtube tutorial for it because its as easy or complex as you want it to be. Its the only one I use and only one many (if not all) use to debug or modify any website.

Thanks,

Nick

Hi,

This is the url of the About Us section of the demo http://kriesi.at/themes/enfold/pages/about-us/ … There are no icons here , but I am guessing thumbnail photos – like when you run the mouse over harrold houdini’s photo?

I got this css exactly the same way as shown on the above video using chrome developer tools

/*---these are the colors when mouse hovers--*/

#top .avia-team-member .twitter:hover {

color: rgb(70, 212, 254);

}

#top .avia-team-member .dribbble:hover {

color: rgb(228, 72, 133);

}

/*---this is the regular color of the icon inside circle--*/

#top .main_color .team-social a

color: grey;

}

/*---this is complete settings controlling size, shape, background color, position of the circle itself--*/

#top .team-social a {

text-decoration: none;

position: relative;

border-radius: 30px;

padding: 0 16px;

background: rgb(224, 17, 17);

margin: 3px;

display: inline-block;

height: 53px;

line-height: 54px;

width: 53px;

}

Keep playing with developer tools, i know at first it seems oppressive, but there is nothing better than this to use to quickly be able to edit css of any site.

Thanks,

Nick

Hi joe88,

Can we take a look at the site live? The header shrinks as part of the option to have a fixed header. You can also set your header to a fixed height using the css Kriesi posted in the FAQ for the theme here: http://themeforest.net/item/enfold-responsive-multipurpose-theme/4519990/faqs

We can assist if we can take a look at the site live but otherwise you can use that css and adjust as you’d like it (if that is what you are looking for).

As an aside, our support queue goes by oldest post first so when you self respond or bump a topic it actually sends it to the back of our queue. I just happened to have this topic still open from earlier and when I clicked on it I saw the new response (otherwise it would not have been in my queue).

Regards,

Devin