• Hello,
    I am new to WordPress and am trying to figure certain things out. Hopefully someone here will be willing to provide assistance.

    Is it possible to change the way that WordPress assigns the div?

    My current issue is that I am trying to change font colors via CSS but am finding that WordPress is assigning tags automatically, thus not allowing me to change the font color in both places via the CSS. From what I can see, multiple areas are controlled by the same section of CSS. For example, I can’t assign the font on page 1 to be red, and assign page #2 to be blue.

    I hope this makes sense.

    I am using the Avada theme, but this should be generic to WordPress.

    In my current situation, if I change the font via the CSS code below, it changes the text (both) below that for page 1 & 2 :

    body, .post .post-content, .post-content blockquote, #wrapper .tab-holder .news-list li .post-holder .meta, #sidebar #jtwt, #wrapper .meta, .review blockquote div, .search input, .project-content .project-info h4, .title-row, .simple-products-slider .price .amount, .quantity .qty, .quantity .minus, .quantity .plus, .timeline-layout h3.timeline-title, .blog-timeline-layout h3.timeline-title, #reviews #comments > h2 {
    color: #747474;
    }

    Page #1:
    <div class=”content-container”>
    Overcome career advancement obstacles by earning an online degree that emphasizes critical thinking and leadership………..

    Page #2
    <div class=”post-content”>
    <div style=”max-width: 714px; width: 714px; margin-left: 113px; margin-top: 0px;”>
    </div>

