front page content background opaque

  • Hello,
    I have been reading a lot on this and installed firebug, but I am still confused as to where its located in style.css or if it is even located in style.css. What I want to do is change only the front page content area to have a opaque look to it. I noticed on one post I need to set something like
    div.content{

    background-color: rgba(0, 0, 0, 0.7);
/* rgb = 0 0 0 is black color */
/* a = 0.7 is 70% of alpha channel */
}

    for my front page but I cant find div.content for just the front page in my style.css. here is my website
    https://www.jaystoutphotography.com/
    also if anyone knows of a good post on how to use firebug as a beginner would be great!
    Thanks Tim

    [Moderator Note: Please ensure that you are embedding links correctly in your posts.]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter tschnedler

    (@tschnedler)

    Ok, I fixed the body part by creating a front-page.php file in my child theme and then just removing the complete body in it, But I am still not able to figure out how to make the header and the footer transparent or apply a opaque look to them. Any suggestions? I have seen other sites with this, and i tryed to check how they did it with firebug, but I am just learning firebug, and could not figure it out.
    Really need some help with this if anyone can help thanks.

    Thread Starter tschnedler

    (@tschnedler)

    ok once again i have managed to come up with a fix for the header background, by doing

    body #page {background:transparent;}
#main {padding: 0;}
#access {margin: 0 auto; box-shadow: none;}
#primary {background-color:#fff;}
#branding { border-top: none; }

    in my child style.css. and i got to footer to go away by makeing a front-page.php in my child theme and removing the call to the footer. I am new to this and not even shure if i should be doing it that way. Now I still need help on removing the white border lines that are still visable for the menu, the font color for the menu area, and i want to make the header and menu load at the top of the screen and not scroll down. Anyone able to help me with this please?

    Thread Starter tschnedler

    (@tschnedler)

    LOL i keep it up ill fix all this myself,,,, good learning expierence, ok everything is now fixed except two things,,, need help with moving the header and the menu to the top of the screen, and all the white lines between the menu, and header, and menu and body and the last one, also the odd gray line at the top of the menu. Thanks!

    Thread Starter tschnedler

    (@tschnedler)

    ok so, i have fixed the white line issues also, by useing the follow code in my child style.css

    .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
    border-bottom: 0px solid #EDEDED;
    border-top: 0px solid #EDEDED;
    display: inline-block;
    text-align: left;
    width: 100%;
}
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
    display: none;
}
.main-navigation ul {
    margin: 0px;
    text-indent: 0px;

 }

 footer[role="contentinfo"] {
    border-top: 0px solid #EDEDED;
    clear: both;
    font-size: 0.857143rem;
    line-height: 0;
    max-width: 68.5714rem;
    margin-top: 1.71429rem;
    margin-left: auto;
    margin-right: auto;
    padding: 1.71429rem 0px;
}

    Only thing i have left now is to figure out how to move my header and nav menu to the top left of the screen. Anyone able to help with that?

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘front page content background opaque’ is closed to new replies.