Home Forums Weaver Xtreme Theme Set linear gradient on per page basis

This topic contains 12 replies, has 4 voices, and was last updated by  ldekay 8 months, 1 week ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #54158

    ldekay
    Participant

    Xtreme Guide Styling Specifics suggests I can change page background on a per page basis by adding one rule per page in the Global Custom CSS rule box, so I’ve tried putting
    .page-id-169 #wrapper {background-color: (#c0b389);}
    in the Main Options>Global Settings CSS but it didn’t seem to work.

    I tried putting it into the Wrapper Area BG settings CSS as
    .page-id-169 #wrapper {background-color: (#c0b389);} and then as .page-id-169 {background-color: (#c0b389);}
    but it still doesn’t seem to work.

    I eventually want to paint the background in a gradient so I originally got ambitious, and found CSS rules for gradients that seems to say I can use something like:
    .page-id-169 .gradient {background-image: linear-gradient(#89a1a5, #c0b389);}
    but when that didn’t work I stepped back to trying the above.

    Can you help guide me to what would be the proper CSS and where should it be added to create a background gradient for that specific page? http://iafi.org/local-chapters/columbia-river-gorge-chapter/

    Thanks in advance

    #54160

    Gillian
    Moderator

    For a a start, your CSS rule has incorrect syntax. There should be no brackets around the color, i.e.:

    .page-id-169 #wrapper {background-color: #c0b389;}

    #54161

    ldekay
    Participant

    Just tried that in Main Options>Wrapping Areas> Global Settings CSS and it didn’t work. Tried again with code in >Wrapper Area CSS and again didn’t work with or without #wrapper in the code.

    #54162

    Weaver
    Keymaster

    Try it without the page id just to be sure the basic rule works. It is possible you have an incorrect page id, or are looking on the wrong page.

    If you have Weaver Xtreme Plus, you can add per-page CSS in the Per Page options.

    #54164

    ldekay
    Participant

    I see that in the Xtreme Guide>Styling Specifics but it also says I can do that by adding page specific CSS to Global Settings. Is that not true?

    “If you do not have “Plus”, you will need to make one rule per page and place them in the Global Custom CSS rule box, adding the page id selector at the beginning.”

    #54165

    scrambler
    Moderator

    Right now the rule does not appear to be present, so please put the rule below in the theme global custom CSS rule box, and post the link of the page it is targeting so we can see what is going on.

    .page-id-169 #wrapper {background-color: #c0b389;}

     

    #54166

    ldekay
    Participant

    Entered, saved, no change in the page http://iafi.org/local-chapters/columbia-river-gorge-chapter/

    Global Settings

    #54167

    Gillian
    Moderator

    The rule, as scrambler said, needs to go in the theme global custom CSS rule box – it cannot go where you have put it, because the syntax is wrong for that location (should only have the {rule} section, and in this case it cannot target a specific page).

    #54168

    ldekay
    Participant

    Sorry, I’ve not tried this before and I assumed the global setting for the Xtreme theme was where it shold bo.

    I added the CSS to the Customizing>Custom CSS, but still not working. Is this the right place for the CSS?

    Global CSS” width=”281″ height=”166″ />

    #54169

    scrambler
    Moderator

    the them global CSS is Main Options > Fonts & Custom > Custom CSS Rule box,

    or Customize > Custom CSS > Global custom CSS

    #54170

    ldekay
    Participant

    Thank you, putting the CSS in the right place works perfectly.

    I also tried doing a gradient using this CSS, but it didn’t work
    .page-id-169 #wrapper .gradient {background-image: linear-gradient(#89a1a5, #c0b389);}

    Do I have the CSS wrong, or is it not possible to do a gradient?

    #54171

    Gillian
    Moderator

    There are lots of CSS gradient generators on the web (Google is your friend) which will create the correct CSS rule (the bit between the {}) for you.  You would then need to pre-pend your selectors (.page-id-169 #wrapper) to the start and put the complete CSS in the theme global CSS box as before.

    This webpage gives the general principles behind creating gradients.  Reading it, you could try this:

    .page-id-169 #wrapper {background: linear-gradient(#89a1a5, #c0b389)}

    #54174

    ldekay
    Participant

    Sweet! Many thanks to all of you for your help.

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.