Docs

[ameoba007]

Hi I’m trying to blend my header into the background video playing on my website. I want it to look like https://www.squarespace.com/

I’m new to web creation so i might need more baby steps in order to incorporate this change. Please let me know how this could be achieved.

[ameoba007]

This reply has been marked as private.

[John Ezra]

Hi there,

Thanks for writing in! It seems you have already achieved the transparent masthead/header area? Are you still needing any help with this? Thanks!

[ameoba007]

Hi,

Thank you for getting back to me! I did figure it out thanks. But i seem to be having problem making the text in my sections pop out where a background image is inserted. I also need help in changing the font size. I wanted to know if i could do those for certain pages only, meaning If i change the font via CSS, will it change the font unilaterally for the entire website? I’m sorry if this is confusing.

What I’m asking for is:
1) how to make my text stand out so my background image is visible but my text is readable. I want to maybe make it transparent and have it show. Similar to how the header looks on top of my revolution slider.

2) Change the font size and type, and have it be page specific.

Thanks in advance!

[Joao]

Hi There,

You can try adding a blur radius shadow I guess it makes a bit more readable.

Please try adding this code to your Appereance / Customizer / Custom / CSS

.home .masthead-inline .desktop .x-nav {

text-shadow: 5px 5px 20px white;

}

This will apply the code just to your home page. If you want to apply to another page you have to use the page id in place of .home for example to use on Science page you would use

.page-id-179 .masthead-inline .desktop .x-nav {

text-shadow: 5px 5px 20px white;

}

The same applies for the font size and type.

You will use the css for example:

.page-id-179 p {
font-size: 20px;
font-family: "Times New Roman", Georgia, Serif; }

If you let us know your goals with details we will be able to help you to achieve it.

Let us know if we can help you with anything else.

Thanks

Joao

[ameoba007]

Thanks a lot for the tips! They helped a lot!
Just another question, If i wanted my text to show more over the background image how would i alter the css. The code you have provided above is not necessarily changing the way the text appears. any suggestions?

[Lely]

Hi There,

You’re welcome!
Please also add this CSS:

.text-shadow{
    text-shadow: 2px 2px 5px red, -2px -2px 5px red, 2px -2px 5px red, -2px 2px 5px red;
}

Feel free to update the values and the red color. Then just add the class text-shadow to the text element class field. See image below for sample result.

Hope this helps.

[ameoba007]

Hey thanks a lot for your help!

I’m making changes to the home page of my website, I’ve added css to give background sections a color-overlay when hovering over the section. When i applied the overlay, it seemed to translate into the next section as-well which already had a pre-existing overlay. I wanted to know how i can contain that to just the section I wanted to apply it to. Also when hovering over the section I wanted to change the color of the text so that when I hover over it the text also appears in a different color.
I know this might be confusing but really looking for some help!

Thanks in advance!

[Rue Nel]

Hello There,

Thanks for the updates! To add an overlay when you hover a section, please make sure that you have place the custom class in your sections. And then you can apply this custom css.

.x-section.color-overlay {
    position: relative;
}

.x-section.color-overlay:before {
    content: '';
    background: rgba(0,0,0,0.25);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    display: block;
    transition: all 0.35s linear;
}

.x-section.color-overlay:hover:before {
    background: rgba(0,0,0,0.75);
}

.x-section.color-overlay:hover * {
    color: red !important;
}

I’ve used different colors to illustrate any changes in would bring to your page. Feel free to change the colors and any other styles that you want to add.

[ameoba007]

This reply has been marked as private.

[Christian]

Hey there,

Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this.

Alternatively, you can use Essential Grid plugin which is bundled with X. To learn more about Essential Grid, please see http://essential.themepunch.com/#howtogetstarted.

Thanks.

[ameoba007]

Hey there!

Thank you guys so much for all the help you have provided! Its made this experience a good one for me!
I have recently updated my site and i wanted to know if you could help me with a few niggles that i can’t seem to figure out!
I changed my revolution slider that i wanted to put instead of the revolution video i had running. After i made the rev slider and put it in place of the video, it doesn’t seem to fit!

Can you please advise me on how i can and (where) i can change the settings to make the slider full width!? Also not all my slides are showing, 2/3 are but the last one is not. Also there are a few checkmarks showing on the bottom of the slider along with a green line. I dont know how to get rid of that! I know its a lot but your help is SOOO APPRECIATED!

Thanks in advance!

[Christopher]

Hi there,

Please add images as slider background (not layer).

In regards with check marks, provide us with login credentials so we can take a closer look.

Thanks.

[ameoba007]

This reply has been marked as private.

[Rad]

Hi there,

Would you mind providing a screenshot about the check mark? Looks like it’s gone now.

Thanks!

[Author]

Posts