Home page css styling doesn't work

  • Resolved Jag_sv

    (@jag_sv)


    10 years, 8 months ago

    Hi,

    I am having trouble adding custom css to home page only (different to other pages). E.g i want to change the look of a div, but i cannot.

    I’ve tried various options:
    Body.Home. xxxx
    Body.home.xxxx
    Body.home-page.xxxx
    Body.home-page.home.xxxx

    I can style .xxxx withought the body and home tags, but it will make the change site-wide which I do not want. Not sure what’s going on.

    I am using a plugin, Geodirectory as the home page.
    I do not have any page setup as static or post page for the home page through the general settings because of this. Not sure if this should have anything to do with it? But i can make changes sitewide like i mentioned before.

    I read on another post somewhere, maybe it’s the <php> tag in the header, but that looks OK too.

    website is rentals.spacereserve.com

    Any one have any ideas?

    Thanks

Viewing 6 replies - 1 through 6 (of 6 total)

  • WordPress automatically appends a class of .home to the home page, so you should be able to target that page specifically like this:

    .home p {color: #888;}

    which would change the colour of all the <p> elements on your home page to a medium grey.

    Thread Starter Jag_sv

    (@jag_sv)

    That’s the problem, it doens’t work. Not sure why, i’ve tried changing it various ways.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    does this work:

    .home {
 border: 10px solid red !important;
}

    ?

    what div or element exactly are you targeting?

    you will need to leave space characters between CSS classes of different elements, like:

    WRONG:
    body.home.menu {

    RIGHT:
    body.home .menu {

    also, as section is not a CSS class, this might need to be:
    body.home section.widget {

    and do clear the broswer cache after the changes so you get to see the results imediately.

    Thread Starter Jag_sv

    (@jag_sv)

    does this work:

    .home {
    border: 10px solid red !important;
    }

    ?

    That works! Ok, so i guess i must be typing the code in wrong or the Geodirectory plugin must not be letting me change it:
    It is the section.widget i’m trying to change for home only…

    .home.geodir_full_page section.widget{margin-bottom:200px;padding:80px!important; }

.home.section.widget {
    border: 10px solid #DDD;
   /* background-color: rgba(228, 233, 255, 1);
    margin-bottom: 15px;
    padding-left: 20px;
    border-radius: 5px;
}

*/

section.widget {
    border: 1px solid #DDD;
   /* background-color: rgba(228, 233, 255, 1);*/
    margin-bottom: 15px;
    padding-left: 10px;
    border-radius: 4px;
}
    Thread Starter Jag_sv

    (@jag_sv)

    also, as section is not a CSS class, this might need to be:
    body.home section.widget {

    and do clear the broswer cache after the changes so you get to see the results imediately.

    Wow, thanks! that worked. I did

    .home section.widget {

    hhhhh the headache one space put me through!

    Thanks for your help.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Home page css styling doesn't work’ is closed to new replies.