Viewing 10 replies - 1 through 10 (of 10 total)
  • I’m not familiar with your particular theme, but if it calls body_class(), WordPress will add various HTML classes to your <body> tag that you can target with CSS rules.

    If you want to change the font color just for one page, navigate to the page in question and check the source code of your page (usually done by right-clicking on your website and selecting an option like “View Source”), If body_class() in use, you should see some classes attached to your <body> tag like postid-xxx or page-id-xxx, where xxx is a number. You could then use your theme’s built-in custom CSS option or a custom CSS plugin and put:

    body.postid-xxx {
        color: blue;
    }
    Thread Starter KINNEY0201

    (@kinney0201)

    Hi Stephen,

    Thank you for your response. I pulled the source code for the two different pages in question. They appear to be distinguished by different classes, however, I tried your suggestion and it didn’t work.

    I tried:

    body.post-content {
    color: blue;
    }

    Here is just a snippet of the code from each source:

    Page 1:

    <div class=”post-content”>
    <div style=”max-width: 714px; width: 714px; margin-left: 113px; margin-top: 0px;”>
    <h3>Saint Leo University’s online programs are identical to the courses we offer at our traditional Florida campus, delivered for the way that adults prepare, study, participate, and thrive.</h3>
    <hr class=”star”>
    When you earn your degree from Saint Leo, you enter a competitive job market with a highly regarded degree from a regionally accredited university—the highest form of accreditation a college or university can obtain.</p>
    <p>At Saint Leo, our entire university community works hard to create a student-centered environment that supports your learning.</p>
    <p>It’s a simple contract. If you work hard at Saint Leo University, you will be rewarded.</p>
    <h3>Degree Programs Built to Last</h3>
    <p>The professors who create and instruct your courses hold advanced degrees, devote themselves to the art of teaching, and invest in your development. We understand what is most effective in online learning, and are always finding new ways to help you reach your goals.</p>
    <h3>Specially Designed for Adult Learners</h3>
    <p>We’ve geared our online programs to the unique needs of adult learners. Our undergraduate and graduate programs prepare you for high-demand careers in the 21st century job market—including business, accounting, criminal justice, and health care management.</p>
    <p>And we know how adult learners best think and grow—with relevant coursework; clear, constructive feedback; and respect for the experiences you bring to the table.</p>
    <h3>A Well-Rounded Education for Career Success</h3>
    <p>The world hires and rewards people who think. Our general education core makes you well rounded, and ready to think on your feet.</p>
    <p>Success requires a wide range of skills and knowledge, so fundamental courses in the arts, humanities, religion, and sciences complete the specialized training you receive in your major.</p>
    <h3>Honoring Achievement</h3>
    <p>We not only inspire excellence in our students; we reward your accomplishments.</p>
    <p>Hardworking students are recognized through our Dean’s List and membership in Delta Epsilon Sigma honor society, as well as on graduation day, when you walk across stage and receive your Saint Leo University diploma.
    </p></div>
    </div>
    ——————————————————————–
    Page 2:

    <div style=”margin-top: 160px; margin-bottom: 220px;”><div class=”fusion-content-boxes content-boxes columns fusion-columns-2 fusion-content-boxes-1 content-boxes-icon-boxed row”>
    <div class=”fusion-column content-box-column content-box-column-1 col-lg-6 col-md-6 col-sm-6″><div class=”col content-wrapper-background content-wrapper-boxed” style=”background-color:#275d39;”><div class=”heading heading-with-icon”><div style=”margin-left:-44px;top:-87px;” class=”image”><img src=”https://veterans.saintleo.edu/testwp/wp-content/uploads/2014/06/Lion_Head.png&#8221; width=”88″ height=”74″ /></div><h2 class=”content-box-heading”>Bachelor’s Programs</h2></div>

    <div class=”content-container”>

    Overcome career advancement obstacles by earning an online degree that emphasizes critical thinking and leadership.View Bachelor’s Programs<div class=”fusion-clearfix”></div></div></div></div>

    <div class=”fusion-column content-box-column content-box-column-2 col-lg-6 col-md-6 col-sm-6″><div class=”col content-wrapper-background content-wrapper-boxed” style=”background-color:#275d39;”><div class=”heading heading-with-icon”><div style=”margin-left:-44px;top:-87px;” class=”image”><img src=”https://veterans.saintleo.edu/testwp/wp-content/uploads/2014/06/Lion_Head.png&#8221; width=”88″ height=”74″ /></div><h2 class=”content-box-heading”>Master’s Programs</h2></div><div class=”content-container”>Raise your profile with a highly specialized advanced degree that values rigorous independent thinking and applied knowledge.View Master’s Programs<div class=”fusion-clearfix”></div></div></div></div><div class=”fusion-clearfix”></div>
    <div class=”fusion-clearfix”></div></div></div>
    ————————————————–

    Stephen,
    Please note, I did find that when I change the following in the CSS, font color changes on BOTH pages.

    body, .post .post-content, .post-content blockquote, #wrapper .tab-holder .news-list li .post-holder .meta, #sidebar #jtwt, #wrapper .meta, .review blockquote div, .search input, .project-content .project-info h4, .title-row, .simple-products-slider .price .amount, .quantity .qty, .quantity .minus, .quantity .plus, .timeline-layout h3.timeline-title, .blog-timeline-layout h3.timeline-title, #reviews #comments > h2 {
    color: #747474;
    }

    body.post-content wouldn’t work, because your <body> tag doesn’t have an HTML class named post-content. Can you post a link to the specific pages you’re trying to change?

    Thread Starter KINNEY0201

    (@kinney0201)

    I see.

    Sure thing, it’s just a test site so there’s not much there yet.

    Page 1 (text within boxes (example: Overcome career advancement obstacles by earning an online degree that emphasizes critical thinking and leadership.)

    https://veterans.saintleo.edu/testwp/?page_id=8

    Page 2

    Page 2 (paragraph(s) text (example: When you earn your degree from Saint Leo, you enter a competitive job market with a highly regarded degree from a regionally accredited university—the highest form of accreditation a college or university can obtain.)

    https://veterans.saintleo.edu/testwp/?page_id=126

    I hope this helps. Thank you very much, Stephen. I really do appreciate it.

    As I suspected, your theme does call body_class(), so you can use the classes I mentioned earlier to customize on a page-by-page basis.

    For page 1, the page ID is 8, so you would use:

    body.page-id-8 .post-content {
    color: blue;
    }

    And for page 2, the page ID is 126, so you would use:

    body.page-id-126 .post-content {
    color: red;
    }

    Substitute whatever colors you’d like to use. Both of these CSS rules work on a page-by-page basis: the first rule will only affect page 1, and the second rule will only affect page 2.

    Thread Starter KINNEY0201

    (@kinney0201)

    That is great news!

    Would it work the same if I switch the permalinks option from default to post name?

    For example, https://veterans.saintleo.edu/testwp/?page_id=8 would change to https://veterans.saintleo.edu/testwp/academics.

    If so, I would assume that I would use this? Or am I off base?

    body.academics .post-content {
    color: blue;
    }

    or for

    https://veterans.saintleo.edu/testwp/?page_id=126

    How would this one work?
    https://veterans.saintleo.edu/testwp/academics/academic-excellence/

    Thank you again, Stephen, you are great.

    Actually, you don’t have to change anything if you switch to a different permalink structure. That’s part of the beauty of body_class().

    Thread Starter KINNEY0201

    (@kinney0201)

    Wow! More good news! Thank you!

    Thread Starter KINNEY0201

    (@kinney0201)

    Hi Stephen,

    I’d like to revisit this for a second if you don’t mind. I’ve found another example of this which seems a bit more complicated. Well for me anyway ?? as I can’t seem to get the same theory to apply.

    Page w/ id in question:

    https://veterans.saintleo.edu/testwp/academics/student-advising/501-2/

    CSS snippet trying to change for THIS PAGE ONLY:

    body a, body a:before, body a:after, .single-navigation a[rel=”prev”]:before, .single-navigation a[rel=”next”]:after

    I tried this with no luck:

    body.page-id-501-2 body a, body a:before, body a:after, .single-navigation a[rel=”prev”]:before, .single-navigation a[rel=”next”]:after {
    color: #275d39;
    }

    What did I miss?

    As always, thank you Stephen.

    Your selectors are a bit off, but more importantly: what are you trying to accomplish? It doesn’t really make sense to put a color declaration in the:before pseudoselector because the browser doesn’t really know what item should have the color change.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Is it possible to change div tags assigned by WordPress?’ is closed to new replies.