Announcement

Collapse
No announcement yet.

Modify css for a group of pages

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Modify css for a group of pages

    I'm a complete noob to this so forgive me it this is elementary.

    I've created a group of pages under "content". There is a "landing page" with sub pages under it. I would like to change some of the css for just those pages. Specifically, on the "landing page", I have a photo as the background for that page and the links to the sub pages are barely visible because they are light black text on a light grey background.

    Can anyone advise 1. how to modify the css for just a group of pages, 2. which component in the css is the links to the sub pages?
    If it helps, I am using the aperture html5 theme.

    Thank you in advance for any assistance.

  • #2
    CSS stands for Cascading Style Sheet, the cascading part is whats important. It means that things in a "lower" level override things on a higher level.

    It goes like this:

    inline > in page header > in separate document.

    If you want to override the CSS in the linked file, then you can put your code into the page header... if you want to override something in the header, but it right in line.

    Code:
    <style>
    .test {
     color: red;
    }
    </style>
    
    
    <div class="test" style="color: green;">This text will be green</div>
    
    <div class="test">This text will be red</div>
    So if you want to override the style on your sub pages, you can put the CSS code in the template file for your "Extra pages". If you only want SOME of the extra pages to have the style then you could put it just on those pages through the Admin area.

    Another way to do it is to apply your style only to certain sections.


    Code:
    <style>
    #sample.test {
     color: red;
    }
    </style>
    
    <section id="sample">
    <div id="test">This text will be red</div>
    </section>
    
    <div id="test">This text will not be colored</div>
    NOTE: I wrote all this from memory, and did not check it, so there might be some errors in the code, but the logic is sound.

    Comment


    • #3
      Thank you for your reply! That sounds like it will do what I need. On a related note, not being familiar with what certain things are called, can you tell me what the circled items are in the enclosed screenshot? Those are the items that I need to modify. Screenshot 2016-07-11 14.22.42.jpg
      Last edited by jknapton; 07-11-2016, 01:30 PM.

      Comment


      • #4
        It is hard to see what you have circled.
        However, watch this video about Google Chrome Inspect tool, it will allow you to answer your question:
        https://www.youtube.com/watch?v=1l4xz1QQhew

        Comment

        Working...
        X