WordPress.org

Ready to get started?Download WordPress

Forums

Does page slug create a class in CSS.. Easy question. (3 posts)

  1. landmark714
    Member
    Posted 2 years ago #

    My company had a site worked on and one of the pages worked on was our home page. I do know HTML and CSS in theory but I was hoping someone could help with a quick question.

    I have created an unpublished test page to start fiddling around with. On our Home page we have a few image elements that are aligned with the left side of the page. In order to align that element I have found this home code in our CSS file:

    .wp-image-933, .wp-image-976, .wp-image-1340 {border: none !important;}
    .wp-image-1340 {margin-bottom: 35px;}
    .home .entry ul li {font-size: 17px; line-height: 24px; margin-left: -29px !important; padding-left: 25px;  background:url(/wp-content/themes/estate/images/checkmarkbox.png) no-repeat; background-position:0px 6px; list-style: none;}
    .home .entry {margin-left: 20px !important;; margin-right: 20px !important;}
    .home #headerimg {margin-left: -20px;}
    .home .wp-image-1353 {border: none !important; margin: 25px 0pt 0pt -40px !important;}
    .home .woo-sc-hr {margin: 0px 0 -10px 0;}
    .home #intro {margin-bottom: -30px !important;}

    However, when I copy and paste the home page HTML into our Test page HTML the image element starts paying attention to margins again.

    Obviously, the CSS above is meant just for the home page. I'm wondering if WordPress automatically creates a class for each page that's created.

    I tried creating this in our CSS file:

    .wp-image-933, .wp-image-976, .wp-image-1340 {border: none !important;}
    .wp-image-1340 {margin-bottom: 35px;}
    .test-2 .entry ul li {font-size: 17px; line-height: 24px; margin-left: -29px !important; padding-left: 25px;  background:url(/wp-content/themes/estate/images/checkmarkbox.png) no-repeat; background-position:0px 6px; list-style: none;}
    .test-2 .entry {margin-left: 20px !important;; margin-right: 20px !important;}
    .test-2 #headerimg {margin-left: -20px;}
    .test-2 .wp-image-1353 {border: none !important; margin: 25px 0pt 0pt -40px !important;}
    .test-2 .woo-sc-hr {margin: 0px 0 -10px 0;}
    .test-2 #intro {margin-bottom: -30px !important;}

    "test" being the page name and "test-2" the page slug. It's not working and pulling the image over so I can assume I'm a bit off in my assumptions here.

  2. esmi
    Forum Moderator
    Posted 2 years ago #

    Try looking at the classes generated on the <body> tag.

  3. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    ref:
    http://codex.wordpress.org/Function_Reference/body_class

    unless your theme uses its own code, the page specific body class does not use the page slug but the page ID in form of .page-id-123

Topic Closed

This topic has been closed to new replies.

About this Topic